⽹站SEO开发实践 | Kitety别样

type

Post

status

Published

date

May 23, 2024

slug

seo-tutorial

summary

一份全面的SEO开发实践指南，详细介绍了如何通过技术选型、开发细节、性能优化和SEO元素等关键方面来提升网站的搜索引擎优化（SEO）。文章强调了友好URL、响应式设计、语义化标签、合理使用链接标签、404页面设置、图片优化、缓存和CDN利用、规范化索引、SEO三元素（TDK）以及核心Web体验指标（Core Web Vitals）的重要性。作者还提供了关于如何创建Sitemap、robots.txt和利用Lighthouse进行跑分优化的实践技巧。

起因

因为之前做过一些网页的重构⼯作，主要解决了SEO和⼀些性能优化的问题，因此就SEO和性能优化、评分优化等整理出一份实践⽂档。

技术选型

主要针对是否需要做SEO来进⾏选择

是否SEO	技术选择
需要	需要SEO可以选择Next.js（React技术站）或者Nuxt.js(Vue技术站)，推荐Nextjs
不需要	React、Nextjs或者Vue、Nuxtjs都可以，具体的不限制，推荐Nextjs（React向）

SEO知识

⽂档整理

⽬前网络也有总结SEO的技术⽂档可以参考

SEO 新手指南：基础知识 | Google 搜索中心 | 文档 | Google for Developers

掌握基本的搜索引擎优化 (SEO) 知识可以带来显著的效果。欢迎阅读 Google SEO 新手指南，简要了解搜索引擎优化的基本知识。

https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=zh-cn

面向 Web 开发者的 SEO 指南 | Google 搜索中心 | 文档 | Google for Developers

使内容易于搜索很重要，因为这样可以吸引更多相关用户浏览您的网站。若要了解如何进行搜索引擎优化 (SEO)，请查看这一面向 Web 开发者的 SEO 指南。

https://developers.google.com/search/docs/fundamentals/get-started-developers?hl=zh-cn

开发细节

友好的URL地址

名称	描述
清晰⽽简洁的URL	URL应该简短、清晰，能够准确反映⻚⾯内容。避免过⻓、含有⽆关信息或特殊字符的URL • 不好的URL： https://example.com/pageid=123&category=product • 好的URL： https://example.com/productpage
关键词优化	在URL中使⽤相关关键词，有助于搜索引擎理解⻚⾯内容 • 不好的URL： https://example.com/p123 • 好的URL： https://example.com/seofriendly-url
使⽤连字符⽽⾮下划线	连字符（-）在URL中被认为是分隔符，⽽下划线（_）可能不被搜索引擎理解为分隔符 • 不好的URL：https://example.com/seo_friendly_url • 好的URL： https://example.com/seofriendly-url
避免动态参数	尽量避免在URL中包含动态参数，因为它们可能使搜索引擎难以理解 • 不好的URL： https://example.com/page?sessionid=123 • 好的URL： https://example.com/staticpage
⼩写字⺟	使⽤⼩写字⺟，因为URLs对⼤⼩写敏感，统⼀使⽤⼩写以避免混淆 • 不好的URL： https://example.com/SEOFriendly-URL • 好的URL： https://example.com/seofriendly-url

项目实践

url简洁

url包含实质性的关键词

url使⽤连字符链接

url不包含动态参数

url使⽤⼩写字⺟

响应式设计

描述

⽹站采⽤响应式设计，以适应不同⼤⼩和类型的移动设备。这有助于提供⼀致的⽤⼾体验，并避免为移动设备单独创建不同版本的⽹站。

优点

SEO优点

优点	描述
用户体验优化	响应式设计可以使您的⽹站在各种设备上都能良好地展⽰和使⽤。这提⾼了⽤⼾的满意度和留存率，这对SEO⾮常重要。
移动优先指数	Google已经将移动优先指数作为排名算法的⼀个重要因素。这意味着Google更倾向于使⽤移动版本的内容和⻚⾯结构来确定排名。具有响应式设计的⽹站更有可能在移动搜索中获得更好的排名。
减少重复内容	响应式设计避免了为不同设备创建多个版本的⽹站。这可以减少重复内容的问题，因为Google通常不喜欢重复的内容，可能会降低排名。
链接权重统⼀	响应式设计意味着所有设备上的内容都在同⼀个URL下。这有助于保持所有⻚⾯的链接权重统⼀，⽽不会因为多个版本⽽分散。
提⾼⽹站速度	响应式设计可以减少加载时间，因为它避免了重定向到移动版本或加载不同设备的不同内容。

