CSS的SEO好处
如果您对HTML和CSS有点熟悉，那么本文最有用。我很好地解释了这些概念，你不必成为专家，但我想提供的材料能够以你能理解的方式向你介绍更高级的设计。像许多其他网页设计师一样，我开始使用图形工具布置网页，并发现表格的奇迹，没有人告诉我使用它们。由于浏览器对CSS的支持比以前更好，并且表格会导致问题，因此CSS为您提供了以前可能没有想过的好处，更好的SEO的好处。
我想马上说，优质内容应该是你的最高优先级，而不是SEO技巧。这里给出的建议将帮助您获得更好的搜索引擎结果，因为真正的搜索引擎优化的关键始于良好的页面结构和组织您的内容。通过了解搜索引擎如何“看到”您的页面，您可以构建更好的页面结构。
搜索引擎在查看网页时使用所谓的“自上而下”逻辑。他们查看您的代码，而不是用户看到的可视化显示。即使页面上还有其他内容，人眼也会立即被绘制到页面内容中。搜索引擎机器人不会以相同的方式看待事物，但是，一旦您理解它们，它们就是合乎逻辑且可预测的。
您很可能看到搜索引擎结果没有意义，因为显示了一些模糊的内容而不是页面的实际内容。我将说明自顶向下的逻辑，以便您了解如何让CSS为您工作。
在搜索引擎的头脑中，网页的要点首先由页面顶部的内容决定。如果你从某些单词开始，它们经常出现在整个页面中，然后再出现在底部，所以它基本上就是你的结束点，在搜索引擎的自动化大脑中就是你的页面的内容。
你训练有素的眼球可能会寻找一个标题，然后阅读内容; 所以对你来说，这是页面自上而下的逻辑。从上到下阅读您的HTML代码。在您获得真实内容之前，您可能会感到惊讶，以及搜索引擎首先会看到多少其他“内容”。如果您使用表格进行布局，则代码的自上而下逻辑看起来就像是切断了腿并且场所设置在地板上。
使用CSS，您可以组织代码，以便搜索引擎首先查看您的真实内容，无论它在页面上显示的位置如何。
让我们使用一个简单的HTML示例：
<html>
<head>
插入所有头部信息，包括下面的CSS链接
<link rel =“stylesheet”type =“text / css”href =“file.css”/>
</ head>
<body>
<div id =“content”> <！ - 我将在稍后解释这个div->
<h1>标题与您的重要关键字</ h1>
<h2>带有重要关键字的副标题</ h2>
<p>您的重要内容将在这里，与关键字。请注意这是如何在您的代码顶部。无论页面上的位置如何，您都希望它位于代码顶部。</ p>
</ div> <！ - 这将是最终内容div->
<div id =“nav”> <！ - 此div表示导航示例 - >
<p>这可能包含图像按钮，文本或两者。如果使用图像，请确保包含应包含关键字的替代文字。对于布局表，这很可能高于内容，现在它低于应该的位置。上面的div id将帮助您控制它。</ p>
</ div>
<div id =“banner”>
<p>正如名称所暗示的那样，这可能位于页面的顶部，但请注意它在代码中的表现如何，因为它没有强大的SEO元素。它可能是您的徽标或其他导航。即使它显示在用户的页面顶部，也不是您希望搜索引擎在搜索结果中读取或显示的第一件事。</ p>
</ div>
<div id =“summary”>
<！ - 这个div可以是任何东西，在这里用作示例 - >
<p>这个另一个div的例子用于说明另一个SEO原则。在其中使用关键字，这就像你的结束点。通过出现在代码的底部，它可以提供更强大的SEO。</ p>
</ div>
</ body>
</ html>
接下来，我将展示如何使file.css控制布局的简单示例。您可以在文本编辑器中使用此代码来查看效果。为简单起见，我将只关注布局代码，我们不会声明字体，大小，链接等。
在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优化：本文由越视界网站SEO优化团队整编而成，“越视界”隶属于北京纯八度文化传媒有限公司，于2016年8月在北京成立，主要从事媒体公关传播与SEO优化服务。公司一直秉承“拉近品牌与消费者心的距离”为使命；“有效传播”为己任；“一切为了销售”的服务理念，得到很多知名企业及上市公司的一致好评我们自成立以来，已累计为房产、金融、汽车、旅游、教育、科技、电商等13个领域的528家企业提供了专业的品牌传播及网站SEO优化服务。如需了解更多的SEO文章，新闻，SEO优化技巧，案例，各种网站优化知识请进入：2019/20190426A/F014592 并且可以于越视界优化师进行一对一问答和交流。
本文地址：2019/20190426A/F014593.html 你还可以从反向链接中获取更多信息。