前端进阶系列(一):SEO和HTML语义化

news/2024/4/28 12:58:58/文章来源:https://blog.csdn.net/weixin_33868027/article/details/88713929

基本概念

SEO:(Search Engine Optimization)意为搜索引擎优化。搜索引擎优化是一种利用搜索引擎的搜索规则来提高目的网站的自然排名的方式。说白了就是对品牌的自我宣传,从而获取收益。

HTML语义化:根据内容的结构的语义化,选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时利于SEO优化。

使用SEO和语义化的目的

前面也做了基本的阐述:

  • SEO就是为了对品牌的自我宣传,从而获得收益;
  • 语义化的目的:

    • 在没有css的情况下,页面也能呈现出很好的内容结构,代码结构;
    • 提升用户体验:例如title、alt用于解释名词和解释图片信息;
    • 有利于SEO优化:和搜索引擎建立良好的沟通,有助于爬虫抓取更多的有效信息,爬虫依赖于标签来确定上下文和各个关键字的权重;
    • 方便其他设备解析如屏幕阅读器、盲人阅读器、移动设备;
    • 语义化更据有可读性,便于团队开发和维护。

语义化和SEO的重要性

Google、Yahoo、Bing 约定,对 http://schema.org 所列出来的标签进行解析。

原因其实很简单,因为schema标签对搜索引擎很重要。
目前,搜索引擎的发展趋势是全能化,简单化,让用户在最短的时间里获取到想要的信息,让用户在点击搜索结果之前就获取到足够的信息进行判断。

比如Google general search,Google会根据你搜索的关键词推荐网页、新闻、图片、视频、音乐、商品、地图、本地结果、实时结果等等。

比如Google onebox,Google会根据某些特定的指令,直接给出针对性的结果,现在在搜索引擎可以直接查天气,查航班。

还有前段时间Google推出的网站截图预览,snippets lists等等。

Google的目标是要整合所有资源,让用户能方便获取到。资源有很多种,文字目前搜索引擎可以完全识别到,但是图片、flash、音乐、视频搜索引擎不能识别或只能识别一小部分,所以以目前的技术,尚不能整合网站上所有呈现出来的资源,所以需要用户进行配合。

我觉得这就是语义化标签出现的意义吧。

搜索引擎希望每个网站都把不同的资源标记出来,并打上搜索引擎容易识别的标签,利于搜索引擎进行判断归类,并在搜索结果中更好的呈现出来。

从SEO角度来看,对搜索引擎重要的就是对SEO重要的。

网站如果按照schema上的规则进行重写代码,方便了搜索引擎对信息的抓取,对网站内容在搜索结果中的呈现会有很好的帮助,能够适应搜索引擎的发展趋势。也许对某些关键词排名不会有明显的效果,但是从长远来看,对于从搜索引擎获取流量应该有不小的帮助。

HTML5的革新—语义化标签

html5布局

W3C定义了这些语义标签,不可能完全符合我们有时的设计目标,就像制定出来的法律不可能流传100年都不改变,更何况它才制定没多久,不可能这些语义标签对所以设计目标的适应。只是一定程度上的“通用”,我们的目标是让爬虫读懂重要的东西就够了。

结论:不能因为有了HTML 5标签就弃用了div,每个事物都有它的独有作用的。

参考文章:

  • 理解HTML语义化
  • HTML 5的革新——语义化标签(一)
  • 标签语义化对 SEO 来说有多重要?重要性体现在哪里?

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_760818.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

自学-CAD零基础视频教程网站

CAD是一款专业设计应用软件,主要用在环境艺术设计,土木工程,水利工程等专业,用来做效果图、三维设计、平面布置规划设计。问题来了,cad学习起来难吗?对于初学当然是很困难的,操作上难度不大&…

简单epoll多线程服务器 - - ITeye技术网站

简单epoll多线程服务器 - - ITeye技术网站简单epoll多线程服务器 博客分类&#xff1a;C/C学习Epollthreadpoll.cpp代码 /* Linux 2.6 x86_64 only*/ #include <pthread.h> #include <string.h> #include <stdlib.h> #include <unistd.h> …

VS2013自带的Browser Link功能引发浏览localhost网站时不停的轮询

Browser Link是连接VS和浏览器之间的通道。有了这个特性&#xff0c;web程序就能够和VS交互传递数据。这个特性在VS2013中是默认开启的。当开启了Browser Link&#xff0c; web程序运行的时候&#xff0c;就会注册一个HttpModule到asp.net的生命周期中&#xff0c;这个HttpModu…

PrestaShop 网站后台配置(八)

转载请注明出处&#xff1a;http://www.cnblogs.com/zhong-dev/p/4943043.html 网店版本 Prestashop v1.6 使用 谷歌的 site:www.millechic.com 方式查询网站&#xff0c;结果中有这样的描述&#xff1a;红框中显示店铺程序&#xff0c;如果想修改&#xff0c;则找到 Themes -…

CentOS 7系统如何搭建Magento电子商务网站?

本文主要说明如何在阿里云ECS实例上搭建Magento电子商务网站&#xff0c;使用的操作系统为Linux CentOS 7.2 64位。 适用对象 适用于熟悉ECS&#xff0c;熟悉Linux系统&#xff0c;刚开始使用阿里云进行建站的用户。 资源 本文描述的操作涉及的Linux ECS实例配置包括&#xff1…

想要成为python大神吗,这17个老司机收藏的国外免费学习网站不可错过哟!

前言1.用Python编写代码一点也不困难。事实上&#xff0c;它一直被称赞为最容易学习的编程语言。 如果你想学习Web开发&#xff0c;python是一个很好的开始&#xff0c;即使你想玩游戏&#xff0c;也有很多资源可以用python开发游戏。 许多程序员从Python开始他们的编程之旅&am…