开发层面

优点：开发⼈员使⽤⼀套代码即可实现多端适配，维护便利。缺点：多端适配增加代码复杂度，但是相⽐于维护多套代码，可以接受。

实践

响应式设计主要是针对于⼿机端、PC端，有可能还有平板尺⼨的设备适配。推荐的css仓库有Tailwind CSS和Bootstrap等都可以实现，具体可以参考这两个框架的官⽅⽂档。

⽬前⽐较流⾏的是Tailwind CSS ，我用的比较多的也是这个⽅案，便捷手册可以参考Cheatsheet。

测试点

在Chrome打开开发者⼯具调节屏幕宽度，或者使⽤辅助⼯具⽐如Responsive Viewer查看，并且需要注意在黑暗模式下的适配问题。

语义化标签

描述

语义化的标签指的是在 HTML 中使⽤具有语义含义的标签来描述⽹⻚的内容结构，⽽不是仅仅依赖于样式或其他⽅式来呈现内容。

名称	描述
更好的理解和索引	搜索引擎会根据⽹⻚的语义化结构更好地理解⽹⻚内容，从⽽更准确地索引⻚⾯。例如，使⽤ `<header>` 、 `<nav>` 、 `<main>` 、 `<article>` 、`<section>` 、 `<footer>` 等语义化标签可以明确⻚⾯的不同部分，有助于搜索引擎了解⻚⾯的结构和内容。
提⾼关键词权重	语义化标签能够使⻚⾯内容更具有可读性和可理解性，有助于提⾼关键词的权重。搜索引擎会更加重视语义化标签中的关键词，从⽽提⾼⻚⾯在相关搜索结果中的排名。
改善⽤⼾体验	语义化标签能够使⻚⾯更具有结构性和逻辑性，提⾼⽤⼾对⻚⾯内容的理解和浏览体验。良好的⽤⼾体验也是搜索引擎排名的重要因素之⼀。
有助于⽆障碍访问	语义化标签可以改善⽹站的⽆障碍访问性，使残障⼈⼠和使⽤辅助技术的⽤⼾更容易访问和理解⽹⻚内容。

实践

⽂中的标签使⽤语义化标签即可，参考html5语义化标签和HTML5 语义元素即可，⽽不是通篇的div标签。

链接标签

描述

⽹站中a标签的⻚⾯跳转⽅式

优点

搜索引擎爬⾍通常能够正确解析和处理标准的<a>标签链接，从⽽更好地理解⽹⻚的结构和内容。

原因：爬⾍不能执⾏JavaScript中的逻辑，使⽤ JavaScript 跳转时，搜索引擎爬⾍⽆法正确解析⻚⾯中的链接，导致⽆法有效地索引⻚⾯内容，从⽽影响⽹⻚在搜索结果中的排名和可⻅性。

属性

a标签的不同的属性具有不同的作⽤

属性名	描述	细节
rel	⽤于指定当前⽂档与链接⽬标之间的关系 1.rel="nofollow" ：告诉搜索引擎不要跟踪链接。这可以防⽌被链接的⻚⾯被搜索引擎索引。 2.rel="noopener" ：防⽌新打开的⻚⾯可以通过 window.opener 访问打开它的⻚⾯，提⾼安全性。3.rel="noreferrer" ：防⽌浏览器发送Referer 头部信息，提⾼隐私性。 4.rel="prefetch" ：提⽰浏览器在空闲时预取链接的内容，以加快⻚⾯加载速度。	1.常规的使⽤的就是不处理rel，默认就是追踪链接，也不会预请求 2. 针对于外部链接，⽐如⼀些分享的⽹⻚可以设置为 `nofollow noopener noreferrer` 3.需要预先请求的资源设置rel为 `prefetch`
download	⽤于指⽰浏览器下载链接指向的资源，⽽不是在浏览器中打开它。	在下载⽂档的时候使⽤
target	属性⽤于指定链接打开的⽬标窗⼝或框架。常⽤的取值有： • _self ：在当前窗⼝中打开链接（默认值）。 • _blank ：在新窗⼝中打开链接。	默认在本⻚⾯打开，需要新窗⼝打开的设置为 `_blank`

实践

⽹⻚中的所有的⻚⾯跳转都⽤a标签跳转，在Nextjs中使⽤Link组件跳转。

