网站PC端在百度排名还不错,但移动端没什么排名。原因可能并不是因为你网页质量不好,较大可能是因为你的移动端页面规范做得不好。
一、网页制作规范
1、PC端
PC端不用说了,大家都比较熟悉,只要适应电脑端屏幕宽度就ok了。
2、移动端
移动端最主要的问题也是需要网页能适应手机的屏幕宽度,且字号大小适合手机浏览。
二、声明网页类型
网页做好后,需要让百度知道你的哪些网页是PC的,哪些是适合移动的。
方法也很简单,按照百度给的声明方法,在每个网页上加特定的html标签,来告诉百度蜘蛛,这个网页是适合PC还是手机浏览。
1、PC页在<head>与</head>之间添加以下标签,声明自己适合pc浏览:
<meta name="applicable-device" content="pc" />
2、移动端在<head>与</head>之间添加以下标签,声明自己适合手机(mobile)浏览:
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" /> <meta name="applicable-device" content="mobile" />
3、自适应页,即可以同时在PC和移动端正常显示,在<head>与</head>之间添加以下标签,声明自己适合pc和移动端浏览:
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" /> <meta name="applicable-device"content="pc,mobile" />
三、实战:3种适配方法对应的手机端优化方法
自适应模板、代码适配、跳转适配是三种常见移动网页解决方案,对于中小型站,我个人比较倾向使用第1种自适应方案,因为维护简单,只需要1套模板。对于大型复杂网站来讲,更多的可能是使用第2和第3种,以下是3种适配方法对应的移动优化方法:
1、自适应模板:
特点:pc和移动共用1套模板文件,且手机和pc的url是同一个,且两端的html代码完全相同,通过css或js,自动判断当前设备的宽和高,页面自动调整排列,以适合当前设备显示。
移动搜索优化方法:在模板文件的<head>与</head>之间添加:
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" /> <meta name="applicable-device"content="pc,mobile" />
2、代码适配型网站:
特点:有2套模板文件,pc和移动各用1套,但两端url是同一个,当访客访问时,由程序判断访客是手机还是pc,再展示不同的模板。
移动搜索优化方法:
PC端模板在<head>与</head>之间添加:
<meta name="applicable-device" content="pc" />
移动端模板在<head>与</head>之间添加:
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" /> <meta name="applicable-device" content="mobile" />
3、跳转适配型网站:
特点:有2套模板文件,pc和移动各用1套,pc端和手机端是不同的url,当访客访问时,由程序或js判断当前设备,然后跳转到适合当前设备的url。
移动搜索优化方法:
PC端模板页面的<head>与</head>之间添加标签,
<meta name="applicable-device" content="pc" />
同时添加以下标签,指明对应移动端url(一般在模板里做相应设置的,自动生成):
示例:
<meta name="mobile-agent" content="format=xhtml;url=https://www.think3.cc/?id=7" />
以下标签不是百度建议必须的,此为css3的文档的替代版本声明,加上可以增强适配效果:
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://www.think3.cc/?id=7">
请注意:https://www.think3.cc/?id=7 需要改成你自己网站对应的移动页url地址。
例如在织梦中,此标签为(更多信息参见参考内容《织梦移动优化指南》):
织梦PC端首页模板:
<meta http-equiv="mobile-agent" content="format=xhtml;url={dede:global.cfg_mobileurl/}/" />
织梦PC端栏目页模板:
<meta http-equiv="mobile-agent" content="format=xhtml;url={dede:global.cfg_mobileurl/}/list.php?tid={dede:field.id/}" />
织梦PC端文章页模板:
<meta http-equiv="mobile-agent" content="format=xhtml;url={dede:global.cfg_mobileurl/}/view.php?aid={dede:field.id/}" />
移动端模板在<head>与</head>之间添加:
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" /> <meta name="applicable-device" content="mobile" />
此方法同时适合用二级域名做移动站和用目录做移动站的情况:
适用情况一:PC站:www.think3.cc 和 移动站:m.think3.cc
适用情况二:PC站:www.think3.cc 和 移动站:www.think3.cc/m/
但百度更建议使用情况一,即移动站使用单独的子域名来做。个人测试,子目录做移动页的情况下,只要正确做了适配标签,百度也能正常区分和展示各端页面。
如果使用情况2,除了上述方法,百度站长工具还提供了一个专门的工具,见下方参考资料
《【移动适配】目录级移动适配如何使用工具提交适配关系》:https://ziyuan.baidu.com/college/articleinfo?id=443
更多移动优化参考资料:
移动搜索技术选型与优化:https://ziyuan.baidu.com/college/courseinfo?id=156
《百度移动搜索优化指南2.0》:https://ziyuan.baidu.com/college/documentinfo?id=162&page=2
《移动站点对百度友好全解》:https://ziyuan.baidu.com/college/documentinfo?id=481&page=3
织梦移动优化指南:https://ziyuan.baidu.com/college/courseinfo?id=750&page=2
欢迎加入 SEO建站技术交流群 905633541 群里可以讨论交流建站话题
欢迎转载,请注明来源:https://www.think3.cc/?id=7
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。