玩转搜索引擎(网页的SEO)

目录

  • 玩转搜索引擎(网页的SEO)
  • 什么是SEO
  • 从head标签的meta标签下手
  • keywords
  • description
  • 两大电商网站
  • 从网页结构上
  • 什么是语义化
  • 常用语义化标签有哪些
  • 语义化的好处


什么是SEO

SEO(Search Engine Optimization):搜索引擎优化

为什么要SEO:简单来说就是,不花一分钱提高你网站的被搜索的概率

SEO的方法有很多种,今天来介绍从网页的结构上进行优化

从head标签的meta标签下手

俄罗斯搜索引擎入口 Yandex无需登录入口_H5

meta标签的两大提高搜索引擎搜索的扛把子:

  • keywords
  • description

keywords

它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时,会用这些关键字对文档进行分类,从而增加了网页的被搜索效率

语法:<meta name="keywords" content="关键1 ,关键2.。。关键n"/>

建议及注意:

  • 关键字最好是8个,而且每个关键字最好是不一样的切有关联
  • 如果没有关联的化,百度认为这个网页在作弊,严重的会被百度封杀

description

定义网页的描述信息

语法:<meta name=" description" content="定义网页的描述信息"/>

  • 描述不在网页中显示,一般是在120个之内

回到顶部 目录

两大电商网站

淘宝:

俄罗斯搜索引擎入口 Yandex无需登录入口_语义化_02

京东:

俄罗斯搜索引擎入口 Yandex无需登录入口_搜索引擎_03

从网页结构上

在以前的网站布局基本上都是div+css,这种布局方式虽然说简单易操作,但是就有一点没有语义,这样搜索引擎就不好爬取,到H5时代语义化就火了,我就研究研究h5的语义化标签

回到顶部 目录

什么是语义化

根据内容的结构化(内容语义化,选择合适的标签(代码语义化)编译开发者阅读和写出更好更优化的代码同时让浏览器的爬虫和机器很好得解析)

常用语义化标签有哪些

  • <header>:页眉通常包括网站标志、主导航、全站链接以及搜索框
  • <nav>:标记导航,仅对文档中重要的链接群使用。
  • <article>:定义外部的内容,其中的内容独立于文档的其余部分。
  • <section>:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分
  • <aside>:定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等
  • <footer>:页脚,只有当父级是body时,才是整个页面的页脚
  • <figure>:媒体元素,比如一些视频,图片等等(audio、video)
  • <main>:页面主要内容,一个页面只能使用一次。如果是web应用,则包围其主要功能。

具体的语义化标签可以查看MDN

也可以看HTML5和HTML4的布局区别

语义化的好处

  • 易于阅读,样式丢失的时候能让页面呈现清晰的结构
  • 提高用户体验,比如title,alt用于解释名词和图片信息
  • 有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重
  • 方便其他设备解析,如盲人阅读器根据语义渲染网页
  • 有利于开发和维护,语义更加具有可读性,代码更好维护,与css3关系更和谐

回到顶部 目录