外部打开的窗⼝target设置为 _blank ，rel设置为 nofollow noopener noreferrer

需要预先请求的资源设置rel为 prefetch ，⽐如⾸⻚⼤图等资源

下载的链接添加上download属性

404跳转⻚⾯

描述

设置404⻚⾯有助于提⾼⽤⼾体验和搜索引擎爬⾍的效率，同时保护⽆效链接的价值。

因此，为⽹站设置⼀个友好、有效的404⻚⾯对SEO是有益的。

实践

在Nextjs项⽬中添加⼀个not-found⽂件为404的⻚⾯，当访问⻚⾯不存在时将转向404⻚⾯

当访问资源不存在时，使⽤notFound函数，转向404⻚⾯

性能优化

图⽚优化

描述

名称	描述
⽂件名	使⽤描述性好的⽂件名，包含相关关键词，避免使⽤⽆意义的⽂件名
图⽚格式	选择适当的图⽚格式。在⽹⻚中全部使⽤webp，他具有以下优点： 1. 更⼩的⽂件⼤⼩和更⾼的压缩率 2. ⽀持透明图、动态图 3. 现代浏览器⽀持
图⽚质量&⽂件⼤⼩	保证质量良好的情况下，尽可能压缩图⽚⼤⼩，提升加载速度。图片压缩推荐TinyPng
标题和ALT属性	为图⽚添加描述性好的标题（title）和ALT属性，这有助于搜索引擎理解图⽚内容，同时提⾼⽹⻚的可访问性。在Nextjs中的Image属性，Alt为必填项。
响应式图⽚	使⽤srcset属性为不同设备提供适当⼤⼩的图⽚，以提⾼移动设备的加载速度。

实践

屏幕适配，srcset设置 a. 配置设置deviceSizes和imageSizes的尺⼨ b. Image设置sizes（简单粗暴设置100vw全部展示，srcset会⾛上⾯的设置的尺⼨）。如果你想控制内容的展示，否则不需要过多的设置。

懒加载（默认开启懒加载）

图⽚组件配合imageLoader转换cdn地址，配合传⼊的宽度，动态设置srcset

图⽚转换，静态资源图⽚统⼀转换为webp格式，并且转换的时候需要压缩

设置图⽚尺⼨，否则影响性能cls偏移指标

图⽚在加载过程中可能会导致⻚⾯内容的重新布局，从⽽影响到 CLS 指标。

背景图⽚

只有项⽬中的图⽚，可以借助第三⽅plaiceholder仓库实现背景
动态的图⽚：外⾯放⼀个div来设置背景，搭配css实现
⾸⻚需要优先显⽰的地址需要设置priority来preload
可以配合loader来使用cdn的地址

设置默认图⽚占位

可以使⽤的css实现，通过使⽤背景图⽚和默认背景占位实现，并且提供参数控制是否显⽰占位。

缓存和CDN

合理的利⽤缓存可以提交⽹站的访问速度，利⽤cdn进⾏内容分发可以节省源机器的⽹络流量，访问边缘节点提升访问速度。

缓存

描述

Nextjs框架是有对应的缓存策略，⽐如内容缓存、请求缓存、缓存失效等

参考地址Nextjs Cache

实践

名称	实践细节
内容缓存	默认缓存，当你访问访问过的url，下⼀次Nextjs将返回缓存的内容
请求缓存	默认请求会缓存并且不会过期，当你在服务端请求接⼝两次，将返回缓存的内容注意：需要使⽤Nextjs的fetch请求函数缓存
缓存失效	1. 浏览器端缓存失效 a. chrome浏览器disable cache请求 i. 实际上是传⼊了cache control为no-cache触发不使⽤缓存 2. 代码控制缓存失效 a. 重新构建 b. revalidatePath c. revalidateTag d. Fetch revalidate字段设置失效时间（官⽹策略）

CDN

CDN部分主要图⽚cdn资源传输和其他的cdn资源，⽐如附件、css的等等

索引

规范化

描述

当同⼀⻚⾯有多个版本时，Google 会选择⼀个版本存储在其索引中。这⼀过程称为规范化，被选为规范的 URL 将是 Google 在搜索结果中显⽰的 URL.

实践

在每个⻚⾯中添加metaData的alternates-canonical字段，指向⼀个地址

收录索引

描述

