请使用firefox,chrome等最新浏览器浏览本站。

前端开发规范-html规范及SEO优化规范

html5 阿豹 652次浏览 1个评论 扫描二维码

网站SEO优化规范

1.title(标题)

标题前15字最重要,采用倒序,用英文逗号隔开。出现关键字2-3个

    足球比分预测,足球魔方,情报市场-足球魔方官网

2.keywords(关键字)

关键字使用英文逗号隔开

    足球比分预测,足球魔方,情报市场,足球理财

3.description(描述)

建议80字以内,尽量涉及到keywords中的关键字。内部符号使用中文符号。

    足球魔方由国内资深专家在运用足球魔方系统基础上融合各自丰富的经验和知识《足球魔方》节目每周五六日伴随英超赛程于高清新视觉频道直播,欢呼吧网站随时点播。

4.a标签使用

必须告诉搜索引擎这个链接是什么!!因此必须加上title属性

<a title="欢呼吧官网" href="http://www.huanhuba.com" class="" id="" >欢呼吧官网</a>

5.img标签使用

添加alt描述,方便搜索引擎知道这张图片描述的内容,也有利于在图片搜索结果中获得一个好的排名。

<img src="icon.jpg" alt="足球魔方icon">

5.h1-h6标签的使用

不论任何页面,h1标签只能出现一次,它是当前页面的主标题,权重最高,对蜘蛛的吸引力是最强的。再往下就是h2、h3、h4、h5、h6这些副标题了,所强调的重点也是递减的,当然,它们的出现频率没有明确限制。

6.strong标签的使用

strong标签对关键词的强调作用仅次于H标签,用于加粗段落标题或是重点关键词

7.网站底部添加版权信息

网站底部版权部分的权重越来越高了,在版权部分加上网站名称和链接或是强调一些关键词是很有必要的,不要落个头重脚轻的感觉,让搜索引擎感觉很不舒服。

<div id="copyright">版权部分加上网站名称和链接或关键词</div>

8.重要内容莫用js输出

搜索引擎不会读取js里面的内容,重要的内容必须放在html内

9.样式调用使用class

页面样式使用class调用,如果涉及到js部分可以添加id

pc端html统一使用以下模板:

<!DOCTYPE html>
<html>
    <head>
        <title>网站标题</title>
        <!--声明文档使用的字符编码-->
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <!--网站关键字及描述,利于seo-->
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <!-- 启用360浏览器的极速模式(webkit) -->
        <meta name="renderer" content="webkit">
        <!--网站左上角显示的icon,大小为32*32-->
        <link href="favicon.ico" rel="icon" type="image/x-icon" />
        <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
    
    </head>
    <body>
       
    </body>
</html>

移动端html统一使用以下模板:

<!DOCTYPE html>
<html>
    <head>
        <title>网站标题</title>
        <!--声明文档使用的字符编码-->
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <!--网站关键字及描述,利于seo-->
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <!--启用viewport-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <!--启用WebApp全屏模式-->
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <!--ios添加到主屏幕的标题-->
        <meta name="apple-mobile-web-app-title" content="标题" />
        <!--解决iOS4.3版本中safari对页面中5位数字的自动识别和自动添加样式-->
        <meta name="format-detection" content="telephone=no" />
        <!--禁止Android自动识别页面中的邮件地址-->
        <meta name="format-detection" content="email=no" />
        <!-- 启用360浏览器的极速模式(webkit) -->
        <meta name="renderer" content="webkit">
        <!--网站左上角显示的icon,大小为32*32-->
        <link href="favicon.ico" rel="icon" type="image/x-icon" />
        <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <!--ios添加到主屏幕的icon(为了兼容所有ipad,ipod,iphone,以及Retina。需要57*57, 72*72, 114*114, 144*144, 180*180五种尺寸的icon)-->
        <link rel="apple-touch-icon-precomposed" href="57_57.png" />
        <link rel="apple-touch-icon-precomposed" sizes="72×72" href="72_72.png" />
        <link rel="apple-touch-icon-precomposed" sizes="114×114" href="114_114.png" />
        <link rel="apple-touch-icon-precomposed" sizes="144×144" href="144_144.png" />
        <link rel="apple-touch-icon-precomposed" sizes="180×180" href="180_180.png" />
    
    </head>
    <body>
       
    </body>
</html>

喜欢 (12)or分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到
(1)个小伙伴在吐槽
  1. 你的博客确实好,三天不来受不了!
    diouna2016-07-12 08:19 回复