文章/答案/技术大牛

发布

社区首页 >专栏 >利用Meta申明来做百度、谷歌、雅虎、微软等搜索的开放适配

利用Meta申明来做百度、谷歌、雅虎、微软等搜索的开放适配

张戈

发布于 2018-03-26 06:00:00

1.3K00

代码可运行

文章被收录于专栏：张戈的专栏张戈的专栏

运行总次数：0

代码可运行

前段时间分享过利用 Meta 申明来做百度开放适配，前几天在解决 sitemap 报错问题时，看到了谷歌、雅虎及微软等搜索引擎开放适配方法，感觉有点意思，就折腾了下代码，现在来分享下。虽然她被墙了，但是我们应该怀着一颗乐观向上的心，随时迎接谷姐归来。。。

一、谷歌开放适配规则

对应 URL 举例：

pc：http://zhangge.net/

移动：http://m.zhangge.net

meta 申明方法：

a）pc 页面添加 meta：

<link href=http://m.zhangge.net" rel="alternate" media="only screen and (max-width: 640px)" />

注意：640px，这里指移动设备最大宽度，只是谷歌一个举例，为了最大化适配效果，这里可以填写 9999px，张戈博客的主界面宽度为 980px，所以选择了 1000px，即告诉谷歌，当屏幕宽度小于 1000px 的将展示移动主题。

b）而在移动版网页上，所需的注释应为：

<link href="http://zhangge.net" 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 一下张戈博客域名：zhangge.net）

4、移动端网页的权重是继承 PC 端的

四、张戈的做法

理论的东西看起来总是迷糊，张戈就分享一下实际的 php 动态 meta 申明代码吧！

由于每个页面都是一一对应关系，而 wordpress 一般都是共用一个 header.php，所以我们需要在 header 里面加上打印当前页面对应的 meta 信息的语句，比如：

以下代码添加到 PC 主题的 header 中，就只会在文章页面打印对应的谷歌 meta 申明：

<?php wp_reset_query();if ( is_single()){ ?>
<!--文章页面谷歌meta适配申明-->
<link href="http://m.zhangge.net/<?php the_ID(); ?>.html" rel="alternate" media="only screen and (max-width: 1000px)" />
<?php } ?>

然后移动主题的 header 则对应添加如下代码即可：

<?php wp_reset_query();if ( is_single()){ ?>
<link href="http://zhangge.net/<?php the_ID(); ?>.html" rel="canonical" />
<?php } ?>

以上则为一个完整的文章页面的谷歌 meta 开放适配！

依葫芦画瓢，可以得出首页、文章页、单页面及分类页的完整 meta 适配代码：

PC 主题添加：

<!--首页meta适配申明-->
<?php wp_reset_query();if ( is_home()){ ?>
<link href="http://m.zhangge.net/" rel="alternate" media="only screen and (max-width: 1000px)" />
<?php } ?>
<!--文章页面谷歌meta适配申明-->
<?php wp_reset_query();if ( is_single()){ ?>
<link href="http://m.zhangge.net/<?php the_ID(); ?>.html" rel="alternate" media="only screen and (max-width: 1000px)" />
<?php } ?>
<!--单页面谷歌meta适配申明-->
<?php wp_reset_query();if ( is_page()){ ?>
<link href="http://m.zhangge.net/<?php echo the_slug(); ?>" rel="alternate" media="only screen and (max-width: 1000px)" />
<?php } ?>
<!--分类页面谷歌meta适配申明-->
<?php wp_reset_query();if ( is_category()){ ?>
<link href="http://m.zhangge.net/<?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."/";
    }
    echo $cat->category_nicename;?>" rel="alternate" media="only screen and (max-width: 1000px)" />
<?php } ?>

移动主题添加：

<!--首页-->
<?php wp_reset_query();if ( is_home()){ ?>
<link href="http://zhangge.net/" rel="canonical" />
<?php } ?>
<!--文章页-->
<?php wp_reset_query();if ( is_single()){ ?>
<link href="http://zhangge.net/<?php the_ID(); ?>.html" rel="canonical" />
<?php } ?>
<!--单页面-->
<?php wp_reset_query();if ( is_page()){ ?>
<link href="http://zhangge.net/<?php echo the_slug(); ?>" rel="canonical" />
<?php } ?>
<!--分类页-->
<?php wp_reset_query();if ( is_category()){ ?>
<link href="http://zhangge.net/<?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."/";
    }
    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.zhangge.net/" />
<link href="http://m.zhangge.net/" 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.zhangge.net/<?php the_ID(); ?>.html" />
<link href="http://m.zhangge.net/<?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.zhangge.net/<?php echo the_slug(); ?>" />
<link href="http://m.zhangge.net/<?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.zhangge.net/<?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."/";
    }
    echo $cat->category_nicename;?>" />
<link href="http://m.zhangge.net/<?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."/";
    }
    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="<?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.zhangge.net/");</script>
<meta name="mobile-agent" content="format=xhtml;url=http://m.zhangge.net/" />
<link href="http://m.zhangge.net/" 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.zhangge.net/<?php the_ID(); ?>.html");</script>
<meta name="mobile-agent" content="format=xhtml;url=http://m.zhangge.net/<?php the_ID(); ?>.html" />
<link href="http://m.zhangge.net/<?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.zhangge.net/<?php echo the_slug(); ?>");</script>
<meta name="mobile-agent" content="format=xhtml;url=http://m.zhangge.net/<?php echo the_slug(); ?>" />
<link href="http://m.zhangge.net/<?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.zhangge.net/<?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."/";
    }
    echo $cat->category_nicename;?>");
</script>
<meta name="mobile-agent" content="format=xhtml;url=http://m.zhangge.net/<?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."/";
    }
    echo $cat->category_nicename;?>" />
<link href="http://m.zhangge.net/<?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."/";
    }
    echo $cat->category_nicename;?>" rel="alternate" media="only screen and (max-width: 1000px)" />
<?php } ?>