前端工程师必须要知道的SEO技巧(2):制作比设计还要漂亮的代码(内容和语义化代码)上...

前言:现在的网站设计,大多数不仅仅要求美观,前端代码往往发挥着重要的作用.这意味着很大一部分搜索引擎优化或搜索引擎优化责任应该落在设计师身上.然而,有大量的网页设计师不理解这个问题以及如何在建立一个网站初期就达到是完全的搜寻引擎优化.当然,要达到这个高度,肯定离不开学习.需要花费时间使用.

一.制作比设计还要漂亮的代码(语义化代码)其实就是在适当的位置使用适当的代码.

接下来,我举几个例子就能明白:

H1~H6标签多用于标题.

UL标签多用于无序列表.

OL标签多用于有序列表.

DL标签多用于定义数据列表.

stong和em表示强调,意思就是告诉爬虫这里是重点.

根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析.

二.语义化标签有什么好处?为什么要语义化标签?

一个网页就好像是一栋房子,HTML结构就是一面面的墙,而标签则是一块块的砖,砖要摆放有序,整整齐齐,墙才会牢固.最后css则是装饰材料,美不美就靠她了.因此,我们要有一个优秀的网页,既要提供一个干净而又有清晰结构的HTML,更加离不开css的极致美化.

从上面也说明标签语义化极其重要,HTML每个标签都有自己的语义,都有自己适用的范围.但往往会被我们忽略或者被我们滥用,举个例子:在一个页面中<div>用了几十个甚至上百个,这是个无意义的标签,只是表示一个层而已,非常不利于后期的维护;而<table>标签则是一个数据标签，该用的时候,我们就要大胆使用.

标签语义化的好处

1.去掉或样式丢失的时候能让页面呈现清晰的结构:

html本身是没有表现的,我们看到例如<h1>是粗体,字体大小2em,加粗；

<strong>是加粗的,不要认为这是 html的表现,这些其实html默认的css样式在起作用,所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式,默认样式的目的也是为了更好的表达html的语义,可以说浏览器的默认样式和语义化的HTML结构是不可分割的.

2.屏幕阅读器(如果访客有视障)会完全根据你的标记来"读"你的网页.

例如,如果你使用的含语义的标记,屏幕阅读器就会"逐个拼出"你的单词,而不是试着去对它完整发音.

3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）.

使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页.

语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况（包括现有的或者将来新的设备）.例如,一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.无论哪种方式一旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面.

4.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重.

过去你可能还没有考虑搜索引擎的爬虫也是网站的"访客",但现在它们他们实际上是极其宝贵的用户.没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问.

5.你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.

因此,如果页面文件的标题被标记,而不是,那么这个页面在搜索结果的位置可能会比较靠后.除了提升易用性外,语义标记有利于正确使用CSS和JavaScript,因为其本身提供了许多"钩钩"来应用页面的样式与行为.
SEO主要还是靠你网站的内容和外部链接的.

6.便于团队开发和维护

W3C给我们定了一个很好的标准,在团队中大家都遵循这个标准,可以减少很多差异化的东西,方便开发和维护,提高开发效率,甚至实现模块化开发.

三.我们应该怎么做?