SEO被许多Web设计人员所惧怕，对于编码人员或市场分析人员而言，似乎常常更让人头疼，但是没有理由站在一边。 在本快速教程中，我们将构建一个简单HTML模板，同时给出一些最佳实践，这些最佳实践可能会从go一词直接影响您网站的SEO。
介绍
SEO或搜索引擎优化是一种设置网站的方式，以使搜索引擎对网站进行更高的排名，并影响信息在搜索结果中的显示方式。 购买Google Adwords是出现在搜索查询顶部的最佳方式的日子已经一去不复返了，特别是由于许多广告客户与搜索结果无关，导致用户越来越不信任赞助链接。 Adwords将会反弹，但是有多种方法可以影响您今天的搜索引擎。
首先，我们必须了解搜索引擎爬虫，尤其是Google Spider，会根据内容和标记来仔细阅读您的页面来源并做出假设。 逻辑HTML层次结构对于确定内容的重要性至关重要，但是 互联网上的嗡嗡声告诉我们，Google也在开始将其结果建立在您的社交圈以及页面上。 没错，您可以将Facebook和Twitter当作简单的播放工具而忘记，它们可以帮助您建立或破坏您的网站。
Flickr上的Rundstedt B.Rovillos跳蜘蛛
步骤1：基本HTML结构
让我们从一些基本HTML标记开始：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>SEO Webdesign tutorial</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html> 此结构遵循设定的标准，以便浏览器知道如何构成您的页面。 在代码的顶部，我们确定文档的类型以及所用的语言。 在<head></head>标记之间，我们通知浏览器我们正在使用标准 utf-8字符集 。 然后，我们获得了网站的标题，并添加了一条条件语句来加载 HTML5 shiv ，以补偿与IE 9的兼容性问题。 <body></body>标签当然可以确定页面内容的位置将会出现。
简单明了吧？ 但实际上，我们已经省略了重要信息。
第2步：添加元标记
让我们回到代码的开头，在打开的<head>标签之后添加以下代码行：
<meta name="description" content="A simple page that shows SEO friendly webdesign" />此行告诉搜索引擎，页面标题下方的搜索结果中显示什么。 在这种情况下，Google上的结果可能会这样显示：
注意：非常重要并且经常被忽略的一点是，您应该针对站点的每个内容专门定制站点中每个页面的标题和元标记 。 对于标题，它可以很简单，就像<title>SEO Webdesign tutorial: The HTML page</title> 。
现在，我们<head>标记中的代码如下所示：
<head>
<meta name="description" content="A simple page that shows SEO friendly webdesign" />
<meta charset=utf-8>
<title>SEO Webdesign tutorial</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>注意：有关为什么我们忽略了 包含meta关键字的信息 ，请查看评论中的讨论。
第3步：链接到我们CSS和JS
几乎所有网页中都常见的是指向CSS文件和Javascript代码或库的链接。 如果我们要遵循 Google的编码建议 ，则应尝试将外部查询（HTTP请求）保持在最低限度，因此，在可能的情况下，应将CSS和Javascript资产各自压缩为一个文件。 让我们将对外部文件的一般请求添加到模板中。
首先，我们将在</head>结束标记之前添加以下代码，以链接到外部样式表：
<link rel="stylesheet" href="css/stylesheet.css">接下来，通过添加以下行来对Javascript文件执行相同的操作：
<script src="js/example.js"></script> 我们将javascript添加到页面的末尾，即</body>结束标记之前，以使我们的代码最终如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="A simple page that shows SEO friendly webdesign" />
<meta charset=utf-8>
<title>SEO Webdesign tutorial</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
<script src="js/example.js"></script>
</body>
</html>为什么我们在页面末尾添加Javascript查询？ 两个原因：
- 这样做使页面内容可以直接加载，而不必等待Javascript被处理。
- 它还有助于搜索引擎阅读您的页面内容。 为什么？ 好吧，如果我们从逻辑上考虑，那么搜寻器将从页面顶部开始，然后运行您的代码。 如果在页面顶部添加了Javascript，则搜索引擎会在到达页面内容之前浏览Javascript。 可以说，我们希望搜索引擎直接进入我们的内容，以便更有效地建立索引。 任何引用的Java脚本，无论是内部的还是内部的，都应在页面末尾添加。
要记住的另一条规则是，如果您有多个CSS或Javascript文件，请始终遵循层次结构规则，并将最重要的文件放在第一位，然后依次添加其余文件。 毕竟，如果您不先调用jQuery库，就不能使用使用jQuery库的令人难以置信的Javascript函数。
步骤4：完成模板
我们的模板几乎完成了，但是我们可以添加一些内容。 随着HTML5的引入，使您的网站对SEO友好变得更加容易。 适当的语义为搜索引擎提供了关于如何查找以及在何处查找的非常具体的说明。 让我们添加一些我们可能会在设计的大多数网站上使用的常见元素。
在<body>标记下方和<script></script>标记之前，让我们添加以下代码行：
<header>
<h1><a href="#">Website name</a></h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
</header>
<section>
<article>
<h2>Article header</h2>
<p>Some simple text to help us along</p>
<a href="#">Read more…</a>
</article>
</section>
<aside>
<h3>Simple sidebar</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<p>Example text</p>
</aside>
<footer>
<p>Copyright information</p>
</footer>我们的代码现在应如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="A simple page that shows SEO friendly webdesign" />
<meta charset=utf-8>
<title>SEO Webdesign tutorial</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
<header>
<h1><a href="#">Website name</a></h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
</header>
<section>
<article>
<h2>Article header</h2>
<p>Some simple text to help us along</p>
<a href="#">Read more…</a>
</article>
</section>
<aside>
<h3>Simple sidebar</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<p>Example text</p>
</aside>
<footer>
<p>Copyright information</p>
</footer>
<script src="js/example.js"></script>
</body>
</html> 在曾经使用div容器的地方，我们现在实现了更具描述性的标记。 <header> ， <nav> ， <section> ， <article> ， <aside>和<footer>元素完美地描述了它们的内容。 有关应在何时何地使用HTML5元素的更多详细信息，请查看 HTML5 Doctors必须说些什么。
现在，我们有了一个非常基本的页面模板，只要您始终牢记以下规则，就可以适应任何项目：
- 使用
<head>标记内的meta标记为搜索引擎提供有关您的网站的信息。 - 将CSS文件查询放在页面顶部
</head>标记之前。 - 将javascript查询放在页面底部
</body>标记之前。 - 编写CSS时，少即是多。 聪明地使用选择器-如果不需要，请不要为所有内容分配类或ID。
- 相同的规则适用于Javascript，如果您不打算进行复杂的Javascript交互，请考虑您是否真的需要使用Javascript库。
- 将div和其他标记元素保持在最低限度，不要用不需要它们的元素覆盖页面。
第5步： Sitemap.xml和Robots.txt
我们快完成了，仅剩2件事情将使您的网站搜索引擎更友好。
我确定您已经阅读了说明您应该拥有站点地图的文章。 我们将通过在网站的根文件夹中添加2个文件来扩展此内容，这将在搜索和索引网站和目录时为搜索引擎提供帮助。
首先， Sitemap.xml文件。 该文件仅是您可以按重要性顺序放置的文件和文件夹的摘要。 基本上，我们为搜索引擎完成了一半的工作。 我在下载包中包含了一个示例文件。 这是它的含义以及应该为网站更改的内容的说明。
对于每个链接/文件夹，您都会找到几行与此类似的代码：
<url>
<loc>http://www.example.com/</loc>
<lastmod>2011-08-31</lastmod>
<changefreq>daily</changefreq>
<priority>1.0</priority>
</url>用最简单的术语来说，XML Sitemap（通常称为Sitemap，大写S）是您网站上的页面列表。 创建和提交站点地图有助于确保Google知道您网站上的所有页面，包括Google正常的抓取过程可能无法找到的URL。 Google网站管理员工具
您可以找到 各种在线站点地图工具来为您生成站点地图，但是我发现这些生成器通常无法为您提供最好的工作，因此我更喜欢手动进行。
接下来，我们创建一个简单的robots.txt文件。 该文件的存在是为了添加机器人必须遵守的条件。 例如，如果您想告诉搜索引擎忽略页面或文件夹，则可以添加以下代码：
User-agent: *
Disallow: /category/design.html但是，通常您可以将文件留空。 Google提供 了关于如何禁止页面 的更好的解释 。
步骤6：注册您的网站
尽管只有在您的网站启动并运行后，我们的最后一步是使用 Google网站站长工具来注册您的网站。
注册后，您只需按照说明添加网站，并告诉Google在哪里可以找到sitemap.xml和robots.txt文件。 这些是获得结果的基本步骤，但是如果您想进一步发展，那么请查看 此出色的初学者关于如何使用更多功能 的演练 。
结论：
通过使用这个简单的模板，您可以在优化网站的SEO性能方面取得一个良好的开端。 排名和搜索引擎在搜索结果中显示站点的方式都可以通过您的一点努力而受到影响。
希望您喜欢本教程，感谢您的阅读！
翻译自: https://webdesign.tutsplus.com/articles/straightforward-seo-for-webdesigners--webdesign-3983
