前端专栏作者水煮白菜王分享网站SEO核心TDK及开发技巧知识
文章专栏，即前端专栏，旨在记录博主在博客写作过程中，所总结的各类开发技巧及知识要点。
感谢支持
SEO 是搜索引擎优化这一术语的简称，它涉及对网站内容、架构以及外部链接等要素的优化策略，旨在提升网站在搜索引擎自然搜索结果中的位置，进而吸引更多访问流量，实现互联网营销和品牌塑造的双重目标。
[]
TDK 代表（标题）、（描述）以及（关键词），它是网站搜索引擎优化（SEO）至关重要的组成部分。尽管因为过度使用等因素，众多主流搜索引擎已经减少甚至取消了其对搜索结果排名的作用，然而（标题）和（描述）依旧构成了SEO中不可替代的要素。TDK的配置方式如下：
<title>[id_1166120049]title> <[id_1594411499] name="description" content="这里是描述"> <meta name="keywords" content="这里是关键词">
当然，这三者都有特定的要求，例如字符数和长度的限制。有兴趣深入了解的朋友可以自行查阅相关资料。接下来，我将为大家展示一些主流网站的TDK示例。
2、Meta 标签的使用
Meta标签位于网页的头部区域，主要扮演辅助角色，通过设定一系列参数来阐述页面的特性。目前，绝大多数搜索引擎都通过网络爬虫自动检索这些Meta标签的值，以此对网页进行分类。Meta标签的name属性包含了多种配置选项：
3、HTML 语义化
开发过程中，我们常常习惯性地全面采用div和span标签，然而这种做法实际上对搜索引擎优化（SEO）并不利。因此，我们应当逐步培养使用具有语义性的标签。HTML的语义化对SEO有益，它有助于搜索引擎更好地把握页面内容的结构和主题。以下将介绍一些常用语义化标签的应用方法及注意事项：
在网页设计中，应确保每个页面仅包含一个h1标签，而其他如h2、h3、h4、h5和h6等标签则应根据内容的层级和需求灵活运用。
强调标签的作用主要体现在两个方面，一是通过加粗或斜体来突出强调内容，从而提升其重要性；二是通过增强视觉效果，使内容更加醒目。
在为图片添加标签时，应加入alt属性，此举有助于搜索引擎蜘蛛迅速捕捉并准确解读图片的详细信息。
[]
列表标签如ul、ol、li等，有助于搜索引擎更深入地解析信息的层级与关联，进而更精确地评估网页的内容及其重要性。
页面设计时，需根据不同区域模块的特点，挑选恰当的布局标签，例如nav等，以确保页面布局的合理性和功能性。
4、OG(Open ) 协议
Open协议使得任何网页都能融入社交图谱。若你的网页已嵌入Open协议，并据此添加了标题、描述和图片等资料，那么在社交平台分享此网页时，它将按照你设定的内容进行展示。
该协议实质上相当简便，它主要通过在HTML文档中嵌入特定的元数据（meta）标记来达成目的，这些标记的属性均以前缀“og”开头，紧随其后的是具体的属性名称，而属性值则包含在其中。以下是一个示例：
<html prefix="og: http://ogp.me/ns#"> <head> <title>The Rock (1996)title> <meta property="og:title" content="The Rock" /> <meta property="og:type" content="video.movie" /> <meta property="og:url" content="该网页链接指向的是一部电影的详细信息页面，该电影在IMDb上的编号为tt0117500。" /> <meta property="og:image" content="请勿访问该链接，图片内容涉及违规信息。" /> ... head> ... html>
总体而言，该协议的核心是提出，旨在更有效地呈现用户所分享网页的具体内容。通过实施这一协议，可以促进搜索引擎优化，并向用户揭示网页的具体信息，包括其内容以及相关关键词等。
5、HTML lang
在HTML标签中设定lang属性的主要目的是为了指明网页内容的语言种类。这一做法对搜索引擎优化（SEO）极为有利，因为它有助于搜索引擎识别页面内容的语言，进而能够更精确地向搜索特定语言内容的用户展示页面。
在国际化的项目中，设定 lang 属性显得尤为重要，因为这样搜索引擎便能精确地将页面内容呈现给那些寻求特定语言内容的用户。
在 Vue3 的项目中配置 lang 属性，并在页面语言切换时进行相应的更新，相关代码如下：
/** * 多语言映射 */
二、优化手段 1、服务端渲染
爬虫只能获取网页的静态源代码，无法运行其中的 脚本。对于使用 Vue 框架构建的单页面应用，其页面上的多数 DOM 元素实际上是在客户端动态构建的。
客户端渲染的执行需要一定的时间，而爬虫并不会等待这个过程完成，所以它能够直接抓取和解析的数据量会显著降低。接下来，我们可以对比一下客户端渲染与服务器端渲染在网页源代码上的差异：
客户端渲染的网页源代码：
服务端渲染的网页源代码：
观察这两幅图像，我们可以清晰地发现，服务端渲染的源代码中，body部分包含了大量的标签，这主要是因为在服务端阶段，已经构建出了相对完整的HTML代码。
若网站实施服务端渲染技术，在蜘蛛爬取其源代码的过程中，便能抓取到更丰富的信息，这对搜索引擎优化（SEO）大有裨益。目前，众多官方网站项目已开始运用 Vue 和 Nuxt 进行开发，服务端渲染（SSR）技术正逐渐成为一种流行趋势。
2、 文件
当蜘蛛访问某个网站时，它将首先确认该网站的根目录中是否存在一个名为 .txt 的纯文本文件，该文件旨在明确界定您网站上的爬取范围，即掘金工具所依赖的配置文件。
.txt文件内含键值对结构：User-部分用于标明搜索引擎爬虫的名称；另一部分则用来指定那些不希望被访问的网页、目录或整个网站，具体应用方式如下：
*网站目录下所有文件均能被所有搜索引擎蜘蛛访问* User-agent: * Disallow: *禁止所有搜索引擎蜘蛛访问网站的任何部分* User-agent: * Disallow: / *禁止所有的搜索引擎蜘蛛访问网站的几个目录* User-agent: * Disallow: /haha/ *只允许某个搜索引擎蜘蛛访问* User-agent: Googlebot Disallow:
该文档内同样支持设置属性，此属性旨在为网站提供其URL地址，以便搜索引擎的爬虫能够更高效地探测和收录这些网页。
User-Agent: * Disallow: /private/ Sitemap: https://xxxx.com/sitemap.xml
在项目实施过程中，我们只需将.txt文件上传至网站的主目录，务必确保文件名全部采用小写字母，随后便可通过域名后缀/.txt来进行文件访问。
3、内链和外链
在搜索引擎优化这一领域，人们普遍认为“内部链接至高无上、外部链接尊贵无比”，这两种链接对于提高网站在搜索引擎中的排名都大有裨益，尤其是外部链接的构建方面。
内链，即网站内页面间的相互链接，它能够将一个页面引导至另一个页面，以此构建起网站内部的网络结构。这种结构有助于拓宽和加深搜索引擎蜘蛛的爬行范围。
将链接引入至其他网站，以此增加自身网站的权重，促进流量增长，然而在操作过程中，务必重视外链的品质，因为劣质的外链可能会对本网站的排名产生负面影响。
在处理内链和外链的添加时，务必关注到a标签中的rel属性（该属性用于定义当前页面与目标页面之间的关联），接下来，我们将探讨rel属性中"下"和"上"两个不同取值的实际应用。
<a rel="nofollow" href="http://www.baidu.com/">baidu</a> <a rel="external" href="http://www.baidu.com/">baidu</a>
搜索引擎将收到指示，要求其忽略此链接，并阻止其追踪该页面，以此防止页面权重被分散。
：会告诉搜索引擎这是一个外部链接，非本站的链接
4、 站点地图
即站点地图，这是包含网站所有URL的列表，其主要功能是为搜索引擎提供网站相关信息，助力搜索引擎更高效地收录网站内容，进而提升网站在搜索结果中的位置。为确保链接的完整性及精确度，站点地图应定期自动更新。
[]
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns=请访问"http://www.sitemaps.org/schemas/sitemap/0.9"以获取有关网站地图的详细规范。> <url> <loc>https://www.example.com/</loc> <lastmod>2023-04-26T18:23:17+00:00</lastmod> <changefreq>daily</changefreq> <priority>1.0</priority> </url> <url> <loc>https://www.example.com/about</loc> <lastmod>2023-04-25T10:12:14+00:00</lastmod> <changefreq>monthly</changefreq> <priority>0.8</priority> </url> </urlset>
在本例中，每一个URL标识符对应着网站上的一个独立页面；该标识符所包含的内容中，有页面的网址信息，有页面的最新修订日期，有页面的更新速率，还有页面的重要程度。
文件一般存放于网站的主目录之中，网站管理者有权在各大搜索引擎的特定平台提交 .xml 格式的文件，此举有助于搜索引擎更高效地抓取和整理网站信息，例如：/.xml，案例：
搜索引擎通过运用网络爬虫技术来搜集网站信息，爬虫在搜集过程中会优先访问网站的.xml文件，从中提取出网站所有页面的链接。搜索引擎会依据.xml文件所提供的数据来评估页面的更新速度和重要性等因素，从而确定何时对网站页面进行再次搜集，以此确保搜索结果的精确度和最新性。
5、网站重定向
301代码表明该网址已永久变更至新地址，而302代码则意味着这种转向是暂时的。
301重定向与网址规范化功能相近，除此之外，它还能实现域名的权重集中，例如，将url1重定向至url2，实际上是将url1的权重传递给了url2，进而提升了url2域名的权重。
尽管标签有助于对网址进行标准化，但在以下四种特定情形中，必须设置301重定向：
网站完成域名变更后，将原有域名指向新域名，以此方式补偿因域名变更导致的流量减少和搜索引擎优化影响。
若对网站中某些页面进行删减，尽管这些页面流量可观且权重较高，仍可通过301重定向将其引导至适宜的页面，以此防止流量损失。
若网站进行改版或是由于其他因素致使页面网址产生变动，为了防止形成无效链接，我们可以采用301重定向的方法来加以处理。
那么，我们如何确认301重定向是否已经成功实施呢？我们可以借助站长工具，具体是使用其中的HTTP状态查询功能，来检查返回的状态码是否显示为301。
在 Vue3 + 项目中实现 301 永久重定向：
return navigateTo(localePath(`xxxxxxx`), { redirectCode: 301, });
6、结构化数据
HTML通过结构化数据来标识信息，这有助于搜索引擎更好地解读网站内容，并促进更优质搜索结果的生成。搜索引擎能够识别页面上的具体信息，并掌握如何向用户展示这些信息。
在搜索结果中，若遇到“掘金”相关页面，页面中的红色边框区域便展示了结构化的标注成果，通过这些标注，我们可以更深入地把握网站信息；此外，这一区域面积较大，也有助于吸引访客的视线。
JSON-LD 是一种结构化数据的表达方式，其书写格式可参照以下示例代码，若需了解更多种类的 JSON-LD 结构，请参考 JSON-LD 相关资料。
<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "NewsArticle", "headline": "Title of a News Article", "image": [ 该图片的链接为"https://example.com/photos/1x1/photo.jpg"，请勿随意修改。, 该图片的链接为：https://example.com/photos/4x3/photo.jpg，请点击此链接查看。, 此链接指向一张图片，图片尺寸为16:9，具体位置在"https://example.com/photos/16x9/"目录下，文件名为"photo.jpg"。 ], "datePublished": "2015-02-05T08:00:00+08:00", "dateModified": "2015-02-05T09:20:00+08:00", "author": [{ "@type": "Person", "name": "Jane Doe", "url": 此链接指向Jane Doe 123的个人资料页面，位于"https://example.com/profile/"这一域名下。 },{ "@type": "Person", "name": "John Doe", "url": 该链接指向用户名为johndoe123的个人资料页面，可通过访问https://example.com/profile/johndoe123进行浏览。 }] } </script>
三、优化手段 1、网址规范化