我们常常可以看到一些面试题中有问【 HTML 语义化的好处是什么】,很多人都可以溜溜地说其中一个好处就是【有利于 SEO 】。那么,什么是 SEO ,大家真的都清楚吗?搜索引擎优化(SEO)搜索引擎优化(英语: Search Engine Optimization ,缩写为 SEO ),根据维基百科的解释是:
它是一种透过了解搜索引擎的运作规则来调整网站,以及提高目的网站在有关搜索引擎内排名的方式。也就是说,通过搜索引擎优化,我们的网站可以在搜索结果的排名中靠前。那么,作为一个前端,我们该如何为搜索引擎优化做出一点贡献呢?优化的技巧在学习如何优化之后,我们最好了解一下当我们在“百度一下”或者“ Google 搜索”时,搜索引擎都做了一些什么。由于不少研究发现,搜索引擎的用户往往只会留意搜索结果最前面的几个条目,所以不少网站都希望透过各种形式来影响搜索引擎的排序,让自己的网站可以有优秀的搜索排名。
当中尤以各种依靠广告维生的网站为甚。
https://www.
youtube.com/watch
v=BNHR6IQJGZs&feature=youtu.be
这个视频 How Search Works 解释了搜索引擎是如何工作的。需要科学上网才能看得到,当然在这里我也会总结一下这个视频的大意:当搜索进行时,它会从“蜘蛛”事先抓取到的大量有关联性的索引中,搜索所有包含用户输入的关键字的网页,然后根据算法给出每个网页一个总评分,再根据评分的高低给用户返回搜索结果。而这些包含关键字的内容,可以是文章标题、描述、关键字、内容、甚至是链接等。由上可以得知,要想优化,我们可以从这些方面入手。
创建唯一且准确的网页标题
标记可告诉用户和搜索引擎特定网页的主题是什么。它应放置在 HTML 文档的 元素中。
我们应该为网站上的每个网页创建一个唯一标题,并且尽量避免与网页内容无关或使用默认或模糊的标题。
如: < title > title > < title > title >
使用
元标签我们可以使用
的 keywords
元数据来提炼网页重要关键字,以及 description
元数据准确总结网页内容,而避免在 description
元数据的内容中出现关键词的堆砌,描述过长,或“这是一个网页”这种没有实际性意义的描述等现象。正确示范如下:
使用语义化元素在合适的位置使用合适的元素表达合适的内容,让用户和“蜘蛛”能一目了然文档结构。
例如使用 可以让“蜘蛛”知道这是很重要的内容。然而,值得注意的是,例如在想要表达强调时,我们不应该滥用标题元素或者
、
这种没有实际意义的标签,换而可以使用
或
来表示强调。此外,
的权重比
的大,我们不应该为了增大权重而去滥用
,一般来说
用于正文的标题。利用
中的
alt
属性alt
属性可以在图片未成功显示时候,使用文本来代替图片的呈现,使“蜘蛛”可以抓取到这个信息。
此外它还可以解决浏览器禁用图像或屏幕阅读器解析等问题。设置rel='nofollow'
忽略跟踪如果某个 的链接不需要跟踪,那么添加
rel='nofollow'
即可通知“蜘蛛”忽略跟踪。因为“蜘蛛”分配到每个页面的权重是一定的,为了集中网页权重并将权重分给其他必要的链接,为不必跟踪的链接添加这个属性就显得很必要了。尽量保证 HTML 的纯粹和高质量我们应尽量让结构(HTML)、表现(CSS)及行为(Javascript)三者分离。
如果在一个 HTML 页面中,编写大量的 CSS 样式或脚本,会拖慢其加载速度,此外,如果不为 定义宽高,那么会引起页面重新渲染,同样也会影响加载速度。一旦加载超时,“蜘蛛”就会放弃爬取。如果这个 HTML 文档内容比较独特丰富(合理插入图片说明)等,会被认为质量较高符合用户需求,从而提高 SEO 的排名。扁平化网站结构一般来说,一个网站的结构层次越少,越有利于“蜘蛛”的爬取。
所以目录结构一般不多于 3 级,否则“蜘蛛”很容易不愿意继续往下爬。就像用户在操作一个网页一样,层级大于 3 就很影响用户体验了,“蜘蛛”就是模仿用户的心理。合理安排重要内容的位置我们应该将重要内容的 HTML 代码放在最前面,最前面的内容被认为是最重要的,优先让“蜘蛛”读取,进行内容关键词抓取。
并且,重要内容不应该由 Javascript 或 iframe 输出,“蜘蛛”没有办法读取 Javascript ,一般不会去读取 iframe 中的内容。
本文完。若文中有错误还请指正与包涵!原文链接:
https://
caijialinxx.github.io/2
018/07/30/seo-in-front-end/
转载请注明出处。免责声明:本平台仅供信息发布交流之途,请谨慎判断信息真伪。如遇虚假诈骗信息,请立即举报
举报