以国外SEO商业站点seobook.com为案例(如图20.20所示),分析SEO过程中的网页设计以及SEO策略内容。

图20.20 seobook.com网站截图
20.5.1 seobook.com网页布局
打开seobook.com主页,去除页面内数据内容,保留布局代码如下:
<div id="header"></div>
<div id="nav"></div>
<div id="container">
<div id="content">
<div class="post"></div>
</div>
<div id="sidebar">
</div>
<div id="footer"></div>
效果如图20.21所示。在本例中定义的header容器,用于定义网站的logo;nav容器放置导航内 容;footer定义网站底部导航;container容器分成2个子容器,其中content容器用于放置网站主题内容,sidebar用于放置搜索引 擎;在content容器中的post子对象用于放置单个文件块。

图20.21 seobook网页布局
采用结构清晰的网页布局,有助于网络蜘蛛检索网页时区分主要内容和次要内容。
20.5.2 seobook.com导航设计
seobook.com的导航设计采用了文字导航配合背景图片的方式,样式表导航部分的代码如下:
#nav {
BACKGROUND: url(images/span_bg.gif) repeat-x; MARGIN-BOTTOM: 45px; WIDTH: 100%; HEIGHT: 58px; TEXT-ALIGN: center
}
#nav UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 835px; PADDING-TOP: 21px; LIST-STYLE-TYPE: none
}
#nav UL LI {
FLOAT: left; FONT: 2.4em 'Trebuchet MS', Verdana, Arial, sans-serif; HEIGHT: 29px
}
样式中定义了id选择器nav的样式,以及nav容器元素ul和li的样式,代码如下:
<div id="nav">
<ul>
<li><a href="http://www.seobook.com/buy-now.shtml">book</a></li>
<li><a href="http://www.seobook.com">blog</a></li>
<li><a href="http://tools.seobook.com">tools</a></li>
<li><a href="http://www.seobook.com/glossary/">glossary</a></li>
<li><a href="http://www.seobook.com/conferences/">events</a></li>
<li><a href="http://video.seobook.com">videos</a></li>
<li><a href="http://www.seobook.com/archives.shtml">archives</a></li>
<li><a href="http://www.seobook.com/rf/">aff</a></li>
<li><a href="http://www.seobook.com/about.shtml">about</a></li>
</ul>
</div>
导航效果如图20.22所示。
![]()
图20.22 seobook.com导航
seobook.com使用了CSS+DIV方式,如上面的代码所示,导航部分结构很清晰,这有利于网络蜘蛛识别并抓取下级页面。
20.5.3 seobook.com的图片处理
在seobook.com中仅用了少量的Gif图片作为网页的局部背景和小图标,虽然这种方式牺牲了部分视觉效果,但提升了网页访问速度。
seobook.com定义网站logo采用了一种较特别的方式,将网站logo作为id选择器的背景。代码如下:
#header {
BACKGROUND: url(images/logo.gif) no-repeat; MARGIN: 0px auto; WIDTH: 850px; HEIGHT: 169px; TEXT-ALIGN: left
}
在header对象中的链接方式如下所示:
<div id="header">
<a href="http://www.seobook.com" title="Search Engine Optimization Book."></a>
</div>
这种方式的好处是:在保证各个分页都有指向首页的链接情况下,即使图片因网络影响加载很慢或无法加载也不影响SEO效果。
20.5.4 seobook.com的主题和关键字分析
虽然seobook.com的网页主题定义,并没有严格按“主题_栏目名称_网站名称”的方式命名,但可以看得出标题中始终体现了热门关键字“SEO”,代码如下:
<title>Aaron Wall's SEO Book.com</title>
<title>Buy The #1 Ranked SEO Book Today! </title>
<title>About Aaron Wall of SEO Book.com</title>
<title>Free SEO Tools & Search Engine Optimization Software</title>
<title>Search Engine Marketing Glossary - SEO & SEM Industry Dictionary</title>
<title>The SEO Conference Calendar</title>
<title>SEO Videos</title>
<title>Aaron Wall's SEO Book.com | The Archives</title>
把每页的主要内容作为重点关键字,所以seobook.com关键字定义策略采用的是“热门关键字+重点关键 字”的方式。为了进一步验证这一策略,在英文google.com中输入关键字“seo videos”进行搜索,结果seobook.com出现在搜索的第一名。如图20.23所示。

图20.23 Google搜索结果
20.5.5 seobook.com的站点地图
seobook.com也专门针对搜索引擎,建立了站点地图文件,如图20.24所示。
站点地图(sitemap)有利于搜索引擎快速抓取站点内的网页。Google的sitemap协议xml代码如下:
<?xml version="1.0" encoding="UTF-8"?>
< urlset xmlns="http://www.google.com/schemas/sitemap/0.84">
< url>
< loc>http://www.example.com/</loc>
< lastmod>2005-01-01</lastmod>
< changefreq>monthly</changefreq>
< priority>0.8</priority>
</url>
</urlset>

图20.24 seobook.com站点地图
协议说明:
loc:页面链接地址。
changefreq:页面\更新频率。
lastmod:页面最后修改时间
priority:页面的优先级
通过本章的介绍,相信读者会对SEO搜索引擎优化有一个全面的了解。赶快行动起来,让你的网站名列榜首吧!