前言
什么是SEO:SEO 是 Search Engine Optimization 的缩写,即搜索引擎优化。它是一种通过调整网站的内容、结构、外部链接等方面的优化手段,来提高网站在搜索引擎自然/免费搜索结果中的排名和可见度的过程
例如在站长工具:seo.chinaz.com/,中查看掘金的收录情况
![](https://photo.4305.net.cn/upload/image/20240612/6385377861274985621551435.png)
从图中可以看到掘金的收录数还是非常不错的 统计公报 或者在各搜索框内使用“site: 域名”的方式,例如:site:juejin.cn
获取收录数
![](https://photo.4305.net.cn/upload/image/20240612/6385377861287536424279913.png)
一、TDK
TDK是Title(标题)、Description(描述)和 Keywords(关键词)的缩写,是网站SEO的关键
1. title
Title:页面标题,是搜索引擎最重视的元素之一,它直接决定了页面在搜索结果中的标题显示
<title>标题</title>
注意点:
避免过于冗长
,大多数搜索引擎和浏览器中能完全显示的长度为 60-70 个字符,超出则会被截断
冗长的标题可能导致关键词密度降低,从而影响搜索引擎对网页内容的判断
2. description
description:页面描述,内容通常会被用作页面的摘要信息展示
<metaname="description"content="网站的描述">
注意点:
内容不宜过短
,作为摘要信息展示的时候如果一行都显示不全,不利于吸引用户点击
内容最好控制在160 个字符以内
3. keywords
keywords :页面关键词
因为滥用等原因,大多数主流搜索引擎已经大幅降低了 keywords 元标签对网页排名的影响
<metaname="Keywords"content="网站的关键词">
注意点:
不同页面的关键词应该尽量不重复
,避免关键词相互竞争
关键词的数量应控制在4-8 个,过多可能会被搜索引擎认为是关键词堆砌,影响SEO效果
提示:对于不同页面,可设置不同的TDK,来增加关键词的收录量
二、OG 协议
Open Graph 协议是由 Facebook 提出的一种元数据标准,它允许页面成为丰富的社交对象。通过在网页中添加特定的 Open Graph 协议,可以帮助提供更丰富的预览信息。
常见的 Open Graph 标签包括:
<metaproperty="og:title"content="页面标题"><metaproperty="og:description"content="页面描述"><metaproperty="og:image"content="图片URL"><metaproperty="og:url"content="页面URL"><metaproperty="og:type"content="网页类型,如website,article"><metaproperty="og:release_date"content="定义网页内容的发布时间">
例如在bing搜索掘金,看到掘金的最新相关信息
![](https://photo.4305.net.cn/upload/image/20240612/6385377861305017076223545.png)
点开第一条搜狐的,看title头部,发现使用的og协议如下
<metaproperty="og:type"content="news"><metaproperty="og:image"content="https://q3.itc.cn/q_70/images03/20240322/1d853e1d019a4739b5f882e5e44699f3.png"><metaproperty="og:url"content="www.sohu.com/a/766002411_343291"><metaproperty="og:release_date"content="2024-03-2211:32"><metaproperty="og:description"content="这场比赛尼古拉-约基奇再度展现何谓全面,巅峰连庄MVP是真的厉害,锡伯杜已经制订了三人轮番消耗约基奇的策略依旧没用,约老师还是能带动队友。波特开场是3中3拿8分,半场是6中6+三分1中1拿15分4篮板;贾马…"><metaproperty="og:title"content="狂轰84+28+23:掘金三巨合力取连胜约基奇127次三双冲西部第一_篮板_助攻_波特">
其中og:image的图片链接,就是截图中右侧的图片
三、HTML 语义化
HTML语义化主要作用有以下几点:
方便其他设备进行解析,例如盲人阅读器
有利于SEO,搜索引擎更容易理解语义化页面的内容结构和主题
便于团队开发和维护,语义化更具有可读性
1. 标题标签
HTML 中共有 6 种 h 标签,分别是h1、h2、h3、h4、h5 和 h6
。这些标签表示文字的大小和重要性,h1 最大最重要,h6 最小最次要。
相比其他标签,h 标签在页面中的权重非常高,所以使用时要注意不要滥用。
例如,h1 通常用来写网页的主标题,应该与网页 title 标签的内容保持一致,并在页面中展示。每个页面最好只有一个 h1 标签。h2 可用来写次级标题,h3-h6 依次用于更细分的标题
2. 强调标签
strong
:标签一方面是强调,增加了权重;另一方面也能字体加粗,增强视觉效果
em
:标签一方面是强调,增加了权重;另一方面也能字体变为斜体,增强视觉效果
强调标签权重虽比h标签低,但也比其他标签权重高
3. 超链接标签
1. a 标签分为“内链”和“外链”
内链:从自己网站的一个页面指向另外一个页面。通过内链让网站内部形成网状结构,让蜘蛛的广度和深度达到最大化
外链:在别的网站导入自己网站的链接。通过外链提升网站权重,提高网站流量。
2. a 标签的两个属性
带有rel=nofollow 属性的链接会告诉搜索引擎忽略这个链接。阻止搜索引擎对该页面进行追踪。从而避免权重分散
js复制代码<arel="nofollow"href="http://www.baidu.com/">百度</a>
external字面意思是“外部的”,a 标签加上这个属性代表这个链接是外部链接,非本站链接,点击时会在新窗口中打开,它和target="_blank"效果一样。external 可以告诉搜索引擎这是一个外部链接,非本站的链接
js复制代码<arel="external"href="http://www.baidu.com/">百度</a>
4. 图片标签
: 图像标签的 alt 属性有助于图像 SEO,并在网络故障时,代替图片显示
5. 段落标签
p 标签虽然权重较低,但作为页面基础内容结构很重要。页面中用长文字描述的内容,都可以使用p标签代替原先的div标签
6. 列表标签
ul:标签表示无序列表
ol:标签表示有序列表
li:标签表示列表的一项
搜索引擎能够通过这些标签更好地理解信息的层次结构和关联性,从而更准确地评估网页的内容和价值
7. 布局标签
![](https://photo.4305.net.cn/upload/image/20240612/6385377861310780242209453.png)
header:定义页眉,通常包含网站标志、主导航、搜索框等
nav:定义导航
article:定义独立的、完整的内容块,如博客文章、新闻报道等
section:定义页面上的独立的、有语义的内容块,如章节
aside:定义侧边栏
footer:定义页脚,通常包含版权信息、联系方式、备案信息等
四、sitemap 站点地图
sitemap 站点地图一般是xml格式的文件,用于帮助搜索引擎更好地发现和抓取网站上的所有页面,并提供页面优先级和更新频率的信息,帮助搜索引擎更好地分配抓取资源
sitemap.xml 内容格式如下:
js复制代码<urlsetxmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://acme.com</loc><lastmod>2023-04-06T15:02:24.021Z</lastmod>
<changefreq>yearly</changefreq>
<priority>1</priority>
</url>
<url>
<loc>https://acme.com/about</loc><lastmod>2023-04-06T15:02:24.021Z</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
</urlset>
loc:页面地址
lastmod:内容最后修改时间
changefreq:预计更新频率
priority:页面相对于其他页面优先级,它的值范围是0.0到1.0,其中1.0表示最高优先级
sitemap.xml 一般放在网站的根目录下,可以通过“域名+/sitemap.xml”的形式直接访问到。但每个 sitemap文件最多包含 50,000 个 URL 标签,如果网站页面超过 50,000 个,则应该将 Sitemap 文件拆分成多个。
例如在根目录下新建sitemap.xml,并新建sitemap文件夹用于统一管理页面的站点地图信息
js复制代码//sitemap.xml<sitemapindexxmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<sitemap>
<loc>https://example.com/sitemap/sitemap1.xml</loc><lastmod>2023-04-01</lastmod>
</sitemap>
<sitemap>
<loc>https://example.com/sitemap/sitemap2.xml</loc><lastmod>2023-04-15</lastmod>
</sitemap></sitemapindex>
<sitemapindex>
: 用于包含多个 sitemap文件的索引。
如果sitemap.xml没有放在根目录,即不能通过“域名+/sitemap.xml”的形式直接访问到,需在 robots.txt 中指明Sitemap位置,否则搜索引擎可能无法找到
五、 robots 文件
robots.txt 文件是一个网站用来告诉搜索引擎机器人(又称爬虫或蜘蛛)应该如何抓取和索引该网站的一种标准
robots.txt 文件需放置在网站的根目录下,以“域名+/robots.txt”的形式直接访问到
js复制代码User-Agent:*Disallow:/private/Sitemap:https://acme.com/sitemap.xml
User-agent: 该项的值用于描述搜索引擎蜘蛛的名字。如果该项的值设为*,则该协议对任何机器人均有效
Disallow:这条指令明确地告诉爬虫不要访问 /private/ 路径及其下的所有内容。这是 robots.txt 文件的核心功能之一,用于保护网站中不希望被搜索引擎索引的页面或内容。
Sitemap:提供网站 sitemap 的 URL 地址,帮助搜索引擎爬虫更有效地发现和索引这些页面
六、各搜索引擎提交站点收录
除了robots.txt + sitemap.xml 方式增加网址被收录的可能性外,还可以在各搜索引擎站长平台手动提交网址,以缩短爬虫发现网站链接时间,加快爬虫抓取速度
百度:ziyuan.baidu.com/
谷歌:developers.google.com/search?hl=z…
搜狗:zhanzhang.sogou.com/
360:zhanzhang.so.com/
必应:www.bing.com/webmasters/…
七、服务端渲染
爬虫只能抓取到网页的静态源代码,而无法执行其中的JavaScript脚本。当网站采用Vue或React构建SPA项目时,页面上的大部分DOM元素实际上是在客户端通过JavaScript动态生成的。这意味着爬虫能够直接抓取和分析的内容会大幅减少
熟悉vue的,可使用Nuxt
熟悉React的,可使用Next。对Next感兴趣的,可参考我的另一篇文章给上市公司从0到1搭建Next.js14项目
爬虫除了不会抓取JavaScript脚本的内容,也不会抓取iframe中的内容,因此项目中少用iframe
八、网址规范化
例如,一个页面可能有多个 URL 地址,比如:
https://example.com/article.htmlhttps://example.com/articlehttps://www.example.com/article
这些 URL 指向同一个页面内容。但是,我们应该指定其中一个作为该页面的规范化 URL
在每个非规范版本的 HTML 网页的<head>
部分中,添加一个 rel="canonical" 链接来进行指定规范网址
<linkrel="canonical"href="https://www.example.com/article"/>
九、网站性能
网站打开速度越快,识别效果越好,否则爬虫会认为该网站对用户不友好,降低爬取效率
来源:极客前端探索者