http://baiduseostudy.com/

SEO优化小知识:CSS的SEO好处

 假如您对HTML和CSS有点熟悉,那么本文最有用。我很好地解说了这些概念,你不必是专家,但我想供给的资料能够以你能了解的方法向你介绍更高档的规划。像许多其他网页规划师相同,我开端运用图形东西安置网页,并发现表格的奇观,而没有人告诉我运用它们。由于浏览器对CSS的支撑比曾经更好,而且表格会导致问题,因而CSS为您供给了曾经或许没有想过的优点,更好的SEO的优点。

  我想马上说,优质内容应该是你的最高优先级,而不是SEO技巧。这儿给出的主张将协助您取得更好的查找引擎成果,由于实在的查找引擎优化的要害始于良好的页面结构和安排您的内容。经过了解查找引擎怎么“看到”您的网页,您能够构建更好的网页结构。

  查找引擎在检查网页时运用所谓的“自上而下”逻辑。他们检查您的代码,而不是用户看到的可视化显现。即便页面上还有其他内容,人眼也会立即被制造到页面内容中。查找引擎机器人不会以相同的方法看待事物,可是,一旦您了解它们,它们就是合乎逻辑且可预测的。

  您很或许看到查找引擎成果没有意义,由于显现了一些含糊的内容而不是页面的实际内容。我将阐明自顶向下的逻辑,以便您了解怎么让CSS为您作业。

  在查找引擎的头脑中,网页的关键首要由页面顶部的内容决议。假如你从某些单词开端,它们经常出现在整个页面中,然后再出现在底部,所以它基本上就是你的完毕点,在查找引擎的自动化大脑中就是你的页面的内容。

  你训练有素的眼球或许会寻找一个标题,然后阅览内容; 所以对你来说,这是页面自上而下的逻辑。从上到下阅览您的HTML代码。在您了解实在内容之前,您或许会感到惊奇,以及查找引擎首要会看到多少其他“内容”。假如您运用表格进行布局,则代码的自上而下逻辑看起来像是切断了腿而且场所设置在场上。

  运用CSS,您能够安排代码,以便查找引擎首要检查您的实在内容,不管它在页面上显现的方位怎么。

  让咱们运用一个简略的HTML示例:

  刺进一切头部信息,包括下面的CSS链接

  标题与您的重要要害字

  带有重要要害字的副标题

  您的重要内容将在这儿,与要害字。请注意这是怎么在您的代码顶部。不管页面上的方位怎么,您都期望它坐落代码顶部。

  这或许包括图画按钮,文本或两者。假如运用图画,请保证包括应包括要害字的代替文字。关于布局表,这很或许高于内容,现在它低于应该的方位。上面的div id将协助您操控它。

  正如称号所暗示的那样,这或许坐落页面的顶部,但请注意它在代码中的体现怎么,由于它没有强壮的SEO元素。它或许是您的徽标或其他导航。即便它显现在用户的页面顶部,也不是您期望查找引擎在查找成果中读取或显现的榜首件事。

  这个另一个div的比如用于阐明另一个SEO原则。在其中运用要害字,这就像你的完毕点。经过出现在代码的底部,它会使SEO更强壮。

  接下来,我将展示怎么使操控布局的简略示例。您能够在文本编辑器中运用此代码来检查作用。为简略起见,我将只重视布局代码,咱们不会声明字体,巨细,链接等。

  在HTML示例中,咱们有4个部分(div)。您能够按像素或百分比(甚至两者)进行划分。咱们将运用像从来简化原理阐明。

  / *开端CSS * /

  / *仅供记载,这是CSS *中的谈论

  #nav {position:absolute;

  顶部:0px;

  左:0px;

  宽度:200px;

  身高:500px;

  填充:20px 10px 10px 20px;

  }

  / *为了解说上面的代码,我以不同于HTML的次序列出了div。这个次序遵从我正在进行页面布局的方法。它还遵从在HTML中设置表结构时的流程。导航部分靠在页面的左上角(顶部和左边都是0px)。#符号界说div的“id”,后跟称号。我将宽度设置为200px,这就像制造一个宽度为的表格单元格。我只运用500px高度作为示例,因而下面的摘要将从导航完毕的当地开端。您期望保证一切内容都契合您指定的尺度。您也能够设置填充,但与HTML中的表格单元格不同,您能够独自设置每一面。在上面的示例中,前20px是顶部,然后它以顺时针次序声明每一侧,因而左边也是20px。* /

  #summary {position:absolute;

  上:500px;

  左:0px;

  宽度:200px;

  填充:20px 10px 10px 20px;

  }

  / *以上摘要从导航完毕处开端,间隔顶部500px。其他设置匹配对齐。我没有设置高度,由于当您刺进内容时,它会像表格单元格相同扩展。* /

  #banner {position:absolute;

  顶部:0px;

  左:200px;

  宽度:550px;

  身高:150px;

  填充:20px 0px 10px 20px;

  }

  / *横幅将坐落页面顶部,但将从导航完毕的左边200px开端。声明高度是可选的,但它有助于了解下面的内容将从何处开端。我以150px为例。右侧0px填充的原因是由于此布局中屏幕的其余部分为空,无需填充该侧。我约束宽度,因而它将显现低至800×600 res(这儿的总宽度为750px)。* /

  #content {position:absolute;

  上:150px;

  左:200px;

  宽度:550px;

  填充:10px 0px 10px 20px;

  }

  / *现在内容从横幅离开的当地开端,向左200px,从顶部150px。注意这是最终一次。假如您运用表格来创建相同的布局,那么这也将是您的代码中的最终一个。在进入页面之前,查找引擎会阅览其他一切内容。在这儿运用的HTML中,它坐落代码的顶部,因而查找引擎首要会看到它。* /

  / *完毕CSS * /

  这些是简略的示例,但假如您能够考虑自顶向下逻辑,则能够构建查找引擎友爱页面。它们也会加载更快,由于杂乱的表结构比CSS布局需求更长的时刻来加载,这是CSS的另一个优点。深圳SEO小知识对您是否有协助,谢谢您的阅览。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。