抓取⻚⾯后，⻚⾯将被渲染然后可能被⾕歌收录。被搜索引擎蜘蛛爬取不等于被收录。⽽⻚⾯被收录以后才能在⽤⼾搜索结果⾥⾯展⽰出来。

实践

⽹站抓取

设置sitemap

设置robots.txt

在Google Search Console中配合设置验证⽂件

⻚⾯设置

索引⻚⾯且追踪⻚⾯的a链接 <meta name="robots" content="index, follow">

不索引 <meta name="robots" content="noindex">

不追踪 <meta name="robots" content ="nofollow">

不索引不追踪 <meta name="robots" content="noindex, nofollow">

对链接和外部链接，对部分⻚⾯屏蔽索引还需要a标签的rel属性配合

Sitemap

描述

Sitemap 是⼀个包含⽹站所有⻚⾯ URL 的⽂件，⽤于帮助搜索引擎更有效地发现和索引⽹站内容。

优点	描述
指导搜索引擎爬⾍	Sitemap 提供了⽹站的结构和重要⻚⾯的信息，帮助搜索引擎爬⾍更快地了解⽹站内容，并发现新的⻚⾯。
提⾼⽹站索引速度	搜索引擎可以更快地索引⽹站内容，使⽹站在搜索结果中更快地显⽰。
优化⽹站结构	通过创建 Sitemap，⽹站管理员可以更好地了解⽹站的结构和⻚⾯分布，有助于优化⽹站的结构和内部链接。
识别问题⻚⾯	Sitemap 可以帮助⽹站管理员识别问题⻚⾯，例如重复内容、404 ⻚⾯等，从⽽及时进⾏修复和优化。

实践

在Nextjs中创建sitemap.ts⽂件，按照格式返回即可。

robots.txt

描述

⽤于告诉搜索引擎爬⾍哪些⻚⾯可以访问，哪些⻚⾯不应该访问。

实践

在⽂件app⽬录中添加robots.txt⽂件即可，填写适当的内容。规范参考

Link prev & next

描述

链接：使⽤ rel="next" 和 rel="prev" 设置分⻚

您现在可以使⽤ HTML link 元素 rel="next" 和 rel="prev" 来指⽰分⻚系列中各组成⽹址之间的关系。

实践

在metaData返回的时候，根据分⻚的上下页关系，返回上⼀⻚和下⼀⻚的link即可。参考链接：https://github.com/vercel/next.js/discussions/52923

SEO的三元素 TDK

描述

SEO 的三元素 TDK 分别是 Title、Description 和 Keywords，它们是⽹⻚在搜索引擎中的重要元素，对⽹⻚的排名和点击率都有很⼤的影响。

名称	描述
Title（标题）	Title 是⽹⻚的标题，显⽰在浏览器标签栏上，也是搜索结果中显⽰的标题。⼀个好的 Title 应该包含关键词，描述清楚⻚⾯内容，并吸引⽤⼾点击。
Description（描述）	Description 是⽹⻚的描述，显⽰在搜索结果中的摘要部分。⼀个好的 Description 应该简洁明了地描述⻚⾯内容，吸引⽤⼾点击。
Keywords（关键词）	Keywords 是⽹⻚的关键词，⽤于描述⻚⾯内容的关键字。虽然搜索引擎不再重视 Keywords 标签，但它仍然可以帮助搜索引擎了解⻚⾯的主题。

实践

1. 在Nextjs中每个⻚⾯可以设置metadata静态数据，或者通过generateMetadata动态⽣成数据

注意事项

这部分不应该使用浏览器的Element查看，因为可能有JavaScript会修改到这部分的内容，而是应该直接使用查看网页源码的方式直接查看，并且搭配搜索关键词快速定位。。

Core Web Vital

描述

Core Web Vitals（核⼼ Web 体验指标）是⼀组⽤于衡量⽹站⽤⼾体验的关键指标，它们反映了⽤⼾在浏览⽹站时所体验到的⻚⾯加载速度、⻚⾯交互性和⻚⾯视觉稳定性等⽅⾯的感受。

Google 将 Core Web Vitals 视为评估⽹站⽤⼾体验的重要指标之⼀，并将其纳⼊搜索排名算法中。

