link 标签
对于<link rel="alternate"> 和 hreflang，搜索引擎会识别出不同语言版本的页面，并在适当的时候向用户提供相应语言的搜索结果，提升用户体验。
示例：
rel="canonical": 你告诉搜索引擎哪个URL是该页面的首选版本，即使其他URL也可能访问到相同的内容。rel="alternate"：这个属性告诉浏览器，链接指向的资源是当前页面的一个替代版本。href="https://www.apple.com/"：这是替代版本的URL，这里是苹果公司网站的英文（美国）版本。hreflang="en-US"：hreflang属性指定了替代版本的语言和地域。在这里，en代表英语（English），US代表美国（United States），所以这个链接指向的是英文美国版本的页面。
总的来说，这段代码的作用是告诉搜索引擎和其他工具，当前页面还有一个英文（美国）版本，位于https://www.apple.com/。这对于多语言网站的SEO（搜索引擎优化）和用户体验是有帮助的，因为它允许用户和搜索引擎更容易找到不同语言的内容。
title
增加浏览器tab,和搜索引擎标题
示例：
<title>Apple (United Arab Emirates)</title>
Meta标签
viewport
是一个非常重要的HTML标签，主要用于控制网页在移动设备上的显示方式。这个标签告诉浏览器应该如何调整页面的宽度和缩放，以适应不同的设备屏幕尺寸。
示例：
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="viewport"> 中各项属性的解释：
- width=device-width 这个属性设置视口的宽度等于设备的物理宽度。这样，网页的内容会自动填充整个屏幕宽度，无论设备的分辨率是多少。
- initial-scale=1 初始缩放比例设定为1，意味着页面加载时默认不进行缩放，保持1:1的比例。这确保用户打开页面时能看到完整的网页布局，无需手动缩放。
- viewport-fit=cover 这是一个相对较新的属性，用于控制网页内容是否应覆盖整个可视区域。当设置为
cover时，网页内容会尽可能填满整个屏幕，同时保持内容的纵横比，防止内容被裁剪或拉伸。这在设计响应式网页时特别有用，可以确保页面在各种设备上都有良好的视觉效果。
综上所述，这段代码确保了网页在移动设备上有一个良好的响应式体验，页面会自适应设备宽度，初始状态不缩放，并且内容能完全覆盖屏幕，提供最佳的视觉效果。这对于现代移动优先的设计策略至关重要。
analytics-track
用来追踪网站分析的
示例：
是用来追踪网站分析的，但请注意，这不是标准的HTML或通用的Web Analytics标记。它可能是某个特定分析工具或者框架（例如Google Analytics、Adobe Analytics或其他自定义实现）所使用的非标准元数据。
Google Analytics 工具
创建账号地址：
tagmanager.google.com/?hl=zh-cn&p…
Description
告诉搜索引擎你的网站主要内容
示例：
<meta name="Description" content="Entdecke die innovative Welt von Apple, kaufe iPhone, iPad und Mac und finde Zubehör, Entertainment und Gerätesupport.">
og:image og:title
OG在社交媒体上具有丰富的内容展示，比如分享一个网址链接在社交平台后，这个链接会显示缩略图、标题和描述等，增加访客点进来的概率，左图加了OG标签，右图没有。
图示：
内链和外链
内链
在自己的网站当中通过链接的方式在各个内容页面之间相互链接，从而提高爬虫以及一些搜索引擎对于网站的爬行索引效率；另外，为了避免内链起到反作用，在进行网站待更新的时候，一定要注意定期清理死链和断链，方便爬虫可以顺着链接进行收录爬行，达到更好的收录效果。
外链
通过在其他一些高流量的网站放置自己的链接，相较于内链的内部操作，外链可以达到网络之间的信息分享，不再让我们的网站内容形成孤立，可以很快的增加网站的浏览数量，提升搜索排名，这对一个刚刚建立起来的新站来说，外链的数量基本上可以成为这个网站快速提升流量的关键所在，不过对于后期优化，外链的发布一定要以质量为主，数量为辅。
nofollow
示例：
- 作用： 超链接a标签中的一个属性（还有meta标签），意思是不向这个页面导出权重，也就是说，加上了nofollow标签的链接，目的是告诉搜索引擎不要跟踪加这个链接，不要传递链接权重，不要在搜索算法中计算这个链接。通过设置nofollow标签，我们可以控制网站权重的流动（也就是说常说的“集中权重”），避免链接指向垃圾页面，这样就可以让网站主要的页面能够更快的获得关键词排名了。有的公司在导航上有在线留言，这个就可以加上，因为这个是没有用的，属于垃圾页面，页面会向这个页面导出权重，权重就分散了，另外还有类似广告链接等无意义的页面
- nofollow 和 external nofollow: 从字面上意思来看，external是“外部的”，nofollow是“不要追踪”，综合来看extenal nofollow 则表示“外部的不要追踪”，这两根本就是同一个意思，external nofollow 只是nofollow比较规范的书写而已。
示例：
<a href="login.html" rel="nofollow">登录</a>
<a href="login.html" rel="external nofollow">登录</a>
语义化标签
H系列标签
从H1到H6（重要性从高到低）一共有6个，而且在页面中的作用性极高，所以不能乱用，得根据内容的重要性进行排列，最后不要有断层，比如从H1直接到H3，错过了H2；另外，H1标签最好只存在一个，更多细节可以网上搜下。
img标签
img的alt属性，为搜索引擎提供替代文本，图片使用alt标签优化，对搜索引擎排名产生积极影响；另外，网速不佳等原因造成无法加载图片文件时，将在图片的位置显示alt里的文字
其他
还有HTML5新出的 Header, Nav，Aside，Article，Footer等语义化标签，这些都能帮助爬虫更好的获取页面内容
数据结构化标记
体现 E-A‑T
E‑A-T 意思 是专业（Expertise）, 权威（Authoritativeness）和可信（Trustworthiness）的缩写， E-A-T是谷歌算法的一部分，并被写入谷歌搜索质量评估指南中。
“E-A-T”是搜索引擎优化（SEO）领域中的一个概念，代表“Expertise”（专业知识）、“Authoritativeness”（权威性）和“Trustworthiness”（可信度）。这三个因素对于创建高质量内容和提高网站在搜索引擎结果页（SERP）中的排名至关重要。以下是E-A-T的详细作用：
- Expertise (专业知识) ：这意味着内容应该由具有相关领域知识的作者撰写。例如，医疗信息应由医生或医疗专家编写，法律建议应来自律师。专业知识表明内容是基于深入理解和实践的，而不是简单的猜测或误导。
- Authoritativeness (权威性) ：权威性涉及到内容和网站在整个行业内的认可程度。这可以通过引用权威来源、获得其他知名网站的链接、在社交媒体上的讨论以及在专业组织中的成员资格等方式体现。权威性高的网站通常被认为是其领域的领导者。
- Trustworthiness (可信度) ：可信度关乎用户对网站和内容的信任。这包括提供准确无误的信息，保护用户隐私，避免虚假广告，以及拥有清晰的联系方式和透明的业务实践。一个值得信赖的网站会让用户感到安心，他们知道在这里获取的信息是可靠的。
谷歌和其他搜索引擎在评估网页质量时，越来越重视E-A-T原则。如果一个网站能够展示出强大的E-A-T特征，那么它更有可能在搜索结果中获得更高的排名，从而吸引更多的有机流量。因此，对于任何希望提升在线可见性和影响力的网站来说，遵循E-A-T原则都是至关重要的。
- 放在页面的底部footer内
结构化数据有三种形式：JSON-LD，Microdata和RDFa。
示例：
这段代码可以放在<head> 或 <body> HTML 部分的任意位置，更多的JSON-LD款式可以参考 Google官方
服务端渲染（SSR）
爬虫只会爬取源码，不会执行网站的Js脚本,使用了Vue或者React之类的框架后，页面大多数DOM元素都是在客户端根据js动态生成，可供爬虫抓取分析的内容大大减少。另外，浏览器爬虫不会等待我们的数据完成之后再去抓取我们的页面数据。服务端渲染返回给客户端的是已经获取了异步数据并执行Js脚本的最终HTML，网络爬中就可以抓取到完整页面的信息，所以就要用到SSR渲染了。
如果是项目开始的时候，就知道要做SEO，建议使用比较成熟的SSR框架
如果是项目已经成形或者只想优化部分页面，建议使用一些插件来实现，比如 prerender-spa-plugin、vue-server-renderer ( 适用于Vue )
Tips： 爬虫不会抓取iFrame里的内容，所以尽量避免使用
https
Google和其他搜索引擎已经明确表示，他们更喜欢使用HTTPS，因为它提供更高的安全性和更好的用户体验。当您的网站使用HTTPS时，搜索引擎会将其视为更可信和更安全的网站，从而为其排名增加积极因素。
网站访问数据
后期维护需要一定的网站访问数据做分析，比如流量来源，页面点击，地域分布等，不同的搜索引擎都有自己的一套分析工具，我们只要按照官网的教程，把埋点的代码嵌入到项目即可。
网站地址
- 和产品关键词或者公司名字高度相关的域名，能够有效提升网站的SEO排名。
- 各个页面的路径地址尽量不要过长，以及不能出现中文，否则会影响收录。
- 由于网站改版或者其他因素，可能会出现部分链接地址生效，这时候可以进行301重定向到新的页面，尽量避免出现过多的死链（404页面），如果死链太多，搜索引擎可能认为网站不可靠，从而影响网站的排名和流量。
- 下面两个链接都是百度页面，像这种有多个URL为相同页面的情况，就是网址规范化问题。 无论是对搜索引擎还是网站来说，多个URL为相同页面，浪费了抓取资源，而且如果多个网址内容相同时或者高度相同，可能会认为网站重复页面过多一类的因素导致影响收录甚至降权。 在一个页面有多个URL时，还会对页面找出权重分散，降低了页面排名能力，网站无意义收录等问题 当页面出现URL规范问题，搜索引擎也会自动判断并选择一个认为是规范的页面进行索引。
解决方案： 可通过在每个非规范版本的 HTML 网页的 <head> 部分中，添加一个 rel="canonical" 链接来进行指定规范网址。
示例：
<!-- href填写要作为标准的网址 -->
<link rel="canonical" href="http://baidu.com">
附赠
- 检测Title Tag & Meta Description优化
- 站点地图生成
- Web Developer , 一个Chrome插件，集成了各种各样的 Web 开发工具，比如可以使用下图红框里的选项（图1），查看网页的Title，Meta，H标签等（图2，3）。
图 （1）
- Web Developer：可禁用网页cookie,网页图片，网页js，查看网页的Title，Meta，H标签等
图 （2）
图 （3）
功能的实现：
原文链接：https://juejin.cn/post/7351399718905659419 作者：想早点下班的小猫咪
