Skip to content

[html] 第37天 html5哪些标签可以优化SEO? #136

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第37天 html5哪些标签可以优化SEO?

Activity

rocky-191

rocky-191 commented on May 23, 2019

@rocky-191

meta信息中的title,description,keyword。尽量使用语义化的标签,不要都是div

xiangshuo1992

xiangshuo1992 commented on May 23, 2019

@xiangshuo1992
Contributor

跟标签语义化有关,从上往下:

meta
title

nav
header
main
article
section
aside
footer

figure
picture
time
video
audio

yxkhaha

yxkhaha commented on May 23, 2019

@yxkhaha
  • meta description
  • title
  • alt
  • strong
  • h1~h6
  • header
  • nav
  • section
  • aside
  • article
  • footer
  • figure
tiyunchen

tiyunchen commented on May 27, 2019

@tiyunchen

厉害, 我都是div一路到头

Konata9

Konata9 commented on Sep 16, 2019

@Konata9

优化 SEO 应该是可以给爬虫有比较明确的含义的标签。尽可能地不要使用 div 到底。

  • meta: meta 标签中的 keywords 和 description
  • h1-h6
  • nav
  • section
  • article
  • footer
  • header
blueRoach

blueRoach commented on Jul 8, 2020

@blueRoach

meta
title
header
footer
section
article
nav

chenshijin1

chenshijin1 commented on Dec 6, 2020

@chenshijin1

通过标签语义化优化SEO

  • H标签的使用

  <h1>是最高的等级,所以你需要准确确定每个页面最重要的内容是什么,要优化的关键词在哪里。以我们最常见的博客为例,博客首页罗列最多的通常就是最新博文,而最重要的应该就是博客的名称了,而后面最新文章的链接标题则可以使用<H2>或者<H3>,一般都使用<H2>,表示次级标题。

  • strong标签的使用

  • title 网站SEO标题

  • meta name="title" content="网站标题"

  • meta name="description" content="网站描述"

  • meta name="keywords" content="网站关键词"

  • a href="链接地址" title="链接说明"

  • img src="图片链接地址" alt="图片说明"

  • div id="copyright" 版权部分加上网站名称和链接

另外,HTML5专门添加页眉、页脚、导航、文章内容等跟结构相关的结构元素标签,也说明了语义化的HTML结构是html的发展趋势。

img

  • nav

可以帮助 UA 迅速获得导航内容,例如读屏器可以省去很多渲染直接跳到导航位置。

  • aside

可以表示与周围内容关系不太密切的内容 (广告),通常表现为侧边栏内容 (相关背景内容)、引述内容

  • header

通常是一组介绍性描述 (搜索框 / logo / …),网络爬虫知道诸如与之类的部分后可以非常简单的跳过它们,更好的定位网页内容

  • article

独立的文档、页面、应用、站点,可以单独发布、重用;可以是一篇帖子、一篇文章、一则用户评论、一个可交互的 widget

  • section

按主题将内容分组,通常会有标题 (heading)

并非「语义化的 div」

何时使用?

一个简单的评判标准:当你希望这个元素的内容体现在文档的提纲 (outline) 中时,用 section是合适的。

作者:Little菠菜菜链接:https://juejin.cn/post/6876826035946684424

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@Konata9@rocky-191@xiangshuo1992@blueRoach

        Issue actions

          [html] 第37天 html5哪些标签可以优化SEO? · Issue #136 · haizlin/fe-interview