网站 PC 端在百度排名还不错,但移动端没什么排名。原因可能并不是因为你网页质量不好,较大可能是因为你的移动端页面规范做得不好。移动适配,是移动端网站 SEO 优化的必须工作。不仅能直接将 PC 端的排名传递到移动端,直接获得流量。还对用户浏览我们网站提升了一定的用户体验,下面分享一下移动适配的具体操作过程。

technology-3353701_1280.jpg

一、网页制作规范

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" />

然后,添加Vary HTTP标头 ->查看配置教程

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。

格外注意:不建议使用 js 跳转,跳转方式一定是 301 或者 302 状态码的跳转形态。否则搜索引擎无法识别。而在 301 和 302 之间,我个人建议使用 301 跳转。另外,PC 页面和 WAP 端页面的对应关系一定要做好,即指定的PC页面内容要与指定的移动端页面主体内容要一致。

移动搜索优化方法:

PC 端模板页面的 <head></head > 之间添加标签,

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

同时添加以下标签,指明对应移动端 url(一般在模板里做相应设置的,自动生成):

示例:

<meta name="mobile-agent" content="format=xhtml;url=https://www.moewah.com/?id=7" />

以下标签不是百度建议必须的,此为 css3 的文档的替代版本声明,加上可以增强适配效果:

<link rel="alternate" media="only screen and (max-width: 640px)" href="https://www.moewah.com/?id=7">

请注意:https://www.moewah.com/?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.moewah.com 和 移动站:m.moewah.com
  • 适用情况二:PC 站:www.moewah.com 和 移动站:www.moewah.com/m/

但百度更建议使用情况一,即移动站使用单独的子域名来做。个人测试,子目录做移动页的情况下,只要正确做了适配标签,百度也能正常区分和展示各端页面。

如果使用情况 2,除了上述方法,百度站长工具还提供了一个专门的工具,见参考资料:《【移动适配】目录级移动适配如何使用工具提交适配关系

更多移动优化参考资料:

  1. 移动搜索技术选型与优化
  2. 《百度移动搜索优化指南 2.0》
  3. 《移动站点对百度友好全解》
  4. 织梦移动优化指南

相关推荐

文章作者:喵斯基部落
原文地址:https://www.moewah.com/archives/3478.html
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。非商业转载及引用请注明出处(作者、原文链接),商业转载请联系作者获得授权。