名称	描述
Largest Contentful Paint (LCP)	最⼤内容渲染时间，衡量从⽤⼾观点来看⻚⾯的加载速度。它测量的是从⻚⾯开始加载到最⼤的主要内容元素（例如⽂本、图像、视频等）完全呈现在⽤⼾视野中的时间。
First Input Delay (FID)	⾸次输⼊延迟，衡量⻚⾯的交互性。它测量的是⽤⼾⾸次与⻚⾯交互（例如点击链接、按钮等）到浏览器实际响应该交互的时间。
Cumulative Layout Shift (CLS)	累积布局偏移，衡量⻚⾯的视觉稳定性。它测量的是⻚⾯上元素在加载过程中发⽣的意外移动的总和，⽤⼾体验较差的⻚⾯通常会有较⾼的 CLS 值。

实践

简单的主旨：尽量少的加载必要的资源，加快访问速度，并且图片设置尺寸，减少偏移跳动。

LCP&FID

主要是减少最⼤内容渲染时间、降低⻚⾯渲染到交互的延时。其实就是最⼩原则，只加载当前⻚⾯的需要的，并且nextjs会默认做tree shaking优化

⽂件资源使⽤cdn加速

资源动态加载或懒加载 a. ⽐如轮播图等复杂js计算，当滚动到视⼝的时候再执⾏逻辑或懒加载

可以搭配Web Worker等处理地⽅的资源（本次未做，需要 page router）

CLS

1. 加载图⽚固定尺⼨的元素时，为其指定固定的尺⼨

LightHouse跑分优化

以下包含了⼀些处理遇到的问题的细节，包括跑分的具体细节，很多情况下遵循上⽂的实践已经可以提⾼跑分，其他为遇到问题再通过修改为最佳实践，逐步解决问题。

问题	相关方案和解决办法
A link without description text a标签⾥⾯就是别的元素，缺乏⾯熟⽂本，对屏幕阅读器不友好。⽐如单纯的See More按钮等，⽆法通过⽆障碍检查 https://developer.chrom e.com/docs/lighthouse/ seo/link-text?hl=zh-cn	可以设置⼀点有意义的隐藏⽂本来辅助⽆障碍阅读 .a11y-visually-hidden { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0 0 0 0); -webkit-clip-path: inset(100%); clip-path: inset(100%); white-space: nowrap; }
标签的包含关系	总体的关系：块级可以包含任何标签，但是⾏内不能包含块级 a标签不能包含块级，需要将⽂本或者图⽚转换为具体的⾏内元素进⾏包装
点击的图标的描述⽂本	如果直接是⼀些可以点击的图标，没有描述⽂本，lighthouse会出现Accessibility的警告，可以设置aria-label属性来规避
⽂本前景对⽐	有的⽂本颜⾊和背景⾊的颜⾊对⽐不强，会触发Accessibility的报错。如此情况需要交互同学配合修改对应的颜⾊

其他问题和注意事项处理

问题	相关方案和解决办法
⻚⾯过渡占位展⽰	可以添加⼀个loading.tsx⽂件来展⽰此⽅式有问题，如果在⾥⾯的逻辑判断使⽤了重定向和NotFound，将不会返回正确的状态码，⽽是统⼀返回200。
⻚⾯跳转默认会滚动到之前的滚动的位置	判断是不是浏览器环境，⼿动设置window.history.scrollRestoration，让每次的⻚⾯跳转都是滚动到顶部
Clientcomponent&Servercomponnet	注意他们的区别，注意官⽹的⽂档说明

辅助工具

除了上述提到的一些知识点，我们还需要正确的评估我们的SEO结果和网站的响应速度等等。在此，我就简单列举出一些工具，帮助我们的工作。

https://pagespeed.web.dev/ PageSpeed可以帮你定位网站问题，并且给出相应的建议，但是需要的必须是上线的公网可以访问的网站。

LightHouse LightHouse是一个浏览器工具，功能和PageSpeed一样，只是它除了可以检查线上的网站，并且支持在本地开发阶段进行问题评估。

Responsive Viewer 一次显示多个屏幕，响应式设计的扩展。这个扩展可帮助前端开发人员在开发响应式网站或者应用程序时测试多个屏幕。

WebPagetest 一款类似于Google PageSpeed的工具，不过他的评估规则更为细腻，并且支持的设备为度更加细节。我也用这个跑了一次我的博客，可以进入这个结果页链接参考一下。

结语

网站的SEO优化是一个持续的过程，是需要不断优化、调整、打磨的工作。

一个简单的比喻，你考试想六十分及格，可能你加把劲，努努力，就可以实现目标。但是如果你想考试考一百分，这就需要持之以恒的不懈努力。

所以，真正的实践，其实是不断的修正完善，这样才能将一件事做好。