前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >利用Meta申明来做百度、谷歌、雅虎、微软等搜索的开放适配

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

作者头像
张戈
发布2018-03-26 14:00:00
1.2K0
发布2018-03-26 14:00:00
举报
文章被收录于专栏:张戈的专栏

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

一、谷歌开放适配规则

对应 URL 举例:

pc:http://zhangge.net/

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

meta 申明方法:

a)pc 页面添加 meta:

代码语言:javascript
复制
<link href=http://m.zhangge.net" rel="alternate" media="only screen and (max-width: 640px)" />

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

b)而在移动版网页上,所需的注释应为:

代码语言:javascript
复制
<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 申明:

代码语言:javascript
复制
<?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 则对应添加如下代码即可:

代码语言:javascript
复制
<?php wp_reset_query();if ( is_single()){ ?>
<link href="http://zhangge.net/<?php the_ID(); ?>.html" rel="canonical" />
<?php } ?>

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

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

PC 主题添加:

代码语言:javascript
复制
<!--首页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 } ?>

移动主题添加:

代码语言:javascript
复制
<!--首页-->
<?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 主题添加:

代码语言:javascript
复制
<!--首页百度和谷歌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 判断跳转代码:

代码语言:javascript
复制
<!--加载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 } ?>

Ps:如果是知更鸟主题,首页和其他页的 header 是分开的,以上代码的实际使用也请分开插入。

添加后,可以到首页、文章页、单页面及分类页查看源代码即可查看到如图对应 meta 标注:

 每种类型的页面仅出现对应的 meta 标注,则为成功!

以上关于谷歌开发适配的方法参考自:《移动 SEO 方案及注意事项》,张戈博客提供的是动态 meta 标注方法。

写在最后:

至此,张戈博客关于移动适配和开放适配的研究就真正告一段落了!搜索引擎的覆盖面已经足够广了!

至于做 seo 有没有用?张戈可以肯定的告诉你,绝对是有用的!质疑的朋友可以随时查看张戈博客的收录和排名情况,虽然张戈并未对博客的关键词排名做优化,但是已收录的关键词一直在稳步上升,比如【张戈】这个关键词已经从第 4 页 27 名慢慢爬到了第一页第 4 名:

另外,关于博客的技术类文章最近总是出现无聊灌水以及不受欢迎的现象,张戈还是那句话,张戈一个 IT 屌丝,文笔确

实挺烂,因此只有当你有需求的时候你才会认真看,才会看得懂;所以,不喜勿看,不喜勿评,省得浪费您的宝贵时间,是不?看不懂的童鞋请转至留言板灌水即可~文章页真心不需要无畏的捧场,张戈博客的技术文章只写给有需要的人,谢谢了!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2014年06月29日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、谷歌开放适配规则
  • 二、做好开放适配映射 sitemap
  • 三、注意事项
  • 四、张戈的做法
  • 百度、谷歌、雅虎、微软开放适配及手机端 UA 判断跳转代码:
  • 写在最后:
相关产品与服务
网站建设
网站建设(Website Design Service,WDS),是帮助您快速搭建企业网站的服务。通过自助模板建站工具及专业设计服务,无需了解代码技术,即可自由拖拽模块,可视化完成网站管理。全功能管理后台操作方便,一次更新,数据多端同步,省时省心。使用网站建设服务,您无需维持技术和设计师团队,即可快速实现网站上线,达到企业数字化转型的目的。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档