×

前端 SEO 排名 策略

前端SEO:全方位提升网站排名策略

元智汇电子 元智汇电子 发表于2023-11-07 16:55:33 浏览800 评论0

抢沙发发表评论

SEO(Search Engine Optimization)是指通过了解搜索引擎自然排名的算法逻辑,以提高目标网站在搜索引擎内排名的方式。网站的SEO对于提升排名和流量,从而提高知名度至关重要。对于盈利性网站,做好SEO还可以以低成本获得更高的投资回报率。


本文将为您提供全面的SEO方案🔥🔥🔥。值得注意的是,网站SEO是一个长期工作,一旦基础配置就绪,后期的维护尤为重要,比如定期更新动态内容,不断寻找高质量外链资源等🤌。


本文将从以下三个层面展开:


  • TDK优化

  • 网站质量

  • SEO手段(10种手段)

❄️一、TDK优化

TDK是指Title(页面标题)、Meta Description(页面描述)和Meta Keywords(页面关键词)的缩写,是网站SEO的重要环节。然而,各大主流搜索引擎基本已经降低了对<keywords>标签对排名的影响。


(一)title标签-网站名片

Title标签相当于网站的名片,直接显示在搜索结果中。一个好的标题可以为网站带来流量,从而提升排名。注意避免标题过长。


(二)META标签-网站信息

META标签是网页head区的辅助性标签,用于描述页面属性。目前几乎所有搜索引擎都使用机器人自动查找meta值来给网页分类。其中,name属性包括Keywords(关键词)、Description(网站内容描述)等,而http-equiv属性可以向浏览器传回一些有用的信息。


2.1 关于网站关键词

现在各大搜索引擎已经降低了对关键词的权重,但它仍然有存在的价值。如果决定配置网站关键词,需要注意数量控制、选择合理的长尾关键词等。


2.2 关于网站描述

Description的长度最好控制在120~200个字符,应让用户知道将从页面中获得什么,并合理使用行动号召(CTA)用语。


🌈 二、网站质量


(一)确保页面性能

网站性能对SEO排名影响重大,原因显而易见:


网站卡顿会降低用户留存率;

缓慢加载会让搜索引擎认为网站用户体验差,从而降低排名;

影响搜索引擎蜘蛛的爬取频率等。

谷歌将网页加载速度作为影响排名的重要因素之一,这也印证了性能对SEO的重要性。


如果您希望了解有关网站性能优化的更多信息,可以参考我的往期文章《2023前端性能优化清单》。


(二)HTML语义化

语义化包括内容结构化(内容语义化)和选择合适的标签(代码语义化)。避免滥用div,采用HTML语义化有助于开发者阅读,也有利于浏览器爬虫解析,对SEO优化非常有帮助。


在开发过程中,我们应该遵循语义化的开发规范,根据页面内容选择合适的标签,以优化代码,使网页结构更加清晰。


以下是几种标签的使用示例:


  1. h标签


    h标签共有六个,分别是h1至h6。它们的文字由大到小,权重也逐渐降低。h标签在页面中的权重非常高,应避免滥用。要善用h标签来突出网页的核心内容。

    例如:


    使用h1写主标题,通常与网页title标签一致,可以在页面展示,一个页面最好只有一个h1标签。

    使用h2写次级标题,h3至h6以此类推,细分网页结构。


  2. strong、em标签


    <b>和<strong>标签都用于加粗文字,区别在于:<b>是为了加粗而加粗,<strong>是为了强调而加粗。

    同样,斜体标签 <i> 和 <em> 也有相同的区别,<em>有强调效果。

    推荐使用<strong>和<em>,而不是<b>和<i>等。单纯的样式修改可以用CSS实现。


  3. ul、ol、li标签


    这三个标签用于创建列表,ul表示无序列表(unordered list),ol表示有序列表(ordered list),li表示列表项(list item)。

    从网站优化的角度来说,在罗列多个词条时,最好使用列表标签。

    例如:

    使用ul和li布局网站导航条对搜索引擎蜘蛛更加友好,也是影响搜索引擎排名的因素之一。


  4. img标签


    img图片标签的alt属性是图片的替代文字。

    alt属性可以帮助蜘蛛快速理解图片的具体内容,并且在网络故障时仍然能够爬取到图片的内容信息。


  5. 其他标签


  • nav标签定义导航链接的部分;

  • aside标签定义侧边栏内容、引述内容;

  • header标签定义网站头部,介绍信息;

  • article标签定义网站的内容部分;

  • section标签定义文档中的节;

  • footer标签定义文档或节的页脚。


