SEO移动适配的3种解决方案 - 全栈SEO技术

935 阅读2分钟

需要了解的目前搜索引擎的能力

分设备的索引库

Google与百度,针对PC与Mobile设立了不同的索引库,即同一个关键词,在不同设备会得到不同的搜索结果。

解析执行JS的能力

目前Google与百度的部分爬虫,有解析执行网页上JS的能力,其能够在某种程度上了解到某个具体网页在移动端的使用体验是否合乎标准:

可以执行网页JS的百度爬虫UA(Baiduspider-render):

  • PC

    Mozilla/5.0(compatible;Baiduspider-render/2.0;+www.baidu.com/search/ spider.html)

  • Mobile

    Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 likeMac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143Safari/601.1 (compatible; Baiduspider-render/2.0; +www.baidu.com/search/spid…)

人工审核

搜索引擎通常使用技术手段(爬虫)来检测网站是否合规,某些时候,比如一个网站自然流量突增,或是某个网页被用户举报,有可能触发人工审核

什么是SEO移动适配

SEO移动适配,是做移动端SEO一种基础且必要的技术侧标准,是移动端SEO取得理想效果的前提条件,其主要解决的问题为,当一个Web产品同时支持PC与Mobile的时候,正确的告知搜索引擎:

  • PC用户访问时,网页内容的呈现形式
  • Mobile用户访问时,网页内容的呈现形式
  • 两者的对应关系

SEO移动适配3种解决方案

接下来介绍一下SEO移动适配的3种解决方案:

  1. 代码适配
  2. 跳转适配
  3. 自适应 - 响应式布局

搜索引擎官方文档看这里: 百度 与 Google 

我在这里只抽取各个解决方案技术侧需要实操的部分。

代码适配

1. 不同UA访问,URL保持不变,返回适配相应设备的内容

2. HTTP Header 增加

Vary: User-Agent

3. 针对PC UA 的 HTTP Response 的 内增加:

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

4. 针对Mobile UA 的 HTTP Response 的 内增加:

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

跳转适配

1. PC与Mobile使用不同的二级域名,如:www.x.com 和 m.x.com

2. PC域名被 Mobile UA访问,302重定向至Mobile域名对应页面

3. Mobile域名被 PC UA 访问,不做 302 重定向

4. 正确的使用 canonical 标签

5. 提交移动适配规则(仅百度、搜狗支持)

6. PC域名增加标识对应Mobile域名页面的标签(实践中感觉意义不大)

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.x.com" >
<meta http-equiv="mobile-agent" content="format=html5;url=http://m.x.com">
<meta name="mobile-agent" content="format=html5;url=http://m.x.com">

自适应

针对不同设备UA,服务器端返回的内容一致,用CSS来适配不同设备的用户访问。

常用的响应式前端框架:Bootstrap

对SEO来讲,哪种移动适配方式最好?

只是SEO技术侧的基础,任何一种,只要保证正确就可以。

最终的SEO效果,还是要看内容外链

文章由全栈SEO技术首发于掘金社区 - 原文地址

西瓜视频