网站PC和手机移动端适配跳转的几种方式和简单代码及对百度SEO的影响
随着手机的普及,目前手机端的流量越来越大,很多站长开始重视移动端的优化,做好移动端优化,移动适配是非常重要的一步,最近翻阅了不少资料,也分析了几个网站,发现一般网站比较常用的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和移动间的跳转
本文部分资料来源于网络,若存在理解偏差、知识点错误可与我联系,谢谢!
- ● 自制(IP或域名)可信任的SSL证书,适用360、chrome等浏览器
- ● windows系统下php无法使用curl怎么办?
- ● 绿联UGREENKVM切换器(分屏器)快捷键丢失解决办法
- ● 统信UOS开机指定网址全屏启动自带浏览器以及屏蔽ALT+F4关闭
- ● xshellSSH连接Linux服务器防止超时退出
- ● php8开启OpenSSL扩展库报错disabledinstallext
- ● 统信系统linux安装php时的报错libxml-2.0>=2.7.6
- ● tidb关闭sql_mode=ONLY_FULL_GROUP_BY模式
- ● windows10如何开机自动运行bat文件
- ● Win10Mysql8初始密码丢失,初始化又不显示密码
- ● PHP批量对TCP服务端指定多个IP非阻塞检查在线状态
- ● python实现TCP服务端持续接收关机、重启指令并输出结果【系列三】
- ● PHP给TCP服务端发送指令【系列二】
- ● PHP判断TCP服务端是否在线【系列一】
- ● PHP判断远程文件是否存在
- ● LINUX下用PHP获取CPU型号、内存占用、硬盘占用等信息代码
- ● PHP代码用UDP方式远程唤醒电脑让计算机开机
- ● apache下php生成验证码图片不能显示
- ● PHP使用AES加密解密示例(无偏移)
- ● Pluginmysql_native_passwordreported:''mysql_native_password'isdeprecate问题