从前端角度浅谈代码对SEO的影响!

写在前面:我们经常提到的“前端”,即“HTML、CSS、JS”的总称。HTML是超文本标记语言,结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。CSS是层叠样式表,顾名思义就是用来控制网页标签的样式,决定网站的视觉效果。JS是一种直译式脚本语言,简单的用途就是控制网页的行为,用来给HTML网页增加动态功能。

小的总结:

  • HTML —— 结构层(控制页面结构);
  • CSS —— 样式层(控制页面样式);
  • JS —— 行为层(控制页面行为)。

具体示例:

01.HTML:

HTML实例

02.CSS:

CSS实例

03.JS:

JS实例

正文内容:通过上面的简单介绍,想必大家也会觉得:其实前端真正对SEO比较有影响作用的还是HTML。

那么我们从几个详细的角度来讨论HTML对SEO的影响:

  1. 性能角度:一个网页的性能主要涉及到其“加载速度”和“浏览流畅度”,主要解决方案有:减少页面请求、CDN加速、精简代码、压缩传输、引用新框架等;
  2. 结构角度:HTML5版本相较于之前版本最明显的区别就是引入大量语义化标签,所谓“语义化标签”?顾名思义就是直接通过标签所用的单词意思就能知道这个标签包裹的内容范围属于什么。HTML头部<meta>标签大概了解即可,主要用于声明网页的语言、编码格式、相应模式、相关版权等。

接下来,举例介绍几个比较“流行”使用的HTML语义化标签:

01.<header>定义了站点的头部信息,也就是页眉,一般放置网站的站点名称以及LOGO和导航栏。搜索引擎更容易识别站点的类型。

02.<nav>定义导航链接,也就是栏目或者频道的链接。搜索引擎可以更好了解网站的信息架构,分类等。良好的信息架构,更有利于蜘蛛的爬行和权重的分布。

03.<footer>定义了底部信息,也就是页脚。放置页脚导航,一些比如公司介绍,联系我们之类的信息。一般来说对网站比较不重要,有可能搜索引擎会降低其位置的权重。

04.<section>该元素用来表示网页中不同的分区。优势体现在每个部分都可以有其独立的HTML标题。这可以让搜索引擎更好的了解网页的结构是如何划分的。搜索引擎可能会根据网页中的<section>标签找出其信息架构。(同左撇子)

05.<article> 定义文章区域,可以更有利于搜索引擎识别网页的内容以及判断相关性。,

06.<aside>定义页面内容之外的内容,在左侧或右侧边栏。比如知乎右侧的“相关问题”就属于<aside>区域。aside标签的文字信息与article标签区域的文字信息最好是相关。可能会影响到该页面和目标页面的排名。

还有一些小标签SEO也会·识别:<tag>标签顾名思义就是文章标签词、<time>标签顾名思义就是页面发布时间、<audio>定义音频 、<video>定义视频 等等 … …

最后简单提一下几个要点:

  • 一个页面要将<H1>标签数量控制到一个(最好是包裹页面大主标题、等有一定权重后,可以包裹logo强调品牌),文章段落二级标题最好加上<H2>。
  • 编辑产品、资讯详情页的时候,“文章摘要”、“标签”要着重构思编辑,因为将直接影响到页面的SEO,最好是在编辑的时候就填好,精准。不要拖到后面再修改。
  • 页面的文章内容板块最好用<article>标签包裹,不用担心兼容性问题,浏览器不能识别的标签会直接输出内容,不会对页面显示造成影响,而且现在主流浏览器对HTML5新的语义化标签兼容性都很不错。
  • 编辑文章的时候,可以适当添加相关关键词的站内链接,提升网站的内链结构。
  • 内容关键词加黑标签请用<b>标签(strong标签可以用来强调具体页面内容)。B标签往往用在关键词上,一个页面只要加2-5次就差不多了,具体还要根据页面大小而定。
  • 页面配图的时候记得加“Alt”属性,有利于站内图片被搜索引擎的检索,对提升网站的曝光度有一定作用,同时也对页面的seo排名有一定影响。
  • 借鉴相关文章时,如果涉及到内容复制粘贴,切记勿将<iframe>标签也复制过来了,内容本身的一些无关内外链接可以删除。
  • 网站添加“面包屑”导航也有利于搜索引擎的爬行,更利于页面的抓取和索引效率。

写在最后:最后简单提几点对SEO优化有助的几点:网页页面链接伪静态(一个好的链接结构,可以清晰指导搜索引擎明确网页主体内容),制作网站地图(sitemap.html/xml)并提交给站长平台(对页面收录有直接影响),根据网站后台系统编辑对应的robots.txt(引导搜索引擎对网站进行有效抓取),网站结构扁平化(目录和内容结构最好不要超过3层,如果有超过三层的,最好通过子域名来调整和简化结构层数)。

原文链接:#厦门SEO https://seo.quxingdong.com/40.html

原文链接:https://seo.quxingdong.com/40.html

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏比原链

Derek解读Bytom源码-孤块管理

Gitee地址:https://gitee.com/BytomBlockchain/bytom

7410
来自专栏用户2442861的专栏

相似图片搜索的原理

你输入网片的网址,或者直接上传图片,Google就会找出与其相似的图片。下面这张图片是美国女演员Alyson Hannigan。

36310
来自专栏比原链

Bytom交易说明(账户管理模式)

API接口 build-transaction,代码api/transact.go#L120

7410
来自专栏用户2442861的专栏

朴素贝叶斯分类器的应用

本文介绍朴素贝叶斯分类器(Naive Bayes classifier),它是一种简单有效的常用分类算法。

15630
来自专栏用户2442861的专栏

教你阅读Python开源项目代码

作者:董伟明 链接:https://zhuanlan.zhihu.com/p/22275595 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,...

73110
来自专栏比原链

Derek解读Bytom源码-protobuf生成比原核心代码

Gitee地址:https://gitee.com/BytomBlockchain/bytom

13210
来自专栏用户2442861的专栏

tesseract-ocr 实现图片识别功能

http://blog.sina.com.cn/s/blog_56d988430102w37c.html

79110
来自专栏林冠宏的技术文章

全面总结: Golang 调用 C/C++,例子式教程

Golang 调用 C/C++ 的教程网上很多,就我目前所看到的,个人见解就是比较乱,坑也很多。希望本文能在一定程度上,做到更通俗明了。

76920
来自专栏用户2442861的专栏

Java 程序员们值得一看的好书推荐

作者:mdcc 链接:https://zhuanlan.zhihu.com/p/23444919 来源:知乎 著作权归...

30720
来自专栏跟着阿笨一起玩NET

分表处理设计思想和实现[转载]

分表是个目前算是比较炒的比较流行的概念,特别是在大负载的情况下,分表是一个良好分散数据库压力的好方法。

12610

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励