网站怎么移动适配?

前段时间接手一个网站,正准备接手运营的时候,发现这个网站是新站且有PC站和移动站,分别是以www,m为前缀建站的,要小编把这两个新站优化到收录有流量有权重。

小编就对这两个站分别进行诊断,发现PC站和移动站没有做好移动适配,没有做移动适配收录就会很慢,在者就是站长们只知道怎么搭建优化网站却不知怎么做好移动适配,下面给大家详细的讲解移动适配怎么设置!

一,网站内页移动适配Meta标注声明

网站内页是怎么做移动适配Meta标注的(以Dede为例):

(1)(index 页面)网站首页的移动适配Meta标注声明代码为:

<meta name="mobile-agent" content="format=html5;url=https://m.mornread.com">

<meta name="mobile-agent" content="format=xhtml;url=https://m.mornread.com">

<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.mornread.com" />

<meta http-equiv="mobile-agent" content="format=wml; url=https://m.mornread.com">

代码是加在了网页模板的index.html上

这里要注意的是,因为首页是一个,而内页是多个,一般都是模版生成,我们不可能一个一个的添加标注代码,这里要在模版里生成,同时要分栏目页和内容页来添加。

(2)(分类页面)栏目页移动适配Meta标注声明代码:

<meta name="mobile-agent"content="format=html5;url=http://m.tiyudiban.com.cn{dede:type typeid='0' row=1}[field:typelink/]{/dede:type}">

<meta name="mobile-agent"content="format=xhtml;url=http://m.tiyudiban.com.cn{dede:type typeid='0' row=1}[field:typelink/]{/dede:type}">

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.tiyudiban.com.cn{dede:type typeid='0' row=1}[field:typelink/]{/dede:type}" />

<meta http-equiv="mobile-agent" content="format=wml; url=http://m.tiyudiban.com.cn{dede:type typeid='0' row=1}[field:typelink/]{/dede:type}">

这里的typeid='0′row=1 即表示获取当前栏目页的地址,这个方法通用语顶级栏目页和次级栏目页。

(3)内容页移动适配Meta标注声明代码:

<meta name="mobile-agent"content="format=html5;url=http://m.tiyudiban.com.cn{dede:field name='arcurl'/}">

<meta name="mobile-agent"content="format=xhtml;url=http://m.tiyudiban.com.cn{dede:field name='arcurl'/}">

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.tiyudiban.com.cn{dede:field name='arcurl'/}" />

<meta http-equiv="mobile-agent" content="format=wml; url=http://m.tiyudiban.com.cn{dede:field name='arcurl'/}">

把做好的模版上传后,更新网页,就会发现所有页面的Meta标注声明都生效了,比较有利于百度适配移动页面。

最后,针对不同的移动端网站,我们还需要做下applicable-device标注声明,主要根据自己网站的情况分以下几种,请结合自己的网站情况使用

仅PC协议(添加在独立pc页面头部)

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

仅PH协议 (添加在移动端网站页面头部)

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

自适应协议 (添加在独立pc页面头部)

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


二,站长资源平台移动适配

具体怎么验证这里就不多说了,百度官方文档都有操作说明的,这里小编这只是讲讲那些移动适配的坑,一定要看完!

第一个大坑、示例后边少了“/”

很多人都是按照示例来做的,但是怎么都提交不上去,显示错误提示。但是你怎么都没有想到原来是比这他的示例写竟然是错误的。

第二个大坑:PC URL表达式“//”开头是不行的

本来想着偷个懒,估计百度设计这个是可以适配https和http,但是并没有你想象的那么高级,它只是写错了,写错了~(你自己想想搞笑不搞笑???)

https://img-blog.csdnimg.cn/20201231104810130.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dmeHNfY24=,size_16,color_FFFFFF,t_70#pic_center

于是,你不断地换浏览器,换电脑,甚至想给系统换掉,但根本就没有什么用。因为这样写是错误的。只有正确的书写才能够通过。我们从来都不会让大家失望,解决的办法如下:

https://img-blog.csdnimg.cn/20201231104827161.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dmeHNfY24=,size_16,color_FFFFFF,t_70#pic_center

另外,还附送了一个技巧,就是提交首页的时候,你可能没有办法提交3个首页,但他就是非让你写3个,因为写1个是不行的,报错!于是技巧来了,你可以写3遍 这样的URL对,于是就成功了:


其他关于百度站长资源平台移动适配的技巧和经验:

1、正则中只可用“(d+)”、“(w+)”做通配符,其他的正则表达式通不过

小编尝试过提交其他复杂的通配符,但是审核不通过,说正则表达式错误。按照实例,他们只用到了w和d于是就只用这两种方式的,是可行的。刚兴趣的朋友可以提交其他通配符试试看。

2、小范围的写适配规则,一点一点做,不要一下子写的范围大了,造成通不过的情况

步步为营,先写一个一级内容页,再写一个二级内容页,这样分开写。要不用一个正则表达式把所有的适配关系都写了要好。

3、“ 未达到校验标准”的无需再次提交,度娘会自动处理

这个看着虽然焦心,但也是没有办法的办法。耐心等待吧!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hmz856

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值