《前端与SEO》—— 第六章：前端开发人员的一些SEO优化方法

前言

SEO工作并不是专属于专业的从业人员。身为前端开发，我们一样可以在日常的开发过程中兼顾一些代码层面上的SEO优化。 本文将列举一些前端常用SEO方法。

方法一：设置合理的 title、keywords、description

前面已经讲解meta元素对SEO的重要性，其中最为重要的当属title、keywords、description。按照正常流程，这三者都是由产品提供。如果产品或者PM忘记了，前端开发可以适时的加以提醒，让他们提供。如果网站是个人网站，则可以根据页面内容自己编写。无论是产品提供还是自己编写，都需要贴合当前网页的主体内容，切忌一个网站所有的网页的title、keywords、description一模一样。

三者的编写示例：

<title>页面标题title>


<meta name="description" content="页面描述" />


<meta name="keywords" content="关键字" />

方法二：a 标签优化

搜索引擎抓取工具¹会自动访问页面中的a标签链接。但并不是所有的a标签链接都会被访问，只有通过a标签的href属性设置的链接才会被访问。基于这个机制有如下优化方向：

• a 标签必须使用href属性；
• href属性必须是指向可解析的网址链接；
• a 标签的跳转行为不能是通过JavaScript触发的；
• 链接地址尽量不要通过JavaScript生成；

此外，链接指向的网页对当前网页的排名也存在影响。所以，我们还需要想搜索引擎说明意图。可通过rel属性设置：

rel 值
rel="sponsored"	请使用 sponsored 值标记广告链接或付费展示位置链接（通常称为“付费链接”）。详细了解 Google 对付费链接的态度。注意：对于这类链接，以前推荐使用 nofollow 属性，现在，您仍可以使用该属性进行标记，但更建议您使用 sponsored 标记。
rel="ugc"	建议您使用 ugc 值标记用户生成的内容（例如评论和论坛帖子）的链接。如果您想对值得信赖的贡献者（始终如一地做出高质量贡献的成员或用户）表示认可和奖励，则可从他们发布的链接中移除此属性。详细了解如何防范垃圾评论。
rel="nofollow"	如果其他值不适用，并且您希望 Google 不跟踪您网站上的出站链接，或不从您的网站上抓取链接页，请使用 nofollow 值。对于您网站中的链接，请使用 robots.txt disallow 规则。

摘自——《说明出站链接的用意以实现搜索引擎优化 (SEO) | Google 搜索中心 | 文档 | Google Developers》

对付费链接、需要登录的链接或不受信任的内容（例如用户提交的内容）使用 rel=nofollow，以免将良好的信号传递给它们，或者让它们的低劣质量牵连到您。

方法三：屏蔽不需要被抓取的网页

有些网页我们并不想要它被抓取，这时就需要屏蔽这些网页。

屏蔽网页可以通过添加noindex来实现：

<meta name="robots" content="noindex">

方法四：保持简单的网址结构

网站的网址结构应尽可能简单，合乎逻辑并易于理解，尽可能在网址中使用易读的字词，而非冗长的 ID 编号。

• 在网址中使用简单的、说明性的字词。
• 在网址中使用已本地化的字词（如果适用）。
• 根据需要使用 UTF-8 编码。
• 不建议在网址中使用非 ASCII 字符。
• 不建议在网址中使用不易读的、冗长的 ID 编号。
• 在网址中使用连字符。这样有助于用户和搜索引擎更轻松地了解网址中的关键字。建议您在网址中使用连字符 (-)，而不要使用下划线 (_)。

方法五：图片相关优化

• 避免将文本（特别是网页标题和菜单项等重要的文本元素）内嵌在图片中，因为并非所有用户都能访问这类文本（而且网页翻译工具不适用于图片）。
• 优化图片加载速度。图片通常是影响整体网页大小的最大因素，可能会导致网页在加载时既速度缓慢又开销巨大。我们需要对图片进行优化，以提供优质且高速的用户体验。
• 使用高画质图片。
• 为图片添加描述性的标题、说明、文件名和文字。
• 尽量使用img标签来添加图片。CSS设置的图片不会被搜索引擎抓取。
• 使用自适应图片。针对不同屏幕尺寸，显示对应尺寸的图片。

优化图片加载速度

网站图片的优化是一门大学问，这里不具提展开了，如有兴趣，推荐查看：《快速加载 (web.dev)》。

下面简单列举一些常用的方法：

• 选择正确的图像格式：不同格式的图片大小不同，选择最佳的图片格式来减少图片大小。
• 图片压缩
• 用视频代替动图可以更快地加载页面
• 提供正确尺寸的图像：避免图片的缩放
• 使用WebP图像。WebP图像比对应的JPEG和PNG图像要小——文件大小通常减小 25–35%。这可以减小页面大小并提高性能。
• 使用图片CDN优化图片加载
• 图片懒加载。避免图片一次性加载，只有在需要时才加载图片。

自适应图片

设计自适应网页可以带来更好的用户体验，因为用户可以在各种设备上使用这些网页。

网页使用 属性或 元素指定自适应图片。

借助“srcset”属性，您可指定同一图片的不同版本，特别是针对不同屏幕尺寸：

<img srcset="example-320w.jpg 320w,
       example-480w.jpg 480w,
       example-800w.jpg 800w"
   sizes="(max-width: 320px) 280px,
      (max-width: 480px) 440px,
      800px"
   src="example-800w.jpg" alt="responsive web">

元素是一个容器，用于对同一图片的不同 版本进行分组。它提供了一种后备方法，让浏览器能够根据设备特征（例如像素密度和屏幕尺寸）选择合适的图片。对于尚不支持新图片格式的客户端而言，picture 元素也非常便于利用内置的优雅降级功能处理新图片格式。

建议您在使用 picture 标记时，始终提供 img 元素（带 src 属性）作为后备，格式如下：

<picture>
	<source type="image/svg+xml" srcset="pyramid.svg">
	<source type="image/webp" srcset="pyramid.webp">
	<img src="pyramid.png" alt="large PNG image...">
picture>

方法六：无障碍优化

无障碍优化对SEO也很重要。页面的无障碍优化做的好，搜索引擎在解析网页文件的时候就可以获取到调理清晰的网页结构。调理清晰的网页结构有助于搜索引擎提取关键信息。再者，搜索引擎约等于“盲人”，没法看到页面效果的。盲人在浏览网站时，只能借助浏览器朗诵网页文案来了解网站内容。这个情景与搜索引擎解析网页很相似。所以，无障碍优化好的网站，SEO方面必然非优秀。

列举几个常见的无障碍优化手段：

• 合理使用HTML5语义化标签
• 给 img 标签的添加 alt 属性
• 设置屏幕朗读语言
• 无障碍表单

方法七：分页优化

分页对大量内容是很有用的手段。但由于搜索引擎不具备交互能力，只会获取到第一页的内容。为了解决这个问题，我们需要把分页信息体现在URL中，然后将需要索引的分页URL在sitemap中罗列出来。这样，搜索引擎就可以通过URL访问其他分页的内容。

注：

• 并不是所有的分页都需要优化。
• 分页信息在URL中体现，需要修改URL，此操作会导致页面刷新。

结语

前端开发人员能做的SEO优化手段有很多，绝不仅限于上面提及的几点。开发之余，顺手做一些SEO优化，是很划算的一笔"买卖"。

---

1. 搜索引擎抓取工具是一种由搜索引擎公司开发的自动访问网站并收录网站的脚本机器人。俗称爬虫。 ↩︎