做网站的时候,经常会遇到这样一种情况:
PC端已经有一套模板代码。
移动端另外开发了一套模板代码。
两套模板的HTML、CSS甚至部分组件都不一样。
到了CMS后台选择“站点类型”时,却发现系统可能同时提供:
自适应;
代码适配;
PC+手机端独立站点。
这时候最容易产生一个问题:
我明明就是两套独立模板,到底应该选“代码适配”,还是“PC+手机端独立站点”?
这里真正决定选择的,其实并不是:
你有几套模板代码。
而是:
PC端和移动端到底是不是同一套URL、同一个站点。
如果只是PC和手机使用两套不同模板,但访问的URL完全一致,例如PC和手机访问的都是:
https://www.example.com/product/a
那么更接近:
代码适配模式。
如果PC端使用:
www.example.com
移动端使用:
m.example.com
两边拥有不同URL体系,那么才更接近:
PC+手机端独立站点模式。
这两个概念一定要先分清楚。
第一:先搞懂“模板独立”和“站点独立”不是一回事
假设网站有两套代码。
PC访问时加载:
/templates/desktop/
手机访问时加载:
/templates/mobile/
两套HTML可能完全不同。
但是访问地址始终都是:
https://www.example.com/article/123.html
后台文章、产品、栏目、URL也全部是同一份。
这种情况下,虽然:
模板是两套。
但:
网站实际上还是一个。
系统只是在用户访问的时候判断设备类型:
PC设备 → 输出PC模板。
手机设备 → 输出Mobile模板。
这种模式通常被称为:
动态提供内容 / Dynamic Serving
或者在一些CMS中叫:
代码适配。
Google目前对移动网站的官方说明中,也把这种方式定义为:不同设备使用同一个URL,但服务器根据User-Agent向不同设备提供不同HTML。
所以不要因为:
我有两套独立模板。
就直接选择:
PC+手机独立站点。
真正应该看URL。
第二:如果同一个URL根据设备加载两套模板,应该选择“代码适配”
以目前AnQiCMS公开的模板说明为例,它把网站展示模式分成:
自适应;
代码适配;
PC+手机端独立站点。
其中“代码适配”模式就是:
PC端和移动端分别准备独立模板,移动模板放到单独的mobile目录中,系统根据访问设备自动决定加载哪套模板。
例如PC打开:
https://www.example.com/seo.html
加载:
PC模板A
手机打开同样的:
https://www.example.com/seo.html
系统识别手机以后加载:
Mobile模板B
对于搜索引擎和用户来说:
URL没有改变。
文章ID没有改变。
页面权重也不用拆到两个地址。
这种情况下,即使前端代码完全是两套,站点类型依然应该理解成:
代码适配。
所以如果你的情况是:
两套独立模板代码,但是PC和手机共用一个域名、一套URL和一套网站数据。
选择代码适配通常更加符合实际架构。
第三:什么时候才应该选择“PC+手机端独立站点”?
第二种情况完全不同。
例如PC网站是:
https://www.example.com/
移动网站则是:
https://m.example.com/
PC文章:
https://www.example.com/seo.html
对应手机文章:
https://m.example.com/seo.html
这时候:
一个内容已经产生两个URL。
PC和移动站从URL层面真正分开了。
AnQiCMS目前对PC+Mobile独立模式的说明也是类似逻辑:PC和手机可以使用独立域名或子域名,例如www.example.com和m.example.com,同时分别使用桌面模板和移动端模板。
这种情况下才应该使用:
PC+手机端独立站点模式。
因为此时需要系统处理的不仅仅是:
加载哪一套HTML。
还包括:
PC URL和移动URL之间是什么关系;
手机用户如何跳转;
搜索引擎如何识别两个版本;
Canonical如何配置。
所以这个模式的技术复杂度明显更高。
第四:可以直接用一个问题判断:手机打开以后,地址栏会不会变化?
如果后台选项看不懂,其实可以用一个非常简单的方法判断。
假设PC打开:
https://www.example.com/news/123.html
现在用手机打开。
情况一:地址还是这个
https://www.example.com/news/123.html
只是网页样式或者HTML变成移动版本。
那么优先考虑:
代码适配。
情况二:地址变成
https://m.example.com/news/123.html
那么属于:
独立移动URL。
更接近:
PC+手机独立站点。
所以真正的判断标准不是:
有几套模板?
而是:
有没有两套URL。
这一点搞清楚,基本就不会选错。
第五:那“自适应”又是什么?它和两套模板有什么区别?
自适应或者更准确地说Responsive Web Design,通常是:
同一个URL + 同一套HTML + CSS根据屏幕宽度调整页面布局。
例如:
PC访问:
https://www.example.com/
手机访问:
https://www.example.com/
页面源代码基本还是同一套。
只是CSS通过:
@media
等响应式规则改变:
导航;
字体;
卡片列数;
图片尺寸;
页面布局。
Google目前支持三种主要移动网站方案:
自适应设计;
动态提供内容;
单独移动URL。
其中Google明确表示,推荐新网站优先使用自适应设计,因为实现和维护更加简单。
所以如果现在还没有开发完成,而且PC和手机的内容、功能基本一致,其实还可以重新考虑:
有没有必要维护两套模板?
如果一套响应式模板已经能够解决问题,长期维护成本会低很多。
第六:从SEO角度看,三种模式哪一种更简单?
如果单纯从SEO维护复杂度来看,一般可以理解成:
响应式设计最简单。
然后是:
同URL代码适配。
最后是:
PC+手机独立URL。
原因很直接。
响应式设计只有:
一个URL;
一套HTML主要内容;
一套Canonical;
一套内部链接;
一套统计数据。
维护起来最简单。
代码适配虽然也是一个URL,但PC和手机输出不同HTML,需要额外确保:
移动版本和桌面版本的重要内容一致;
Title一致;
Description一致;
Robots设置一致;
结构化数据一致。
PC+手机独立URL则还要继续维护:
两个URL;
Canonical;
Alternate;
移动跳转;
两个站点结构;
两边内容同步。
所以如果没有真实业务需求,不建议单纯为了“手机体验更好”就把网站拆成两个独立域名。
第七:为什么Google现在特别强调移动端内容?
因为Google已经采用:
Mobile-first Indexing,移动优先索引。
Google目前明确说明:
Google使用智能手机代理抓取的网站移动版本,作为索引和排名的主要依据。
这对使用两套模板的网站特别重要。
比如PC版本有:
3000字产品说明;
案例;
参数;
FAQ。
手机模板为了页面简洁,只保留:
500字简介。
这就可能产生问题。
因为Google主要看到的是:
移动版本。
Google明确要求:
PC和移动版本应该拥有相同的主要内容。
图片、视频、标题、Description、结构化数据等也应该尽量保持等价。
所以两套模板最大的SEO风险并不是:
模板代码不同。
而是:
内容不同。
第八:选择“代码适配”以后,要特别检查这几个SEO问题
如果已经确定:
同一URL,两套模板。
那么选择代码适配以后,建议重点检查以下内容。
1. PC和手机主要正文是否一致
不要出现:
PC完整。
手机大量删除。
尤其产品、服务、案例、FAQ等核心SEO内容。
2. Title和Description是否一致
不要PC模板有完整SEO Title。
手机模板却输出默认标题。
Google明确建议移动和桌面版本保持一致的标题和Meta Description。
3. Robots Meta是否一致
特别注意:
PC页面:
index,follow
手机模板却意外输出:
noindex
Google官方专门提醒,两端如果Robots Meta不同,尤其移动版包含noindex或者nofollow,可能直接影响移动优先索引。
4. 内部链接是否完整
PC有:
产品;
服务;
案例。
手机为了简化导航,把大量链接删除。
也可能让Google通过移动版本看到的网站结构变弱。
5. 结构化数据是否一致
如果PC模板输出:
Product;
Article;
Breadcrumb;
Organization。
移动端也需要检查有没有正常输出。
第九:代码适配模式还应该注意Vary响应头
如果同一个URL根据User-Agent返回不同HTML,Google把这种方式称为:
Dynamic Serving。
Google官方建议这类网站使用:
Vary: User-Agent
HTTP响应头。
它可以帮助缓存系统和搜索系统知道:
同一个URL针对不同设备可能返回不同版本内容。
如果使用成熟CMS,系统可能已经处理。
但如果是自己开发的设备判断逻辑,最好让开发检查。
尤其存在:
CDN;
页面缓存;
Nginx缓存;
Cloudflare,
时更值得注意。
否则有可能出现:
手机用户偶尔拿到PC缓存。
或者PC用户拿到移动模板。
第十:如果选择PC+手机独立站点,SEO配置会复杂很多
假设最终确定使用:
www.example.com
和:
m.example.com
两套URL。
那么就要建立页面一一对应关系。
例如PC页面:
https://www.example.com/product/a
移动页面:
https://m.example.com/product/a
Google目前要求独立移动URL正确设置Canonical和Alternate关系。
移动端页面应该指向PC页面作为Canonical。
PC页面则声明对应的移动版本。
例如移动版:
<link rel="canonical" href="https://www.example.com/product/a">
PC版:
<link rel="canonical" href="https://www.example.com/product/a">
<link rel="alternate" media="only screen and (max-width: 640px)"
href="https://m.example.com/product/a">
同时还要保证:
每个PC URL都有正确移动对应URL。
不能把所有手机页面全部跳到:
m.example.com
首页。
Google明确提醒,如果多个不同桌面URL在移动设备上全部跳转到同一个移动首页,可能影响这些页面正常进入索引。
这就是独立移动站最大的维护成本。
第十一:两套模板代码已经开发好了,要不要为了SEO改成响应式?
也没有必要一刀切。
如果现在已经拥有:
PC模板;
移动模板。
而且两端:
同一个URL;
内容一致;
页面速度正常;
搜索引擎抓取正常;
维护也没有问题。
那么继续使用:
代码适配
完全可以。
Google并没有规定:
只有响应式网站才能获得排名。
官方明确支持:
Responsive Design;
Dynamic Serving;
Separate URLs。
只是从新网站长期维护角度,Google更推荐响应式方案。
所以不要为了:
Google喜欢响应式。
把一个已经运行稳定的网站强行大改。
真正应该考虑:
修改成本;
SEO风险;
维护成本;
实际用户体验。
第十二:什么时候“两套独立模板”反而很合理?
并不是所有网站都适合完全响应式。
比如PC和手机的使用场景差异很大。
PC端可能需要:
复杂数据表;
后台系统;
多栏目导航;
大量参数。
移动端则需要:
简化操作;
快速咨询;
电话按钮;
定位;
轻量页面。
这时候使用两套模板代码可能更加方便。
但依然没有必要自动拆成两个站点。
完全可以保持:
同一套URL。
然后根据设备加载不同模板。
这其实就是“代码适配”真正适合的场景。
第十三:从企业官网SEO角度,我更建议怎么选?
如果是普通企业官网,例如:
企业软件;
工业制造;
专业服务;
SEO/GEO服务;
咨询培训,
绝大部分情况下没有必要维护:
www.
和:
m.
两套独立URL。
因为这些网站的核心内容:
产品;
服务;
解决方案;
案例;
文章,
PC和手机本来就应该保持一致。
所以优先级通常可以理解成:
第一选择:响应式。
如果已经明确拥有PC、Mobile两套独立模板:
第二选择:代码适配,同一URL输出不同模板。
只有确实需要两个独立域名、独立URL以及明显不同的两端运营策略时,再考虑:
PC+手机独立站点。
这会更加符合目前搜索引擎移动优先索引和网站长期维护的实际情况。
最后:两套独立模板,到底应该选哪个站点类型?
可以直接用下面这个判断。
如果你的情况是:
PC一套模板 + 手机一套模板;
但:
同一个域名、同一套URL、同一份内容数据。
那么应该选择:
代码适配。
如果你的情况是:
PC:
www.example.com
手机:
m.example.com
而且两边真正存在两套URL体系。
那么才选择:
PC+手机独立站点。
如果实际上只有一套响应式HTML,通过CSS自动适配PC和手机:
选择:
自适应模式。
Google目前也把这三种方案分别称为响应式设计、动态提供内容和单独网址,并明确推荐新网站优先使用维护成本更低的响应式设计。
所以以后再看到:
我有两套独立模板代码,应该选哪个站点类型?
不要只盯着“两个模板”。
真正应该先问一句:
PC端和手机端是不是两个不同URL?
如果不是:
选代码适配。
如果是:
再考虑PC+手机端独立站点。
这才是最容易判断、也最不容易在SEO上留下后续问题的方法。
评论
欢迎留下你的看法,评论会按站点设置审核展示。
0 条评论
还没有评论,来写下第一条吧。
请先登录后即可评论
登录评论已关闭