zoukankan      html  css  js  c++  java
  • 前端相关的seo技术

    相信大部分的前端开发人员应该深知seo对我们的重要性,所以个人认为平台在开发初期就应该要考虑好seo优化的问题,不然做出来的页面,就算是效果很炫,功能很强,但是对搜索引擎也不友善。如果等到成熟时期再来调整这个问题,既费时又费力。

    最近被seo工作人员教育一番后,本人秉着学习的态度,好好补了一补seo和技术相关的知识。

    1、简化代码结构,更利于搜索引擎抓取页面内容。相信现在大部分的前端开发人员都已经脱离了table布局的方式,而采用了div+css的方式布局。不过在表格的表现模式下面,用table还是要比div方便简洁一些。同样,让页面上的源于尽量精简,css,js都采用外链模式。例如:如下的代码

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快递选择控件_demo</title>
    <link href="dist/css/bootstrap.css" rel="stylesheet" media="screen">
    <link href="css/express-picker.css" rel="stylesheet" media="screen">
    </head>
    <body>
    <div class="container" style="min-height: 500px;">
       <h1>Express Picker</h1>
        <label for="expressPicker">快递公司</label>
        <div id="renderTo" style="position:relative;">
            <input id="expressPicker" type="text"> 
        </div>
    </div>
    </body>
    </html>
    <script src="jquery-1.10.2.min.js"></script>
    <script src="dist/js/bootstrap.js"></script>
    <script src="js/express-picker.js"></script>

    2、尽量使html得结构语义化。虽然语义化的HTML属于WEB标准化范畴,但对于一个全面的SEO来说,使用标准化的网页结构,对SEO是有百利而无一害的,而WEB标准化就必须谈到语义化的HTML。具体标签的语义化对SEO的优化,下一篇继续。例如:

       <em>、<strong>这两个标签对SEO有着较大影响效果,适当使用它们,可使你的网页增色不少。<em>、<strong>与Hx一样,其区别也 在于重要性不  一样。<em> 表示强调,而<strong>意为重点强调,较em更重一些。在SEO时,我们可以将最重要的关键词用strong标记,对第二重要的用em标记。

    3、链接最好加上title,根据需要加上rel的nofllow值。链接一定要加上href属性。对

    于重要的导航链接,不可用onclick事件来代替href,做过SEO优化的人员都知道,蜘蛛目前对于js的支持很差,基本无法读取里面的链接地址。

             4、图片应该加上alt说明,蜘蛛不认识图片上的内容,只能通过alt属性来判断,而对于具有说明意义的图片,不应用作背景图,应该用img标签。例如:<img src=”okdi/bg-name.png” alt=”****站点名称”/>

             5、每个页面只能出现一次H1标签,H2标签可以多次:H1权重很高,普遍认为仅次于title,一般资讯详情页的标题、商品详情页的标题,都放在H1里。

             6、重要的内容要优先加载,通过css的样式来控制相应的样式。文档的顺序读取优先放重要内容。例如:navigation视觉上是在前面,而content才是优先加载的。

       

    <html>
    <head>
    <style>
    #navigation {position: absolute;top: 10px;left: 50%;width: 800px;margin-left: −400px;text-align: left;}
    #content {position: absolute;top: 150px;left: 50%;width: 800px;margin-left: −400px;text-align: left;}
    body {    text-align: center;    min-width: 600px;}
    </style>
    </head>
    <body>
    <div id="content">content<!-- SEO optimized content text goes here.--></div>
    <div id="navigation">navigation<!-- navigational elements, ads go here--></div>
    </body>
    </html>

             7、除首页外别的页面最好要加上面包屑型导航,导航结构一定要清晰。

             8、做好404页面,一般会加首页链接及错误提示,并测试其返回状态码为404:1、用户体验友好,可以留住用户,不至于直接关闭页面;2、蜘蛛友好,可以返回抓取其他页面。

             9、网站结构呈扁平状树型,目录结构不宜过深,每个页面离首页最多点击不超过3次,过深不利于搜索引擎的抓取。

             10、有一些SEO作弊的技巧,比如display:none,position:absolute;以及overflow:hidden等。

  • 相关阅读:
    第二次作业
    第一次作业——结合三次小作业
    第一次个人编程作业
    uva 10288 gailv
    牛客网第9场多校E(思维求期望)
    hdu6415 记忆化搜索或找规律
    hdu6395 (矩阵快速幂+分块)
    hdu6396(思维+输入挂)
    6354 Everything Has Changed
    牛客网暑期ACM多校训练营(第七场)Bit Compression
  • 原文地址:https://www.cnblogs.com/kaisela/p/3993555.html
Copyright © 2011-2022 走看看