一、谷歌开放适配规则
对应 URL 举例:
pc:https://zhang.ge/
移动:http://m.zhang.ge
meta 申明方法:
a)pc 页面添加 meta:
<link href=http://m.zhang.ge" rel="alternate" media="only screen and (max-width: 640px)" />
注意:640px,这里指移动设备最大宽度,只是谷歌一个举例,为了最大化适配效果,这里可以填写 9999px,张戈博客的主界面宽度为 980px,所以选择了 1000px,即告诉谷歌,当屏幕宽度小于 1000px 的将展示移动主题。
b)而在移动版网页上,所需的注释应为:
<link href="https://zhang.ge/" rel="canonical" />
c)URL 级别 sitemap:详见:https://developers.google.com/webmasters/smartphone-sites/details?hl=zh-cn#0-bdhome-1-33534-1d18d5141e8cb800a4977d54d80686cb
二、做好开放适配映射 sitemap
a)这个 sitemap 与以往的 sitemap.xml 文件格式不同,请严格遵循百度、谷歌官方指南操作
b)给百度、谷歌分别单独做一个映射 sitemap,不要做在一起(做在一起搜索引擎其实也可以识别,但是为保证效果还是分开的好)
c)单独给你的移动端网站建立一个 sitemap.xml 文件,并做好 ping 机制。
Ps:以上可参考之前张戈博客发布的相关文章:
移动 SEO 分享:php 自动提交复合型 Sitemap 到百度搜索
移动搜索 SEO 分享:PHP 自动生成百度开放适配及 360 移动适配专用的 Sitemap 文件
移动搜索 SEO 分享:利用 Meta 声明来做百度开放适配
三、注意事项
1、将移动用户跳转至移动端网站,这个操作要过滤掉蜘蛛,从服务器端仅判断用户,避免影响蜘蛛抓取。
Ps:用张戈博客之前的方法就可以避免:完美实现移动主题在 360 网站卫士缓存全开情况下的切换
2、移动端页面去除强 PC 特征,这个不要直接把 PC 端页面结构全部搬到移动端,要注重用户体验,改删减的就删减。
3、移动端网页的收录用 site 是查询不到的,尤其是百度。只看百度后台的适配进度、和 GA 的流量即可。
Ps:另一种查看效果的方法是在手机百度 site 电脑端域名,可以出现如下结果:
而直接 site 移动端域名则如图提示找不到(具体可以到手机端 site 一下张戈博客域名:zhang.ge)
4、移动端网页的权重是继承 PC 端的
四、张戈的做法
理论的东西看起来总是迷糊,张戈就分享一下实际的 php 动态 meta 申明代码吧!
由于每个页面都是一 一对应关系,而 wordpress 一般都是共用一个 header.php,所以我们需要在 header 里面加上打印当前页面对应的 meta 信息的语句,比如:
以下代码添加到 PC 主题的 header 中,就只会在文章页面打印对应的谷歌 meta 申明:
<?php wp_reset_query();if ( is_single()){ ?> <!--文章页面谷歌 meta 适配申明--> <link href="https://zhang.ge/m./<?php the_ID(); ?>.html" rel="alternate" media="only screen and (max-width: 1000px)" /> <?php } ?>
然后移动主题的 header 则对应添加如下代码即可:
<?php wp_reset_query();if ( is_single()){ ?> <link href="https://zhang.ge/<?php the_ID(); ?>.html" rel="canonical" /> <?php } ?>
以上则为一个完整的文章页面的谷歌 meta 开放适配!
依葫芦画瓢,可以得出首页、文章页、单页面及分类页的完整 meta 适配代码:
PC 主题添加:
<!--首页 meta 适配申明--> <?php wp_reset_query();if ( is_home()){ ?> <link href="https://zhang.ge/m./" rel="alternate" media="only screen and (max-width: 1000px)" /> <?php } ?> <!--文章页面谷歌 meta 适配申明--> <?php wp_reset_query();if ( is_single()){ ?> <link href="https://zhang.ge/m./<?php the_ID(); ?>.html" rel="alternate" media="only screen and (max-width: 1000px)" /> <?php } ?> <!--单页面谷歌 meta 适配申明--> <?php wp_reset_query();if ( is_page()){ ?> <link href="m./<?php echo the_slug(); ?>" rel="alternate" media="only screen and (max-width: 1000px)" /> <?php } ?> <!--分类页面谷歌 meta 适配申明--> <?php wp_reset_query();if ( is_category()){ ?> <link href="m./<?php $catArray = get_the_category(); $cat=$catArray[array_rand($catArray,1)]; $cat_parent = get_category($catArray[0]->category_parent); if (!empty($cat_parent->slug)) { echo $cat_parent->slug."https://zhang.ge/"; } echo $cat->category_nicename;?>" rel="alternate" media="only screen and (max-width: 1000px)" /> <?php } ?>
移动主题添加:
<!--首页--> <?php wp_reset_query();if ( is_home()){ ?> <link href="https://zhang.ge/" rel="canonical" /> <?php } ?> <!--文章页--> <?php wp_reset_query();if ( is_single()){ ?> <link href="https://zhang.ge/<?php the_ID(); ?>.html" rel="canonical" /> <?php } ?> <!--单页面--> <?php wp_reset_query();if ( is_page()){ ?> <link href="/<?php echo the_slug(); ?>" rel="canonical" /> <?php } ?> <!--分类页--> <?php wp_reset_query();if ( is_category()){ ?> <link href="/<?php $catArray = get_the_category(); $cat=$catArray[array_rand($catArray,1)]; $cat_parent = get_category($catArray[0]->category_parent); if (!empty($cat_parent->slug)) { echo $cat_parent->slug."https://zhang.ge/"; } echo $cat->category_nicename;?>" rel="canonical" /> <?php } ?>
当然,我们还有百度开放适配,只要结合以前张戈分享过的《移动搜索 SEO 分享:利用 Meta 声明来做百度开放适配》的做法,那么就可以同时做百度和谷歌的开放适配了,完整代码如下:
PC 主题添加:
<!--首页百度和谷歌 meta 适配申明--> <?php wp_reset_query();if ( is_home()){ ?> <meta name="mobile-agent" content="format=xhtml;url=http://m.zhang.ge/" /> <link href="https://zhang.ge/m./" rel="alternate" media="only screen and (max-width: 1000px)" /> <?php } ?> <!--文章页面百度和谷歌 meta 适配申明--> <?php wp_reset_query();if ( is_single()){ ?> <meta name="mobile-agent" content="format=xhtml;url=http://m.zhang.ge/<?php the_ID(); ?>.html" /> <link href="https://zhang.ge/m./<?php the_ID(); ?>.html" rel="alternate" media="only screen and (max-width: 1000px)" /> <?php } ?> <!--单页面百度和谷歌 meta 适配申明--> <?php wp_reset_query();if ( is_page()){ ?> <meta name="mobile-agent" content="format=xhtml;url=http://m.zhang.ge/<?php echo the_slug(); ?>" /> <link href="m./<?php echo the_slug(); ?>" rel="alternate" media="only screen and (max-width: 1000px)" /> <?php } ?> <!--分类页面百度和谷歌 meta 适配申明--> <?php wp_reset_query();if ( is_category()){ ?> <meta name="mobile-agent" content="format=xhtml;url=http://m.zhang.ge/<?php $catArray = get_the_category(); $cat=$catArray[array_rand($catArray,1)]; $cat_parent = get_category($catArray[0]->category_parent); if (!empty($cat_parent->slug)) { echo $cat_parent->slug."https://zhang.ge/"; } echo $cat->category_nicename;?>" /> <link href="m./<?php $catArray = get_the_category(); $cat=$catArray[array_rand($catArray,1)]; $cat_parent = get_category($catArray[0]->category_parent); if (!empty($cat_parent->slug)) { echo $cat_parent->slug."https://zhang.ge/"; } echo $cat->category_nicename;?>" rel="alternate" media="only screen and (max-width: 1000px)" /> <?php } ?>
移动端主题:由于百度并未提供移动端开放适配对应的 meta,所以移动端加上谷歌的 meta 申明即可(上面已提供)。
本文代码中的分类和单页面 url 需要新增一个 function 函数,具体请参考:《完美实现移动主题在 360 网站卫士缓存全开情况下的切换》一文中的第三步。
如果你和张戈一样用的是二级域名移动站,那么这个 Meta 代码还可以继续添加|“结合 js 判断 UA 的地址的跳转代码”,可谓一举多得!篇幅有限,张戈就直接贴上自己的实际使用代码,供有心人参考使用:
百度、谷歌、雅虎、微软开放适配及手机端 UA 判断跳转代码:
<!--加载 UA 判断 JS--> <script src="https://zhang.ge/<?php bloginfo("template_directory'); ?>/js/uaredirect.js" type="text/javascript"></script> <!--首页移动站跳转及 meta 适配申明--> <?php wp_reset_query();if ( is_home()){ ?> <script type="text/javascript">uaredirect("http://m.zhang.ge/");</script> <meta name="mobile-agent" content="format=xhtml;url=http://m.zhang.ge/" /> <link href="https://zhang.ge/m./" rel="alternate" media="only screen and (max-width: 1000px)" /> <?php } ?> <!--文章页面移动站跳转及 meta 适配申明--> <?php wp_reset_query();if ( is_single()){ ?> <script type="text/javascript">uaredirect("http://m.zhang.ge/<?php the_ID(); ?>.html");</script> <meta name="mobile-agent" content="format=xhtml;url=http://m.zhang.ge/<?php the_ID(); ?>.html" /> <link href="https://zhang.ge/m./<?php the_ID(); ?>.html" rel="alternate" media="only screen and (max-width: 1000px)" /> <?php } ?> <!--单页面移动站跳转及 meta 适配申明--> <?php wp_reset_query();if ( is_page()){ ?> <script type="text/javascript">uaredirect("http://m.zhang.ge/<?php echo the_slug(); ?>");</script> <meta name="mobile-agent" content="format=xhtml;url=http://m.zhang.ge/<?php echo the_slug(); ?>" /> <link href="m./<?php echo the_slug(); ?>" rel="alternate" media="only screen and (max-width: 1000px)" /> <?php } ?> <!--分类页面移动站跳转及 meta 适配申明--> <?php wp_reset_query();if ( is_category()){ ?> <script type="text/javascript">uaredirect("http://m.zhang.ge/<?php $catArray = get_the_category(); $cat=$catArray[array_rand($catArray,1)]; $cat_parent = get_category($catArray[0]->category_parent); if (!empty($cat_parent->slug)) { echo $cat_parent->slug."https://zhang.ge/"; } echo $cat->category_nicename;?>"); </script> <meta name="mobile-agent" content="format=xhtml;url=http://m.zhang.ge/<?php $catArray = get_the_category(); $cat=$catArray[array_rand($catArray,1)]; $cat_parent = get_category($catArray[0]->category_parent); if (!empty($cat_parent->slug)) { echo $cat_parent->slug."https://zhang.ge/"; } echo $cat->category_nicename;?>" /> <link href="m./<?php $catArray = get_the_category(); $cat=$catArray[array_rand($catArray,1)]; $cat_parent = get_category($catArray[0]->category_parent); if (!empty($cat_parent->slug)) { echo $cat_parent->slug."https://zhang.ge/"; } echo $cat->category_nicename;?>" rel="alternate" media="only screen and (max-width: 1000px)" /> <?php } ?>
Ps:如果是知更鸟主题,首页和其他页的 header 是分开的,以上代码的实际使用也请分开插入。
添加后,可以到首页、文章页、单页面及分类页查看源代码即可查看到如图对应 meta 标注:
每种类型的页面仅出现对应的 meta 标注,则为成功!
以上关于谷歌开发适配的方法参考自:《移动 SEO 方案及注意事项》,张戈博客提供的是动态 meta 标注方法。
写在最后:
至此,张戈博客关于移动适配和开放适配的研究就真正告一段落了!搜索引擎的覆盖面已经足够广了!
至于做 seo 有没有用?张戈可以肯定的告诉你,绝对是有用的!质疑的朋友可以随时查看张戈博客的收录和排名情况,虽然张戈并未对博客的关键词排名做优化,但是已收录的关键词一直在稳步上升,比如【张戈】这个关键词已经从第 4 页 27 名慢慢爬到了第一页第 4 名:
另外,关于博客的技术类文章最近总是出现无聊灌水以及不受欢迎的现象,张戈还是那句话,张戈一个 IT 屌丝,文笔确
实挺烂,因此只有当你有需求的时候你才会认真看,才会看得懂;所以,不喜勿看,不喜勿评,省得浪费您的宝贵时间,是不?看不懂的童鞋请转至留言板灌水即可~文章页真心不需要无畏的捧场,张戈博客的技术文章只写给有需要的人,谢谢了!