想知道今天搜索引擎收录了你的网站吗?

SEO Helper添加了GOOGLG 百度当日收录查询功能&#xff0c;用户们可以在站长工具下的当日收录查询这个选项中找到这个功能。 通过该功能用户可以很方便的了解到网站的在搜索引擎中的搜录情况 GOOGLG 百度当日收录查询的具体使用情况 选择当日收录选项&#xff0c;查询地址为www…

好用的思维导图制作网站以及编辑思维导图操作方法介绍

思维导图的由来是由英国教育学家东尼.博赞发明的一种将思维形象化的展示图表&#xff0c;受到很多人的关注&#xff0c;思维导图对思维能力&#xff0c;逻辑能力以及组织能力都有很大的帮助&#xff0c;随着移动互联网的发展&#xff0c;现在网络上有很多制作思维导图的软件&am…

网站分析数据的三种收集方式详解

原文转载&#xff1a;http://www.uml.org.cn/jmshj/201611074.asp?artid18615 回顾网站数据分析历史&#xff0c;从“您是第***位来访用户”到现在百家齐放的专业工具提供商&#xff0c;网站分析已经逐渐发展衍化成一门科学。但面对形态各异的分析数据&#xff0c;很多人仍然困…

建站系统中用户个性化页面的实现

2019独角兽企业重金招聘Python工程师标准>>> 一个建站系统&#xff0c;如果想要在政府网站中使用&#xff0c;个性化页面通常是一个评测指标&#xff0c;所以无法避免&#xff0c;必须面对。 从技术层面讲&#xff0c;一旦涉及个性化&#xff0c;就会引入cookie&…

建立社交网站(Social network)的WordPress的三大顶级插件(译)

面试的时候被问到如何使用CMS建设社交网站&#xff0c;完全一头雾水&#xff0c;然后去google、百度了&#xff0c;发现可以使用Drupal或Joomls或WordPress快速建立&#xff0c;特别是WordPress&#xff0c;有一些建设社交网站的现成插件 本文翻译自&#xff1a;http://wpmu.or…

网站迁移--Tomcat为前端的网站迁移

1.修改tomcat server.xml的端口8080改成80.2.Server.xml添加&#xff1a;<Host name"localhost" appBase"webapps"unpackWARs"true" autoDeploy"true"xmlValidation"false" xmlNamespaceAware"false"><…

在IE9中为你的网站自定义JumpList

Windows7允许你将任何一个应用程序固定到Windows状态栏以方便日后使用&#xff0c;你可以将这个功能看作是快捷方式的一种升级&#xff0c;毕竟&#xff0c;它比快捷方式看起来要人性化许多。这是微软在给Windows7设置的许多人性化的小功能中的一个亮点&#xff0c;相信许多使用…

探讨国外网站设计动用的成本,网页设计师必看

【摘 要】我们都承认国外的网站设计价格高&#xff0c;同样一个看似简单的网站价格是国内几倍或者数倍。通过此文&#xff0c;希望国内的网站设计师同行稍稍静下心来&#xff0c;不要浮躁... 同样是一个网站设计&#xff0c;国外的设计却蕴涵了设计背后的更多东西&#xff0c;…

安全狗云备份、服云、网站安全中心web端全面更新

2019独角兽企业重金招聘Python工程师标准>>> 近日&#xff0c;安全狗对web端安全狗服云、云备份、网站安全中心进行了全面的升级更新&#xff0c;将为安全狗的用户朋友们带来全新的、更好的体验。 之前有很多用户表示能否用人民币 购买空间&#xff0c;用安全…

给网站添加浏览器标题图标favicon.ico

2019独角兽企业重金招聘Python工程师标准>>> 嘿嘿&#xff0c;比较简单&#xff0c;直接贴代码了(常见的浏览器如IE、Firefox、Chrome都适用)&#xff1a; <head><link rel"icon" href"img/favicon.ico" type"image/x-icon"…

新手学习在Ubuntu 14.04搭建Javaweb网站(1)--设置root密码

2019独角兽企业重金招聘Python工程师标准>>> 1.使用VMware安装了Ubuntu 14.04 x64位版&#xff0c;VMware根据ISO识别出是安装的Ubuntu&#xff0c;所以使用VMware Easy Install&#xff0c;安装的时候要会要求输入账号和密码 2.安装完成后&#xff0c;使用创建的账…

分析网站配色的Firefox插件[前端工具]

推荐一个Firefox插件&#xff0c;Rainbow Color Tools&#xff0c;一款网页取色工具&#xff0c;有个特色功能是能够分析网站的配色&#xff0c;如图&#xff1a; 插件&#xff1a; 下载Firefox插件Rainbow Color Tools

20个令你喜悦的食品相关网站案例推荐

食品相关的网站是越来越好。以帮助那些热爱美食的人群。新的餐馆的菜谱中&#xff0c;总是有一些新的东西弹出。所以今天我们决定收集一些很好的例子来激励你。你会看到&#xff0c;食品网站通常都喜欢用大和多彩的摄影&#xff0c;优雅的排版&#xff0c;和偶尔细微的纹理的东…

分享25个漂亮的国外绿色网站设计作品

在现在的网页设计中&#xff0c;绿色是设计师们最喜欢选用的颜色之一&#xff0c;绿色代表着活力、生长、宁静和青春。今天&#xff0c;本文收集了25个漂亮的国外绿色网站设计作品与大家分享&#xff0c;希望能带给你灵感&#xff0c;一起欣赏。 1. Reap 2. Zaarly 3. Nebud-Jo…