简单几个标签,轻松解决移动建站中的网页SEO规范,提升手机端排名

  网站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建站技术交流群 SEO建站技术交流 905633541 群里可以讨论交流建站话题

欢迎转载,请注明来源:https://www.think3.cc/?id=7

评论列表: (共0条评论)

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。