technology-blog
technology-blog copied to clipboard
airuikun
第 12 题：前端如何进行seo优化
- 合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可；description把页面内容高度概括，不可过分堆砌关键词；keywords列举出重要关键词。
- 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
- 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，保证重要内容一定会被抓取
- 重要内容不要用js输出：爬虫不会执行js获取内容
- 少用iframe：搜索引擎不会抓取iframe中的内容
- 非装饰性图片必须加alt
- 提高网站速度：网站速度是搜索引擎排序的一个重要指标
- 前后端分离的项目使用服务端同构渲染，既提高了访问速度，同时重要关键内容首次渲染不通过 js 输出
- 友情链接，好的友情链接可以快速的提高你的网站权重
- 外链，高质量的外链，会给你的网站提高源源不断的权重提升
- 向各大搜索引擎登陆入口提交尚未收录站点
- 前后端分离的项目使用服务端同构渲染，既提高了访问速度，同时重要关键内容首次渲染不通过 js 输出
- 友情链接，好的友情链接可以快速的提高你的网站权重
- 外链，高质量的外链，会给你的网站提高源源不断的权重提升
- 向各大搜索引擎登陆入口提交尚未收录站点
- 前后端分离的项目使用服务端同构渲染，既提高了访问速度，同时重要关键内容首次渲染不通过 js 输出
- 友情链接，好的友情链接可以快速的提高你的网站权重
- 外链，高质量的外链，会给你的网站提高源源不断的权重提升
- 向各大搜索引擎登陆入口提交尚未收录站点
谢谢 我加进答案里
重要内容不要用js输出：爬虫不会执行js获取内容。 好多年前是这么说的，不过百度新增了spider-render爬虫，具体内容如下：
为了给搜索用户更好的体验、对站点实现更好地索引和呈现，百度搜索需要访问网站的CSS、Javascript和图片信息，以便更精准地理解页面内容，实现搜索结果最优排名，百度搜索会全面启用最新UA来访问站点的上述资源。从3月24日（2017）开始 https://ziyuan.baidu.com/wiki/990
其实几年前从一些独立博客里看到说百度会抓取javascript文件。现在百度官方给了公告。但是这个抓取不知道是只抓取javascript文件的内容，还是增加javascript执行环境。 我个人认为是百度爬虫增加了javascript的执行环境。因为如果仅仅只是抓取javascript、css这些文件内容，没有必要做爬虫升级，更不会出个公告。这些内容使用传统的抓取方式就可以抓取。
百度爬虫的升级，我个人觉得是因为SPA网站越来越多，如果不增加javascript执行环境的话很多网站的内容就无法抓取（如果该网站不做服务端渲染的话）。
所以我的结论是：现在的百度爬虫可能已经可以抓取JS输出的内容了。
以上我个人观点，只是猜测。我不是做SEO的，但是对搜索引擎比较感兴趣。希望有高人能指点一下。
相对于友情链接和外链更重要的是内链的建设。 内链就是给关键词加上网站内部的链接，提高网页的关键字排名。外链和友情链接对于网页权重的影响已经弱化，已经没有好多年前那么夸张了。
还有title中的间隔符号，网站名和副标题使用 - 。 副标题中的间隔使用半角符逗号 使用全角符的逗号， 两个关键词会被误判为一个关键词。
以上的都是经验所得，很多年前的东西了。现在很少讲SEO了吧，因为搜索引擎越来越智能了，越来越完善了。
下面是我们使用的SEO
meta标签相关的SEO
title
<title>{网页title}</title>
建议：50～60字符（25～30 个中文字）
description
<meta name="description" content="应用相关的描述"/>
建议：150～160字符（75～80 个中文字），目前已经不太重要了。
keyword
<meta name="description" content="应用相关的描述"/>
建议：3-5个为宜，英文“,”号做分隔符，目前已经不太重要了。
H1/H2
- h1和h2标签各至多只有一个
- h1标签为文本节点，不要包含其他标签
- 必要时可以和网页title保持一致
canonical
canonical标签就是告诉搜索引擎哪个页面是权威页面。
<link rel="canonical" href="对应页面的权威地址（一般为PC页面）" />
alternate
<link rel="alternate" media="only screen and (max-width：640px)" href="一般为PC页面对应的移动端页面" >
sitemap
方便搜索引擎爬虫更好的爬取页面
每个文件上限url 50000
微数据结构化
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Store",
"name": "Middle of Nowhere Foods",
"openingHours": "Mo,Tu,We,Th,Fr,Sa,Su 09:00-14:00",
"openingHoursSpecification":
[
{
"@type": "OpeningHoursSpecification",
"validFrom": "2013-12-24",
"validThrough": "2013-12-25",
"opens": "09:00",
"closes": "11:00"
},
{
"@type": "OpeningHoursSpecification",
"validFrom": "2014-01-01",
"validThrough": "2014-01-01",
"opens": "12:00:00",
"closes": "14:00:00"
}
]
}
</script>
other
img标签的 alt，可以指定格式。即使是用于修饰的图片也要添加空的alt。
Robots.txt
Robots 协议是蜘蛛访问网站的开关，决定蜘蛛可以抓取哪些内容，不可以抓取哪些内容。
