欢迎您来到,码代码-李雷博客        登录  |  注册

网站PC和手机移动端适配跳转的几种方式和简单代码及对百度SEO的影响

更新:2020-03-11 09:52:43
人气:4923
来源:本站整理
A+

网站pc和移动端跳转的几种方式和简单代码及百度建议

随着手机的普及,目前手机端的流量越来越大,很多站长开始重视移动端的优化,做好移动端优化,移动适配是非常重要的一步,最近翻阅了不少资料,也分析了几个网站,发现一般网站比较常用的pc和移动端跳转有几种方式:

1,响应式布局

这种一般是比较常见的跳转方式,意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式,pc和移动用的是同一套html代码且网址是同一个网址。

下面这行代码一般放在<head>标签里面,目的是告诉浏览器,使用设备的宽度作为视图宽度并禁止初始的缩放;

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

网页样式一般在css中调整,用@media screen and (max-width: 980px) {}这种形式,意思是屏幕宽度小于980px时使用{}里面的样式,这种响应式布局,宽度常采用百分比的形式,如果害怕图片变形,可以使用{width:auto;max-width:100%}。

2,跳转适配

这种一般也比较常见,站长在做优化时,会有www和m两个站,一个pc一个移动,用户在访问网站时,检测当前所用设备,跳转到对应的网址,pc和移动用的是不同代码且网址也不同。

在pc版网页上,添加指向对应移动版网址的特殊链接 rel="alternate" 标记。

在移动版网页上,添加指向对应pc版网址的链接 rel="canonical" 标记。

例如,假设pc版网址为http://www.abc.com/id.html,且对应的移动版网址为 http:/m.abc.com/id.html,那么在pc版网页上,添加:

<link rel="alternate" href="http://m.abc.com/id.html" >

而在移动版网页上,添加:

<link rel="canonical" href="http://abc.com/id.html" >

3,代码适配

这种方法比较复杂,一般的话是比较大型的网站会使用的跳转方法,网站是使用的同一网址,但是根据访问端口的不同,返回不同的代码,如果是电脑端,就会返回电脑端的代码,如果是yd端,返回的代码就又不同了。

这种方法会需要添加Vary HTTP 标头,其作用借用百度文档里的解释:

1、它会向百度传递一个信号,表示说这是个代码适配的站点,百度就会尽快把网站抓取一遍进行适配;

2、它可以防止用户接收到错误的网页缓存。

这部分是在网站的服务器上进行的,有可能是 Nginx,Apache, IIS 等, 需要在服务器的配置里,设置 Varyheader 为 Vary:Accept-Encoding, User-Agent

为了让百度蜘蛛更好识别是PC站还是移动站,百度可以通过基本html特征来判断是否适合无线端浏览。方法如下:

代码放在<head>标签里面

如果是PC站,代码为:

<meta name="applicable-device" content="pc">

如果是手机移动站,代码为:

<meta name="applicable-device" content="mobile">  

响应式网页可标识:

<meta name="applicable-device"content="pc,mobile">

注意:关于移动适配,百度不建议使用js实现pc和移动间的跳转

本文部分资料来源于网络,若存在理解偏差、知识点错误可与我联系,谢谢!

打赏

取消

感谢您的支持,我会继续努力的!

扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

推荐的文章
# 发表我的评论
  /     /  
# 最近评论

放那两个meta标签,页面并不会自动跳转,只是让搜索引擎知道PC对应的移动页面在哪,移动对应的PC页面在哪。

现在不用这么折腾了,我用了跨屏网针对dedecms织梦提供的免费方案,在网站添加一句js,即可快速适配手机

谢谢了,今天才了解到有跨屏网,只是我这个博客是自己手写的,并没有用dedecms,测试了一下,效果不理想!

  本站PHP博客源代码下载
  本站PHP博客源代码下载
本站使用的PHP博客系统采用PHP和MySql开发,程序开发完全是因为个人爱好,是自己纯手写PHP源代码,未采用任何PHP框架,现已免费开源共享提供给大家下载!
PHP博客下载
  联系博主
QQ:858353007   个人微信号:lileihot123
网站地图
会员服务
关于我们
QQ:858353007
 
广告服务
加我微信
移动端访问
 
 
Copyright © 2014- 2020 www.mdaima.com All Rights Reserved.
李雷博客,专注PHP经验、PHP教程及PHP源代码开源下载分享的PHP博客!   ICP备案号:京ICP备10202169号