本文字数:2585字
预计阅读时间:8分钟
近期团队开发的新产品的官网上线了,随之而来的问题就是如何让网站更快更好的传播出去。当然SEO就是最常见的手段之一,对官网的SEO工作有利于产品的网络传播和分享。
有的团队会有专人负责SEO的工作,那么作为离网站页面“最近”的前端工程师,可以为SEO做哪些工作呢?
为了更好的沉淀SEO相关内容,为后续web产品提供优化指南,本文就以前端工程师的角度,通过调研沉淀出了前端通用SEO技术优化指南。
SEO常见的技术优化手段通常是针对于搜索引擎爬虫的,通过建立一系列约定的规则或手段来使得搜索引擎更好地抓取到网站的信息。
我们可以通过两种方式来提供搜索引擎想要的信息,一种是提供必要的信息在自身的网站服务上被动等待搜索引擎获取,我们可以命名为:“被动式SEO”。
还有一种是通过搜索引擎服务商提供的后台管理功能,直接把信息提供给搜索引擎服务商,我们可以命名为:“主动式SEO”。
被动式SEO是常规地针对所有搜索引擎都开放的优化方式,涉及范围广,使用标准规范。而主动式SEO是针对特定的搜索引擎服务商的优化,涉及范围窄但更有针对性,使用标准规范和特制规范。
以下为常见的技术优化SEO的方式:
* 以下标签,可能由于搜索引擎服务商不同而又不同处理
最佳实践:
编码:
<head>
<title>这里填写标题</title>
</head>
搜索引擎的关联展示
最佳实践:
编码:
<head>
<meta name="description" content="这里填写描述">
</head>
搜索引擎的关联展示:如上图
编码:
<head>
<meta name=”robots” content="${content}">
</head>
<!--
content可选:index | noindex | follow | nofollow index: 告诉搜索引擎收录我
noindex:告诉搜索引擎不要收录我
follow:告诉搜索引擎爬取页面的links
nofollow:告诉搜索引擎不要爬取页面的links 如果不设置此标签,等同于content="index, follow"
-->
编码:
<head>
<meta charset="UTF-8">
</head>
<!-- 使用UTF-8 Unicode -->
警告:搜索引擎可能不使用该字段进行收录了,有些甚至认为是垃圾信息
最佳实践:
关键词可以让产品同学确认,常见关键词分类:
编码:
<head>
<meta name=”keywords” content=”s, ss, sss” />
</head>
图片内容
文件名称语义化:img文件名称最好是有语义的,能标识该图片内容的
图片说明 alt-tag:img标签的alt属性值不能空,要填写该图片的描述
编码:
<img src="huyou.jpg" alt="xxxx">
网页中所有的内链语义化:
前端常规优化手段进行网站速度优化,具体手段就不在本文展开。优化目标也是提升用户体验,当网站速度过慢(相关调查3s是极限),用户就会引起流失。
* 测速工具:
https://developers.google.com/speed/pagespeed/insights/
通过各种手段为本站进行引流,提升本站的流量,提升搜索引擎权重
提供给搜索引擎网站地图信息的协议,通过它可以告知搜索引擎关键path信息,类似网站的目录,可以手动配置,也可以使用生成器自动生成:https://www.xml-sitemaps.com/。
可以是XML、txt等格式,XML格式如下:
<!-- 详细配置见:https://www.sitemaps.org/protocol.html -->
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://www.example.com/</loc>
<lastmod>2005-01-01</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
</urlset>
该文件并不是一个标准规范,是一种约定俗成的协议。
User-agent: * Disallow: Sitemap: https://xxx.sohu.com/sitemap.xml
独立页面也可以使用meta robots标签,和robots.txt可以一起使用,见上方内容。
依赖各家搜索引擎服务商提供的后台服务功能来直接优化网站搜索,有些功能是免费的,有些功能是付费的,当然付费效果更好:)。常见的如竞价排名、直接购买搜索排名等方式。我们这里更关注技术优化的内容。
我们可以以360提供的站长功能来说明如何优化SEO:可以主动提供给360搜索引擎什么样的信息以及可以从引擎方得到哪些效果和功能。
360的站长平台的功能(实施方法参考指南:http://www.so.com/help/help_3_16.html):
通过以上的SEO调研,我们可以发现技术优化手段是有迹可循的,所以可以形成一种通用的模式来帮助网站进行SEO优化的自检和实施方案。
我们总结了如下的 SEO checklist 列表,作为通用SEO优化方案的实施手段应用在我们的网站上,也为之后其它产品进行SEO优化提供了切实可行的实施指南。
当然,实施SEO优化方案之后要及时收集和统计数据,复盘优化效果,为后续提升SEO优化效果不断积累经验,形成方案不断自我进化的良性循环。但技术优化手段毕竟是有限的,SEO的优化同样离不开产品的规划、运营的引流、搜索引擎服务商洽谈合作等有效手段。作为前端工程师,我们不仅仅可以提供SEO优化的一条技术线,同样可以把上游和下游连接起来,综合推动SEO优化的进行,不仅能“制造”网站,也能为网站的推广和传播贡献自己的力量。
SEO:Search Engine Optimisation 搜索引擎优化
SERP:Search Engine Results Page 搜索引擎搜索结果页
反链数(外链):指从别的网站导入到某网站的链接数量
https://developers.google.com/search/docs/beginner/seo-starter-guide?hl=zh-cn
https://medium.com/@coderacademy/15-seo-tips-every-front-end-developer-should-know-in-2016-d579b7cefb01
https://ahrefs.com/blog/seo-meta-tags/
https://ahrefs.com/blog/meta-keywords/
https://www.sitemaps.org/
https://zh.wikipedia.org/zh-hans/Robots.txt
也许你还想看
(▼点击文章标题或封面查看)
2021-09-23
2021-09-16
2021-09-09
2021-08-26
2021-08-19