优化实战 第 21 期 - 前端搜索引擎排名技巧(SEO)

700 阅读4分钟

应用的性能好坏直接影响到用户的体验,SEO 做的再好,脱离了性能优化一切也都是空谈,所以 SEO 和性能优化是相辅相成的。响应速度也是搜索引擎排序的一个重要指标

seo.jpeg

页面头部标签

  • 标题(30字以内)

    <title>淘宝网 - 淘!我喜欢</title>
    

    强调重点即可,重要的关键词出现不要超过 2 次,而且要靠前,不同页面的 title 要有所不同

  • 描述(150字以内)

    <meta name="description" content="淘宝网 - 亚洲较大的网上交易平台,提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品,同时提供担保交易(先收货后付款)等安全交易保障服务,并由商家提供退货承诺、破损补寄等消费者保障服务,让你安心享受网上购物乐趣!">
    

    对页面内容的高度概括,不可过分堆砌关键词,不同页面的 description 要有所不同

  • 关键字

    <meta name="keywords" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">
    

    告诉搜索引擎本页的重点、关键词,用英文逗号分隔

  • 总结

    代码顺序按照 标题 -> 描述 -> 关键字 依次

语义化的好处

  • 符合W3C规范

  • 代码结构清晰,方便阅读,有利于团队合作开发

  • 语义化代码让搜索引擎容易理解网页,有利于搜索引擎优化(SEO)

语义化内容标签

  • 超链接

    内部链接,要加 title 属性加以说明

    外部链接,要加 rel="nofollow" 属性,告诉蜘蛛无需追踪

  • 图片

    img 要加上 alt 属性加以说明

  • 表格

    标题使用 caption 标签

  • 标题

    h1 一个页面只可有一个,多用于包含 logo

    h2 模块标题

    h3 段落的小节标题

    h4, h5, h6 基本上不使用

  • 强调内容的重要性

    <em>强调文本</em>
    <strong>强调文本</strong>
    

    strongem 都表示强调,strong 显示为粗体,em 显示为斜体,且 strong 的强调程度要比 em 更高

  • 视觉上突出显示文本

    <mark></mark>
    

    如:搜索结果中高亮的关键词

  • 时间

    <p>文章发表于<time datetime="2019-08-28 20:00">2019-08-28</time></p>
    
  • 定义联系信息

    <address></address>
    

    也可定义 article 元素的作者信息,但不适用于嵌套的 article 元素

  • 代表一段独立的内容,经常与说明配合使用

    <figure>
      <!-- 图片、图表、表格等 -->
      <figcaption>标题/说明</figcaption>
    </figure>
    

    figcaption 元素必须是 figure 元素的第一个或者最后一个子元素

  • 换行

    br 只用于文本内容的换行

  • 版权符号

    输入法输入 'banquan',按序号选择版权符号

语义化结构标签

  • section使用场景

    <header></header>
    <section>
      <h2>标题</h2>
      <p>段落内容</p>
    </section>
    <section>
      <h2>标题</h2>
      <img src="./img/product.jpg" alt="图片说明">
    </section>
    <section>
      <h2>标题</h2>
      <p>段落内容</p>
    </section>
    <footer></footer>
    

    对页面中的内容进行分块,一个 section 元素通常由标题以及内容组成

    不推荐为那些没有标题的内容使用 section 标签

  • article使用场景

    <article>
      <header>
        <h2>标题</h2>
        <p>发表日期:<time datetime="2019-08-28 20:00">2019-08-28</time></p>
      </header>
      <p>文章内容段</p>
      <p>文章内容段</p>
    </article>
    

    它比 section 具有更明确的语义,代表一个独立的、完整的相关内容块,可以包含一个或多个 section

  • aside使用场景

    <aside>
      <h2></h2>
      <ul>
        <li></li>
        <li></li>
      </ul>
    </aside>
    

    独立于内容的一部分,且可以被单独的拆分出来而不会使整体受影响,常用于定义页面侧边栏

  • main使用场景

    <main></main>
    

    用来呈现文档或应用的主体部分,一个页面只能有一个 main 标签

  • header使用场景

    1、页面中的header

    <header>
      <h1 role="logo">
        <a href="/">文字Logo</a>
      </h1>
      <nav>
        <a href="/">首页</a>
        <a href="/product">产品介绍</a>
        <a href="/about">关于我们</a>
      </nav>
    </header>
    

    2、分块中的header

    <section>
      <header>
        <h2>标题</h2>
        <p>信息介绍</p>
      </header>
      <p>分块内容段</p>
    </section>
    

    3、文章中的header

    <article>
      <header>
        <h2>标题</h2>
        <p>发表日期:<time datetime="2019-08-28 18:00">2019-08-28</time></p>
      </header>
      <p>文章内容段</p>
    </article>
    

    article、section、aside、nav 都可以拥有自己的 header 和 footer

  • role属性的使用场景

    用来增强语义性,当现有的 HTML 标签不能充分表达语义的时候,可以借助 role 属性来说明

注意事项

  • 重要内容尽量靠前放

    搜索引擎抓取 HTML 的顺序是从上到下的,而有的搜索引擎对抓取的内容长度有一定的限制

  • 重要内容不要用JS输出

    搜索引擎不会抓取 JS 的生成内容

  • 其他

    页面结构尽量扁平化,目录结构不宜过深,最好不超过 三级,每级都有 面包屑导航,成树状结构分布。否则不利于搜索引擎抓取

    404 页面,不仅提高蜘蛛体验,也提高用户体验

    一起学习,加群交流看 沸点