WSG5
课本：
您用来标记页面的方法决定了它们是否可以被软件很好地读取，并且被搜索引擎很好地编入索引。网站所依赖的底层文件和目录的逻辑性和稳定性会影响其功能，以及其增长和扩展的潜力。
第五章
网站结构
网站的组成部分
尽管现在大多数网站都是使用网站内容管理系统（CMS）构建的，它可以让您远离组成网站的大部分代码，但仍然需要对基本代码和原则有深入的了解。
使用超文本标记语言（HTML）
以下部分介绍了HTML内容标记的一些核心原则，在撰写本文时，HTML的最新版本是HTML5，我们在这里介绍的示例使用HTML5约定。
语义标记
正确使用HTML是获得最大灵活性和投资回报网络内容的关键。从最初的起源看，HTML的设计是为了清楚地区分文档的层次轮廓结构（标题1，标题2，段落，列表等）和文档的可视化表示（粗体，斜体，字体，字体大小，颜色， 等等）。当使用标准HTML标签来传达意义和内容结构时，HTML标记被认为是语义的，而不仅仅是在浏览器中使文本看起来特定。
这种网络标记的语义方法是高效网页编码，信息架构，通用可用性，搜索引擎可见性和最大显示灵活性的核心概念。
文档结构
结构合理的HTML文档可能包含以下元素：
HTML文档结构（<head>，<body>，<div>，<span>）
文字内容
传达意义和内容结构的语义标记（标题，段落文本，列表，引文）
使用CSS进行视觉呈现以使内容看起来有一定的方式
视听内容（.gif，.jpeg或.png图形，媒体文件）的链接
交互行为（JavaScript，PHP或其他编程技术）
在格式正确的HTML中，所有网页代码都包含在两个基本元素中：
头（<head>…</head>）
身体（<body>…</body>）
<head>区域是您的网页向显示设备（网页浏览器，手机，平板电脑等）以及所有重要页面标题所在的位置声明其代码标准和文档类型的区域。页首区域还可以包含指向您的网站中许多页面可以共享的外部样式表和JavaScript代码的链接。
该<body>区域包含所有页面内容，对于视觉样式，编程和语义内容标记的CSS控制非常重要。页面主体中的区域通常用division（<div>）或span（<span>）标签进行功能分割。例如，大多数网页都具有页眉，页脚，内容和导航区域，所有这些页面都使用命名<div>标签进行指定，可以使用CSS进行寻址和视觉样式。
使用HTML5作为页面标记的标准方面有很多优势，其中包括：
与当前文档结构技术兼容，以及HTML5强大的新媒体功能。
与非HTML网页标记标准（如用于科学文档的Mathml和可缩放矢量图形（svg））的最大兼容性。
与新的内容标记和编程技术，内容管理系统以及其他将从HTML5标记标准中受益的不断发展的网络技术的未来兼容性。
内容结构
这些链接以及它们包含的替代文本（“alt”文本）或长描述（“longdesc”）链接对于通用可用性和搜索引擎可见性至关重要。
使用级联样式表（CSS）
级联样式表允许Web发布者保留使用语义HTML传达逻辑文档结构和含义的巨大好处，同时让图形设计师完全控制每个HTML元素的视觉显示细节。
CSS级联层次结构
CSS具有多个级别级别，从重要性和优先级级联，从所有页面共享的常规CSS代码，包含在特定页面文件中的代码，嵌入到特定HTML标签中的代码。常规页面代码覆盖共享站点代码，嵌入在HTML标记中的CSS代码覆盖常规页面代码。这种CSS优先级的级联级联允许您为整个网站设置非常一般的样式，同时允许您根据特定节或页面样式的需要覆盖样式。
跨多页共享CSS
例如，如果您<h1>在主文件中调整标题的印刷风格，<h1>整个网站中的每个标题都会更改以反映新外观。
CSS中“级联”的强大优势是内置于CMS程序（如WordPress和Drupal）所使用的主题中，但这两种程序还允许您通过创建主样式表来创建主题样式的自定义变体，以调整特定样式你正在使用的主题。例如，您可能对WordPress主题的外观和感觉非常满意，但可能希望所有标题都使用Tahoma字体而不是主题的内置Arial字体作为标题。大多数WordPress主题允许您添加自己的CSS来自定义主题的各个方面。例如，在WordPress仪表板中，请参阅菜单外观>自定义> CSS以访问自定义CSS列表。要将您网站中的所有标题更改为Tahoma，您可以将此行添加到自定义CSS列表中：
h1, h2, h3, h4, h5, h6 { font-family: Tahoma, sans-serif; }
PPT：
一、万维网范围里，网站被关键词联接，形成竞争/合作关系
二、网络的领结结构
三、适当取舍及安排
1、文字
2、链结
以强化语意融入WWW
四、
1、什么长尾理论？
指拥有足够的信息、图片、商品、宽广的渠道，数量多了自身的生产成本也下降了。看似没有很多人买的东西却还是有需求者。1个产品卖2件、100个产品卖200件、1万个产品…有可能已经超出了主流产品的市场份额。
2、举一个满足了长尾效应的例子？
亚马逊。电子商务时代改变了实体书店的场地局限。亚马逊书店拥有的各种书籍远大于一家实体书店的3万册，销售量极小的书籍数量巨大，加起来远远超过热门产品销售份额。
image.png
【干货】
一、选择长尾关键词的要点：
1.长尾关键词与你的网站内容有关
- 选择的关键词必须是用户有可能来查询的词
- 能满足用户要求
- 通过网站构思与网站业务相关的词
- 通过竞争对手来寻找关键词
- 通过搜索引擎相关搜索来确定长尾关键词
二、选择长尾关键词的拓展方法
1.从百度搜索框获取百度相关搜索
2.从用户需求拓展
3.百度百科搜索你的核心词，然后据此进行拓展
4.借助辅助工具如追词网、百度关键词工具、google关键词工具等
5.51、cnzz等统计器工具，能找到一定时间的热词
6.百度竞价后台系统推荐的相关关键词
7.地域拓展法。如SEO拓展为“北京SEO”、“嘉兴SEO”
8.季节拓展法。如“饮食”拓展为“夏季饮食注意事项”
9.职业拓展法。如“如何预防感冒”拓展为“教师如何预防感冒”
10.性别拓展法。如“减肥方法”拓展为“男士减肥方法”
11.用户思维习惯法。如哪里有、哪里买、哪里可以、怎样、如何、多少钱、哪里好、哪里便宜等。
12.参考百度搜索风云榜、SOSO风云榜等
13.搜狗拼音细胞库。最新热词可见。
五、三个切入點：
1、网站的组成部分�COMPONENTS OF A WEB SITE：
在您构建网站的页面和目录时, 對主要的界面和内容划分作出镜像對映。
image.png
注意：HTML5大纲算法
大纲是由节点元素生成的，而非标题元素。HTML5的新标签section、article、aside、nav会生成显性节点(explicit sections)，每个显性节点内部又有它自己的标题结构（当然也符合HTML4、HTML5大纲算法）。这也就是为什么HTML5允许多个h1存在的原因。
每个标题都会生成一个隐性节点(implicit section)，紧随其后的相对层级低的标题会成为它的子节点，层级相同或者更高的标题则会关闭这个节点并生成新的节点。
六、
文件命名规则
文件名称统一用英文字母、数字和下划线的组合，其中不得包含汉字、空格和特殊字符；命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。
a. HTML的命名原则
引文件统一使用index.htm index.html index.asp文件名（小写）。 各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称。例如： 关于我们 \ aboutus 信息反馈 \ feedback 产 品 \ product 。如果栏目名称多而复杂并不好以英文单词命名，则统一使用该栏目名称拼音或拼音的首字母表示。
9、b. 图片的命名原则
图片的名称分为头尾两部分，用下划线隔开，头部分表示此图片的大类性质 例如：广告、标志、菜单、按钮等等。
放置在页面顶部的广告、装饰图案等长方形的图片取名： banner
标志性的图片取名为： logo
在页面上位置不固定并且带有链接的小图片我们取名为 button
在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名： menu
装饰用的照片我们取名： pic
不带链接表示标题的图片我们取名： title
范例：banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg 鼠标感应效果图片命名规范为”图片名+_+on/off”。 例如：menu1_on.gif menu1_off.gif
10、文件存放位置规范
_Root cn 存放中文HTML文件 en 存放英文HTML文件
flash 存放Flash文件
images 存放图片文件
imagestudio 存放PSD源文件
flashstudio 存放flash源文件
inc 存放include文件
library 存放DW库（数据库）文件
media 存放多媒体文件
project 存放工程项目资料
temp 存放客户原始资料
js 存放JavaScript脚本
css 存放CSS文件
CSS优先级
image.png
内容管理系统�CONTENT MANAGEMENT SYSTEMS：
网页内容管理系统 (CMS) 是基于服务器的软件，它简化丶结构和管理网页 内容的创建和交付，提供了一个图形用户界面，允许用户创建网页和其他网页信息，而无需学习 HTML丶CSS 或其他类型的网页编码。内容管理系统比老式的静态网页手工编码具有强大的优势。了解 CMS 优点的关键是将内容与表示代码分离。这种内容和形式的分离比静态 HTML 网页更加灵活，其中内容嵌入在 HTML 标记和 CSS 页面样式的固定格式中。在 CMS 中，内容是从网页数据库中抽取的, 可以在许多不同的模板中呈现，在许多不同的排版中，以及多种显示设备，包括台式计算机丶笔记本电脑丶平板电脑和其他移动设备。
流行的内容管理系统
1选用两个开源产品 WordPress 和 Drupal 作为主要范例
几乎所有大型企业丶电子商务和其他企业网站都是使用某种形式的 CMS 创建和交付的。流行的开源内容管理系统，如 WordPress丶Drupal丶和 Joomla 是最广泛使用的 CMS 程序丶为个人, 政府, 大学, 和中小型企业构建网站。
网页内容管理系统
(如 WordPress 和
Drupal) 提供了一
个图形界面, 允许您
在不需要了解
HTML 标记语言的
情况下快速向页面
添加文本和图形。
image.png
较复杂的 CMS 软件提供了各种级别的编辑控制，以掌握对内容创建丶审阅和审批，以促进编辑工作流流畅进行。
image.png
选用WordPress 和 Drupal 作为范例原因：
可免费自行安装架设。对中等技术能力的人来说，下载和安装大约半小时以内
都有托管版本产品可以使用，在这两者的免费的托管帐户里面，都可以取用基本功能集。
WordPress也有很多功能，但更易上手，对非技术性的设计师和作家来说更平易近人
强烈建议您在其托管版本中花一点时间在 Drupal(drupalgarden.com) 和 WordPress(wordpress.com) 上，这是了解内容管理系统的最快方法。
Drupal 是典型较高级的 CMS 产品，可多种层次地结构组织内容丶编辑工作流, 以及以灵活度很高方式呈现内容
image.png
有数据库支持的内容管理系统的有力优势是能夠以多种不同的方式呈现相同数据。
image.png
搜索引擎优化 �SEARCH ENGINE OPTIMIZATION
搜索引擎结果：以百度为例
一、平台权重最重要：
1、 权重排在首位的是百度自身的推广平台。
① 百度推广：http://e.baidu.com/?refer=800
② 百度百科：搜索词汇、地名、名人等会出现在首页 http://baike.baidu.com/page/createindex?lemmaTitle=）
个人也可以创建词条，重点注意创建词条的真实和可靠性，同时遵守其他的规则。
③ 百度知道：一般问题式搜索会出现在首页（https://zhidao.baidu.com/ ）
image.png
④ 百度贴吧：搜索话题、明星、影视等会出现在首页。活跃度虽然比不上以前，但依然还是拥有海量的用户。（https://tieba.baidu.com/index.html）
⑤ 其他百度产品，如百度图片
image.png
二、紧跟在百度后的几个权重高的平台（包括新闻和社区平台，顺序不区分权重高低）：
a) 新闻类：搜狐、网易、新浪网、腾讯网；
这些平台的好处是都开放的自媒体，我们可以自己注册账号，免费发布内容，成本极低，而且能达到搜索特定的关键字把内容展示在百度搜索首页的效果。特别适合企业做新闻通讯稿的发布和初创企业打公关需求。
image.png
b) 社区：知乎、简书、豆瓣
知乎平台除了本身是一个知识分享大平台外，百度SEO做的也特别好，在上面发的高质量回答或文章都能在百度搜索中排在首页；
简书是一个文章平台
豆瓣高质量内容在百度拥有较高的权重，值得研究
image.png
什么是SEO
SEO（search engine optimization）搜索引擎优化
SEO主要工作包括：通过详细了解搜索引擎的工作原理、如何在浩瀚的网页流中爬取网页、如何进行索引以及如何确定某一关键词排名位置从而对网页内容进行科学的优化，使其符合用户浏览习惯，在不损害用户体验的情况下提高搜索引擎排名，从而提高网站浏览量，最终提升网站的销售能力或宣传能力的技术。
image.png
image.png
SEO的作用
通过搜索引擎引来足够的流量，进一步扩大品牌的知名度，使其得到小投入大回报。
力图让搜索引擎给网站带来大的流量，以使网站的业绩指标攀升，吸引投资者或收购等。
吸引在搜索引擎上搜索某一需求的精准客户，使他们了解并购买搜索的目标产品。如网店、销售型企业网站。
依靠搜索引擎流量，换取广告商的青睐使其投放一定程度的广告。如百度联盟。
常见SEO术语
网站分类目录
关键词
SERP（Search Engine Results Page）
有机列表
付费列表
PageRank
排名算法
蜘蛛（爬行器）
了解：通用的网络爬虫框架流程
1）首先从互联网页面中精心选择一部分网页，以这 些网页的链接地址作为种子URL；
2）将这些种子URL放入待抓取URL队列中；
3）爬虫从待抓取 URL队列依次读取，并将URL通过DNS解析，把链接地址转换为网站服务器对应的IP地址；�
4）然后将IP地址和网页相对路径名称交给网页下载器；
5）网页下载器负责页面内容的下载；
6）对于下载到 本地的网页，一方面将其存储到页面库中，等待建立索引等后续处理；另一方面将下载网页的 URL放入己抓取URL队列中，这个队列记载了爬虫系统己经下载过的网页URL，以避免网页 的重复抓取；
7）对于刚下载的网页，从中抽取出所包含的所有链接信息，并在已抓取URL队列 中检査，如果发现链接还没有被抓取过，则将这个URL放入待抓取URL队列；�
8）末尾，在之后的抓取调度中会下载这个URL对应的网页，如此这般，形成循环，直到待抓取URL队列为空。
常用搜索引擎指令：
Site指令：
查询某个特定网站的收录情况，如果结果有返回数据，表
明该网站已被收录，反之则未被收录。
eg：site:fuyingxiao.com
Link指令：
查外链指令。查询某个特定网站的外部链接，是一个主要获取排名和
权重以及网站PR值得主要因素。在雅虎和google中查询准确率较高。
eg: link:www.fuyingxiao.com
related指令：
查询和你的网站内容相关的网站，利用related指令可以很轻松的找到和你最相关的对手。只支持google搜索引擎。
eg：related:www.163.com
Allintext / intext 指令：
有效查询某个特定关键词在文章内容上出现的情况，发现最相关的网页和潜在链接对象。只支持google搜索引擎。
eg: allintext:减肥
Allinurl/inurl指令：
查询特定网页URL中包含的特定URL关键词，可单独使用，也可与其
他指令组合查找特定网页的内容。只支持google搜索引擎。
eg: allinurl:nba
site:www.sina.com.cn allinurl:nba
filetype指令：
搜索特定后缀的文件，如pdf、doc等。
eg: filetype:pdf
再细一点说搜索引擎优化的方法…
站内优化：1、架构策略。针对关键词设计好的网站架构，例如百度百科、豆瓣、京东商城。这个阶段是非常重要的，因为设计的网站架构、URL架构、内容架构决定了后面的SEO工作是否更容易。
�2、内容策略。需要思考什么样的内容是用户最需要、最喜欢的？纯粹从用户角度考虑内容。
�3、内链策略。考虑每个关键词需要多少内链支持，主要可以通过面包屑导航、自动内链、全站链接等方式提供内链。
站外优化
1、关键词策略。挖掘、分析、筛选关键词，整理关键词列表。
�2、外链策略。外链主要通过友情链接（包括首页和内页，例如58同城）、商业合作（例如在门户网站投放广告可以在其合作伙伴处添加链接）、软文（各种软文链接）、自然外链（做好链接诱饵，用户自然转发）来解决。
架构策略：元标签设计
<title>淘宝网 - 淘！我喜欢</title>
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" />
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！" />
<html lang="zh-CN">
如果缺少这个标签，意味着当蜘蛛进入你的网站时，需要多一道程序来分析你的网站是什么语言编码。加上即给蜘蛛减轻工作量。
<meta name=“Copyright” content=“版权标签”/>
上述几个都是网站中最核心的，很多大网站都只设上述几个标签，可能还会加入这个，让蜘蛛更有信任度。
这样设计的好处，一是能有效帮助蜘蛛快速判断网页编码的问题，节省蜘蛛的资源，使蜘蛛可以把更多时间花在爬取页面上；二是每个页面加上版权更能表明该页面的原创性，搜索引擎非常青睐原创的内容。
怎样设置一个合理的元标签需要通过你实际的考量决定，没有一成不变的规矩。
内容策略+关键词策略
image.png
image.png
了解你的产品
搜索引擎喜欢展现给搜索者什么东西？
搜索产品词大词：outdoor chiar------展现大型独立电商网站
搜索问题类词：the advantage of wooden chair(木头椅子的好处）-----展现比较多
为独立个人博客，问答型如雅虎问答（类似百度知道）
误区：outdoor chair（户外椅子） 属于 chair（椅子） 属于 furniture （家具）
你的网站是以outdoor（户外）为主的，但你在目录里添加一些优化
wooden chair（木头椅子）、 furniture （家具）的关键词。
用户：为了购买室内家具，在谷歌搜索wooden chair/furniture，但进入
了你的网站，发现你的网站整体定位和他的预期大不相同！
结果：谷歌发现你的网站里面存在的关键词让用户访问的深度非常低的话，那
么你的网站只有一个结果——在SERP中降权！
了解你的产品
定位好你的网站
剔除模糊无效关键词，才是真正有利于真正系统地优化你的网站。
在搜索引擎的关键词匹配中，一般分为三个模块：
绝对精准、相对模糊，完全模糊
完全模糊：wooden chair
相对模糊：outdoor chair
绝对精准：camping chair
外·链策略
image.png
image.png
image.png
几个常用的工具：
- 关键字查询工具：百度指数http://index.baidu.com/
- 关键字排行工具：百度搜索风云榜http://top.baidu.com/
搜狗热搜榜http://top.sogou.com/ - 网站统计工具：百度联盟
http://union.baidu.com/customerLogin.html?fromu=http%3A%2F%2Funion.baidu.com%2F - 百度链接收录：http://zhanzhang.baidu.com/linksubmit/url 做百度SEO的网站一定要收录！
- 综合类查询：站长工具http://tool.chinaz.com/
爱站网http://www.aizhan.com/
原生（NATIVE）丶网页（WEB）丶或混合（ HYBRID）
（完）