(三)其他注意点


  • 避免用JS输出重要内容,因为爬虫不会读取JS格式的内容,重要的内容必须以HTML格式呈现。

  • 尽量避免使用iFrame,因为搜索引擎不会抓取iframe内的内容。

  • 如果需要截取文字,尽量用CSS实现,保证文字可以完整呈现给搜索引擎。


这些方法将有助于提升网站的SEO效果,使其在搜索引擎中获得更好的排名。



🔧三、SEO策略


(一)搜索引擎收录提交

通过在各大搜索引擎的站点平台提交网站收录,可以加速爬虫发现网站链接,提升抓取速度。


  • 百度站长资源平台:ziyuan.baidu.com/?castk=LTE%…

  • 谷歌网站管理员工具:www.google.cn/webmasters/

  • 搜狗站长平台:zhanzhang.sogou.com/

  • 360站长平台:zhanzhang.so.com/

  • 头条搜索站长平台:zhanzhang.toutiao.com/

  • 必应网站管理员工具:www.bing.com/webmaster/i…


(二)Sitemap站点地图

Sitemap是网站的URL清单,同时包含每个网址的其他元数据(如上次更新时间、更新频率、相对于其他网址的重要程度等)。它可为搜索引擎蜘蛛提供导航,快速找到全站链接,全面获取网站信息。为确保链接的全面性和准确性,应定期更新Sitemap站点地图。


通常有两种格式的Sitemap文件:


  • sitemap.xml:用于提交网站网址的XML文件,大多数搜索引擎支持使用。

  • sitemap.html:可直接放置在网站上,方便用户访问或让搜索引擎快速找到全站链接(每页最多500条,自动分页)。


示例sitemap.xml文件内容如下:

image.png


有许多在线工具可用于生成sitemap文件,如:


  • sitemap.zhetao.com/

  • tools.bugscaner.com/sitemapspid…

生成的sitemap文件通常放置在项目根目录下,然后可在各搜索引擎的站点平台提交sitemap.xml文件。


(三)Robots文件

当蜘蛛访问网站时,会首先检查根域下是否存在名为robots.txt的纯文本文件,用于指定蜘蛛在网站上的抓取范围。通过robots文件,可以告诉蜘蛛哪些页面不希望被访问,或者只允许特定的搜索引擎访问特定部分。


robots文件包括两种键值对:


  • User-agent:描述搜索引擎蜘蛛的名称,*表示适用于所有蜘蛛。

  • Disallow:描述不希望被访问的URL、目录或整个网站。


例如:

image.png


使用场景举例:

  • 集中蜘蛛爬取权重,将不重要的页面配置在robots文件中。

  • 避免404错误记录,阻止搜索蜘蛛访问不存在的URL。

  • 避免特定页面被搜索引擎收录,保护隐私信息。

  • 避免动态网页被蜘蛛索引,保证内容独特性。

  • 将Sitemap配置在robots文件中,允许蜘蛛访问。


使用方法简单,将robots.txt文件上传到网站根目录即可,文件名需全小写。上传后,通常可在浏览器中访问域名/robots.txt查看文件。


(四)内链与外链


在搜索引擎优化中,内链和外链被誉为网站排名的关键因素。它们都对提升网站在搜索结果中的排名起到重要作用,尤其是外链的建设。


内链:是指从网站的一个页面链接到另一个页面,通过内链可以构建网站内部的网状结构,使蜘蛛能够更全面地抓取网站内容。


