移动站适配rel=alternate PC页和H5页适配标注

鉴于移动化大潮的汹涌和H5页的炫丽普及，百度针对PC页与H5页的跳转适配方式推出了最优方案：
1.在pc版网页上，添加指向对应移动版网址的特殊链接rel="alternate"标记，这有助于百度发现网站的移动版网页所在的位置；
2.同时在移动版网页上，添加指向对应pc版网址的链接rel="canonical"标记。

电脑端网站截图：

移动端网站截图：

如果你的网址是：
pc版网址：http://pc_url
移动版网址：http://mobile_url

那么此示例中的注释如下所示：
在pc版网页(http://pc_url) 上，添加：

<link rel="alternate" media="only screen and(max-width: 640px)" href="http://pc_url" >

在移动版网页(http://mobile_url) 上，所需的注释应为:

<link rel="canonical" href="http://mobile_url" >

之前的Meta标记（mobile agent）会继续沿用，但我们推荐使用HTMAL5语言制作的移动页面使用最新方案进行跳转适配，其它如xml语言的移动页跳转适配，需要继续使用之前的meta标记方式:

<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=mobile_url">

内容整理：http://www.cnblogs.com/osfipin/。SEO移动站适配标签。

转载于:https://www.cnblogs.com/osfipin/p/5852037.html

移动站适配rel=alternate PC页和H5页适配标注相关推荐

h5适配华为手机_手机端H5页面适配踩坑
这两天在公司做手机端H5页面,第一次开发没什么经验,对rem, pt, ppi, dpr这些概念完全不懂,看了很多博客,现总结如下. 对于不同像素宽度的手机,如何做到每一个元素自动缩放? rem: f ...
react适配PC端和H5页面
react适配PC端和H5页面第一种方法: 监听页面尺寸,看页面是否大于适配的宽度,从而选择显示的是移动端还是pc端 import Mobile from './components/mobile. ...
CocosCreator的H5游戏适配PC端
文章目录 Creator适配方式效果优势劣势核心问题分析问题解决问题[`度娘`] 完善当今,手游的份额可以说占据了整个游戏市场的半壁江山,特别是最近几年H5游戏的兴起,更是让手游如日中天 ...
移动端 H5页面适配
一.基础概念在了解如何做H5页面适配前,大家都应该把移动端涉及的一些概念搞明白,比如:dpr 是什么意思? 移动端H5解惑-概念术语(一) 二.为什么要做页面适配 2.1 PC端为什么要解决浏览器兼 ...
教你如何用 lib-flexible 实现移动端H5页面适配
前话好久没写教程了(可能会误导新手的菜鸟教程(￣▽￣)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...
uniapp适配pc_uni-app支持PC版!
uni-app已经支持iOS.Android.H5.微信小程序.阿里小程序.百度小程序.字节跳动小程序.QQ小程序.快应用.360小程序. 现在,uni-app终于官方支持PC宽屏! uni-app宽 ...
pc端与移动端适配解决方案
一般网站实现pc端与移动端适配的需求,方案有两个: 1.一套页面,从设计时就考虑到跨设备适配,响应式的一步到位: 2.开发两套页面,根据设备尺寸加载加载不同的资源,目前已经不常见了: 一:响应式方案 ...
【原】让H5页面适配移动设备全家 - 设计师篇 - PPT
上一篇文章<pageResponse - 让H5适配移动设备全家>中分享了一个小插件让一套H5页面适配几乎所有移动设备,得到了一些同学的推荐和认可,这里感谢大家的支持. 在此之前也在部门前 ...
H5网页适配 iPhoneX，就是这么简单
iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可( ...

移动站适配rel=alternate PC页和H5页适配标注

移动站适配rel=alternate PC页和H5页适配标注相关推荐

最新文章

热门文章