Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
haizhilin2013 opened this issue May 22, 2019 · 7 comments
Open

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

haizhilin2013 opened this issue May 22, 2019 · 7 comments
Labels
html html

Comments

@haizhilin2013
Copy link
Collaborator

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

@haizhilin2013 haizhilin2013 added the html html label May 22, 2019
@rocky-191
Copy link

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

@xiangshuo1992
Copy link
Contributor

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

meta
title

nav
header
main
article
section
aside
footer

figure
picture
time
video
audio

@yxkhaha
Copy link

yxkhaha commented May 23, 2019

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

@tiyunchen
Copy link

厉害, 我都是div一路到头

@Konata9
Copy link

Konata9 commented Sep 16, 2019

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

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

@blueRoach
Copy link

meta
title
header
footer
section
article
nav

@chenshijin1
Copy link

通过标签语义化优化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
Labels
html html
Projects
None yet
Development

No branches or pull requests

8 participants