外链:是指其他网站链接到自己网站的页面。外链可以提升网站的权重,增加流量,对于SEO来说具有以下好处:

  • 提升网站权重

  • 吸引蜘蛛抓取网站

  • 提升关键词排名

  • 提高网址或品牌曝光度

  • 增加网站流量


外链可以为网站带来流量,因此外链的数量越多越好。然而,需要注意外链的质量。低质量的外链,如对方网站未被搜索引擎收录、性能差或存在死链等,反而会对本站的排名产生负面影响。


此外,在添加内链和外链时,务必注意在a标签中正确使用nofollow和external属性。


举例:

image.png

使用rel=nofollow属性的链接将告诉搜索引擎忽略此链接,防止权重分散。这是一个专为SEO优化设计的标签。


应用场景:

  • 屏蔽一些垃圾链接,如评论中的外部链接、论坛用户留下的链接等。

  • 外链内容与本站无关时,建议使用nofollow。


当外链站点不稳定或性能较差时,也建议使用nofollow。友链作为相互交换链接的方式,在交换前务必审核对方网站的质量。


不是所有与内容无关的外链都需要添加nofollow。适当添加高质量的外链对SEO没有负面影响,反而会产生积极影响。例如掘金的友链:

image.png


external表示这是一个外部链接,点击时将在新窗口中打开。与target="_blank"具有相同效果。此属性可以告诉搜索引擎这是一个外部链接,非本站链接。


(五)Canonical URL(网址规范化)


网址规范化是指通过统一网址格式解决多个不同格式的网址访问同一页面的问题。例如,juejin.cn、www.juejin.cn和www.juejin.cn/index.html虽然URL不同,但实际上返回的都是相同的页面。


网页规范化的好处有两点:


  • 解决搜索引擎重复收录的问题。

  • 有利于URL权重集中。


解决方法是在页面的head标签中添加以下canonical标签:

image.png


例如,掘金的规范化网址:

image.png


(六)网站301重定向


301/302重定向是SEO优化中的重要技术之一。301重定向表示网页永久转移到另一个地址,而302表示暂时转移。


301重定向除了具有规范化网址的作用外,还有以下作用:


  • 集中域名权重,将权重从一个域名转移到另一个域名。

  • 避免重复收录。

  • 传递网页PR(PageRank)。


在以下情况下必须配置301重定向:


  • 网站替换域名后,通过301永久重定向旧域名到新域名,弥补流量损失和SEO。

  • 删除网站中的某些页面,但这些页面具有一定的流量和权重,可以通过301重定向到合适的页面,避免流量流失。

  • 网站改版或其他原因导致页面地址变化,为避免死链接,可通过301重定向解决。

  • 多个空闲域名需要指向相同站点,可使用301永久重定向。


如何验证301重定向是否生效?可使用站长工具的HTTP状态查询检查返回的状态码是否为301。


(七)网站设置伪静态页面


伪静态页面是通过重写URL的方式实现去掉动态网页参数,但实际上并不存在实际的静态页面文件。它提升了搜索引擎友好性,也方便用户输入和记忆。


一般通过在服务器配置中使用rewrite重写规则,将动态URL转换为静态URL。


(八)使用HTTPS


谷歌宣布使用安全加密协议(HTTPS)是搜索引擎排名的参考因素之一。因此,在相同域名情况下,HTTPS站点比HTTP站点拥有更好的排名。


(九)SSR服务端渲染(Server-Side Rendering)


对于SPA应用,尽管具有用户体验好、服务器压力小等优点,但也暴露了一些问题,如首屏加载速度慢、不利于SEO等。SSR的出现有效解决了这些问题,通过在服务器端动态生成完整的HTML内容,提升了对搜索引擎的友好性。


流行的Vue和React前端框架都提供了SSR的解决方案,如Vue的nuxt.js和React的next.js。


(十)预渲染prerender-spa-plugin


如果只想改善部分页面的SEO,可以选择不使用SSR解决方案。可以使用prerender-spa-plugin等插件,在构建时针对特定的路由生成静态HTML文件。


群贤毕至

访客