前端SEO规范

管乐明
470 阅读5分钟

一、HTML规范

  1. logo

h1>a>img 这种结构

Title alt都加上

  1. Title,Keywords,Description标签（简称TDK或TKD）

l 符号全部使用半角

l 不允许出现空格和转义字符

  1. Meta标签

  1. H1标签

l 每个网页只能拥有一个

标签。

l

用来修饰网页的主标题，一般是网页的标题，文章标题，主要是用来部署主关键词。

尽量靠近在html中的标签，越近越好，以便让搜索引擎最快的领略主题。

l

表示一个段落的标题，或者说副标题，部署长尾关键词。

l

表示段落的小节标题，

效果跟Strong差不多，一般是用在段落小节。

l

-

基本很少用到，是告诉搜索引擎这些不是很重要的内容（多用了反而会被搜索引擎扣分）

注意：每张页面只有一个H1

  1. Img标签定义

l 增加alt属性以及title属性

l 不能把文字(尤其是关键字)作为背景图片

l 不包括广告管理类图片(例如百度广告系统)，翻页按钮等无内容图片

  1. A标签优化

A标签定义优化

l 增加title属性，title即该链接主题关键词

如xxxx

  1. Canonical标签

每个URL页面都要有，内容为页面的唯一静态化地址

  1. Alternate标签

适合网站多设备中断和多语言网站，在搜索引擎索引

例如：<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”m.youzu.com″ > 手机版

Google 多语言

  1. Nofollow标签

屏蔽搜索引擎抓取链接，比如：第三方网站链接，关于我们，联系我们，提交评论，在线客服等非产品链接。

  1. 尽量减少使用Ajax，JS，Flash，Iframe

这些代码对搜索引擎不友好，对于主要产品页面减少使用

l 翻页，tab页都不要使用Ajax

l 避免使用Iframe包含关键词正文内容

l 不包括广告管理，不包括about：blank的空页面

对于页面重要内容及翻页功能应去除Ajax，js，iframe，flash。注意：以上代码对搜索引擎不友好，若要使用，提前和SEO一起评估

说明：缓存Ajax

  1. Robots和Sitemap文件

每个网站必须配置Robots和sitemap文件

以下是robots.txt範本

User-agent: *

Allow: /

Sitemap:www.xxxx.com/sitemap.xml

注意：避免擅自修改站点根目录下robots及sitemap文件，如若开发或运维配置需要修改robots文件，必须与SEO团队确认

  1. 使用sprite来优化图片资源

Sprite”就是这样一种技术，它将许多图片组合到一个网格上，然后通过程序将每个网格的内容定位到画面上。

当页面加载时，不是加载每个单独图片，而是一次加载整个组合图片，这是一个了不起的改进，它大大减少了HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。

  1. 避免40x，5xx等错误,以及301重定向错误

页面不出现404页面，跳转同意使用301状态码进行永久重定向，禁止使用302跳转

  1. 其他常见错误

l 避免标签未关闭，不出现标签错误和非标准属性

l 标签嵌套层级尽量少，页面空白适当处理和删除

l 所有路径采用绝对URL路径

l 保证URL完整性，不要遗留http://，www.youzu.com

  1. 页面需符合W3C标准

遵循W3C标准

检测地址：validator.w3.org/

二、服务器规范

1. 减少HTTP请求次数

据统计，有80%的最终用户响应时间是花在前端程序上，而其大部分时间则花在各种页面元素，如图像、样式表、脚本和Flash等的下载上，减少页面元素将会减少HTTP请求次数，这是快速显示页面的关键所在。

2. 减少DNS查询次数

减少主机名可减少DNS查询的次数，但可能造成并行下载数的减少，避免DNS查询可减少响应时间，而减少并行下载数可能增加响应时间，一个可行的折中是把内容分布到至少2个，最多4个不同的主机名上。

3. 配置ETags（浏览器缓存）

ETags是用于确定浏览器缓存中元素是否与Web server中的元素相匹配的机制，它是比last-modified date更灵活的元素验证机制。

如果浏览器支持缓存，我们就不用重复下载网页资源，最简单的设置缓存方法是在响应头中添加相应的内容，包括：Expires header，Last-Modified等。

4. Gzip压缩文件内容

技术运营设置gzip

每张页面都需要使用gzip进行压缩

三、 前端 代码

1. 压缩页面元素

通过压缩HTTP响应内容可减少页面响应时间，从HTTP/1.1开始，web客户端在HTTP请求中通过Accept-Encoding头来表明支持的压缩类型，如：Accept-Encoding: gzip,deflate.

2. 把样式表置于顶部，JS置于底部

浏览器解析结构的时候，就已经可以对页面进行渲染，这样就不会出现，页面结构光秃秃的先出来，然后CSS渲染，页面又突然华丽起来，这样太具有“戏剧性”的页面浏览体验了，而对于脚本来说，脚本后面内容的顺序显示将被阻塞，因此把脚本尽量放在底部意味着更多内容能被快速显示。

3. 必须避免使用CSS表达式（Expression）

不要在页面内使用css expression（只有ie可识别）

4. 使用外部JavaScript和CSS

尽可能使用外部JS和CSS

5. 合并精简JS和CSS

合并JS和CSS，尽可能减少JS和CSS请求数

6. 剔除重复脚本，冗余代码，多余字体，非必要注释代码

在一个页面中包含重复的JS脚本文件会影响性能，即它会建立不必要的HTTP请求和额外的JS执行。

提示网页代码健壮性和运行效率

7. 避免重定向跳转

对于url必须跳转实现访问的必须使用301.除非seo需求提到，其他情况可以不使用。

因为跳转是一种耗费资源

avatar
文章
阅读
粉丝