Angular.js+GitHub Pages搭建的SPA作品集网站如何做SEO优化？

嘿，这个问题我之前帮不少开发者解决过——在GitHub Pages上托管AngularJS SPA确实会碰到SEO的痛点，尤其是没法用Prerender、服务端渲染这类工具的情况下。不过别担心，咱们有不少纯前端/静态层面的优化手段，亲测有效，下面给你拆解一下：

1. 动态更新页面元数据（标题、描述等） #

Google现在能执行JS渲染SPA内容，但每个页面的元数据（title、description、Open Graph标签）还是得明确对应，帮助爬虫识别页面主题。你可以借助AngularJS的路由resolve和$rootScope事件来动态更新这些标签：

angular.module('artistPortfolio', ['ngRoute'])
  .config(function($routeProvider, $locationProvider) {
    // 启用hashbang模式，让Google能识别路由路径
    $locationProvider.html5Mode(false).hashPrefix('!');
    
    $routeProvider
      .when('/', {
        templateUrl: 'views/home.html',
        controller: 'HomeCtrl',
        resolve: {
          pageMeta: () => ({
            title: 'Anna Moore - 当代抽象艺术家作品集',
            description: '专注于色彩实验与空间叙事的艺术家，展示2019-2024年核心创作作品'
          })
        }
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl',
        resolve: {
          pageMeta: () => ({
            title: '关于Anna Moore | 创作理念与成长历程',
            description: '从平面设计转型纯艺术的经历，以及对色彩、材质的探索理念'
          })
        }
      });
  })
  .run(function($rootScope) {
    // 路由切换时更新页面元数据
    $rootScope.$on('$routeChangeSuccess', (_, current) => {
      const meta = current.locals.pageMeta;
      if (!meta) return;
      
      // 更新页面标题
      document.title = meta.title;
      
      // 更新description标签
      const descTag = document.querySelector('meta[name="description"]');
      if (descTag) descTag.content = meta.description;
      
      // 可选：更新Open Graph标签，优化社交分享
      const ogTitle = document.querySelector('meta[property="og:title"]');
      const ogDesc = document.querySelector('meta[property="og:description"]');
      if (ogTitle) ogTitle.content = meta.title;
      if (ogDesc) ogDesc.content = meta.description;
    });
  });

2. 用Hashbang模式适配GitHub Pages路由 #

GitHub Pages不支持服务器端路由重写，如果你用AngularJS的HTML5模式（不带#的URL），直接访问子路径会返回404。而#!（hashbang）模式是Google官方认可的SPA路由方案，爬虫会把#!/about这类路径当作实际页面URL处理，不会出现404问题，也能正确索引每个子页面。

3. 预渲染静态快照（替代Prerender） #

既然没法用服务器端渲染工具，咱们可以手动/用工具预渲染每个路由的静态HTML文件，放在GitHub Pages根目录。这样爬虫可以直接抓取静态内容，不用依赖JS执行：

• 工具推荐用PhantomJS写个简单脚本，遍历你的所有路由，抓取渲染后的HTML；或者用angular-prerender这类专门的Angular静态生成工具。
• 比如预渲染/#!/about成about.html，然后在sitemap.xml里同时提交hashbang URL和静态URL，确保爬虫能找到。

4. 优化图片SEO（你的网站核心内容） #

因为你的网站以图片为主，图片的SEO权重很高，一定要做好：

• 给每张图片添加精准的alt文本：比如<img ng-src="{{work.imageUrl}}" alt="{{work.altText}}">，altText要描述图片内容+创作信息，比如“2023年创作的《雾中森林》，丙烯材质，灰绿色调表现自然静谧感”，而不是“作品图片”。
• 用有意义的图片文件名：比如misty-forest-2023-acrylic.jpg，不要用img001.jpg。
• 可选：添加title属性补充图片说明，或者用picture元素适配不同设备，但核心还是alt文本。

5. 完善Sitemap和Robots.txt #

• 手动生成sitemap.xml：包含所有路由的hashbang URL（比如https://yourusername.github.io/#!/about），标注最后更新时间和优先级，放在根目录。示例：

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://yourusername.github.io/#!/</loc>
    <lastmod>2024-05-20</lastmod>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://yourusername.github.io/#!/about</loc>
    <lastmod>2024-05-20</lastmod>
    <priority>0.8</priority>
  </url>
</urlset>

• 配置robots.txt：放在根目录，允许爬虫访问所有内容，并指定sitemap位置：

User-agent: *
Allow: /
Sitemap: https://yourusername.github.io/sitemap.xml

6. 用Google Search Console验证和监控 #

• 提交你的网站到Google Search Console，验证所有权。
• 用URL Inspection工具查看每个页面的“已渲染内容”，确认爬虫能正确抓取到文本描述和图片alt信息。
• 提交sitemap，触发Google主动抓取你的页面。

这些方法组合起来，虽然没有服务器端渲染那么极致，但完全能满足GitHub Pages上AngularJS SPA的SEO需求，确保Google能正确索引你的作品集内容。

内容的提问来源于stack exchange，提问作者Przemysław Kalita