HTML5 SEO优化的一些建议


Posted in HTML / CSS onAugust 27, 2020

举个例子

<title>淘宝网 - 淘!我喜欢</title>

使用description以及keyword标签(不超过300个字符最优)

<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台,提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品,同时提供担保交易(先收货后付款)等安全交易保障服务,并由商家提供退货承诺、破损补寄等消费者保障服务,让你安心享受网上购物乐趣!" />
<meta name="aplus-xplug" content="NONE">
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" />

图片添加 alt 和 title

<img src="https://gw.alicdn.com/tfs/TB1DP0yAoY1gK0jSZFMXXaWcVXa-1190-70.png" alt="淘小铺" style="width:1190px;height:70px"/>

使用语义化标签

<h1>大标题</h1>
<h2>大标题</h2>
<artice>文章</artice>

使用 Open Graph 标签

(OG)标记是页面HTML 部分中的附加元标记,该标记允许任何网页成为社交网络中的丰富对象。它于2010年由Facebook首次推出,并得到其他主要社交媒体平台(LinkedIn,Google +等)的认可。

在HTML中,它看起来可能像这样:

<meta name="og:title" property="og:title" content="Your Awesome Open Graph Title">

通过设置 Open Graph , 可以更好的提高社交媒体的网页性能, 优雅的使用将该属性转化为点击量

使用nofollow属性

nofollow是什么?

nofollow 是HTML页面中a标签的属性值。这个标签的意义是告诉搜索引擎"不要追踪此网页上的链接或不要追踪此特定链接"。

nofollow的作用?

  1. 防止不可信的内容,最常见的是博客上的垃圾留言与评论中为了获取外链的垃圾链接,为了防止页面指向一些拉圾页面和站点。
  2. 为了防止付费链接影响Google的搜索结果排名。
  3. 引导爬虫抓取有效的页面,避免爬虫抓取一些无意义的页面,影响爬虫抓取的效率。
     

nofollow基本用法
 

用于 <meta> 标签
 

告诉搜索引擎(爬虫)该页面上所有链接都无需追踪 (这种方法一般用的较少)

<meta name="robots" content="nofollow" />

用于 <a> 标签

告诉搜索引擎(爬虫)加上此属性的链接无需追踪

(一般推荐用这种方法)

<a href="javascript:" class="back" rel="nofollow"></a>

以上就是HTML5 SEO优化的一些建议的详细内容,更多关于HTML5 SEO优化的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
CSS3 background-image颜色渐变的实现代码
Sep 13 HTML / CSS
css3隔行变换色实现示例
Feb 19 HTML / CSS
使用CSS3 制作一个material-design 风格登录界面实例
Dec 12 HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
Dec 20 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
Mar 06 HTML / CSS
前端canvas水印快速制作(附完整代码)
Sep 19 HTML / CSS
检测浏览器是否支持html5视频的代码
Mar 28 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 HTML / CSS
详解HTML5中的Communication API基本使用方法
Jan 29 HTML / CSS
canvas拼图功能实现代码示例
Nov 21 HTML / CSS
html5 制作地图当前定位箭头的方法示例
Jan 10 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
Mar 10 HTML / CSS
Amaze UI 文件选择域的示例代码
Aug 26 #HTML / CSS
h5封装下拉刷新
Aug 25 #HTML / CSS
amazeui页面分析之登录页面的示例代码
Aug 25 #HTML / CSS
详解淘宝H5 sign加密算法
Aug 25 #HTML / CSS
AmazeUI 等分网格的实现示例
Aug 25 #HTML / CSS
AmazeUI 点击元素显示全屏的实现
Aug 25 #HTML / CSS
AmazeUI 按钮交互的实现示例
Aug 24 #HTML / CSS
You might like
PHP UTF8编码内的繁简转换类
2009/07/20 PHP
详解php的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
HTML5附件拖拽上传drop &amp; google.gears实现代码
2011/04/28 Javascript
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
jQuery超赞的评分插件(8款)
2015/08/20 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
Vue.js动态组件解析
2016/09/09 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
[36:29]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs TNC
2018/04/02 DOTA
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
独特的python循环语句
2016/11/20 Python
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
python通过tcp发送xml报文的方法
2018/12/28 Python
解决Keras的自定义lambda层去reshape张量时model保存出错问题
2020/07/01 Python
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
金智子午JAVA面试题
2015/09/04 面试题
斯福泰克软件测试面试题
2015/02/16 面试题
求职者简历中的自我评价
2013/10/20 职场文书
光荣入党自我鉴定
2014/01/22 职场文书
护理专业优质毕业生自荐书
2014/01/31 职场文书
大学生2014全国两会学习心得体会
2014/03/10 职场文书
年会搞笑主持词
2014/03/27 职场文书
新闻编辑求职信
2014/07/13 职场文书
催款函范文
2015/06/24 职场文书
Python 发送SMTP邮件的简单教程
2021/06/24 Python