开发移动站点对百度搜索引擎友好度注意事项全解

目前较流量的PC站与移动站配置方式有三种,百度站在搜索引擎角度将这三种分别称为跳转适配、代码适配和自适应,以下为这三种配置方式的名词解释及异同对比。

1,跳转适配:该方法会利用单独的网址向每种设备提供不同的代码。这种配置会尝试检测用户所使用的设备或ua,然后使用HTTP重定向和VaryHTTP标头重定向到相应的页面。

2,代码适配:该方法使用相同的网址(不考虑用户所使用的设备),但会根据服务器对用户所用浏览器的了解(ua),针对不同设备类型生成不同版本的HTML。

3,自适应:通过同一网址提供相同HTML代码的网站设计方法。该方法不考虑用户所使用的设备(pc、平板电脑、移动设备),但可以根据屏幕尺寸以不同方式呈现(即适应)显示屏。

百度仅站在搜索引擎角度对跳转适配、代码适配、自适应这三种配置方式做了一些对比和分析,希望能够帮助站点选择更适合自己、性价比最优的方式来进行移动化。

一、域名&服务器&前端语言

1.域名最初的时候,我以为移动站(俗称手机站,简称M站或者wap站)的域名和PC站一样,随便挑一个就可以了。后来才发现,“理想是美好的,现实是残酷的”:百度搜索引擎原来有自己的偏好!如下所示:推荐:m.baidu.comsports.sina.cna.m.hao123.netwww.m168.info不推荐:www.baidu.com/m

可以看出来,百度搜索引擎喜欢独立的、短小的二级域名(简洁的三级域名也可)。但却不喜欢用子目录做的M站,理由也很简单,如果说PC站用www.baidu.com,M站用www.baidu.com/m/,那搜索引擎对/m/这个目录会感到疑惑:到底是PC站的一个子目录,还是PC站相对应的M站呢?真是剪不断,理还乱啊。

以上举例的域名,我们来做个PC站与M站对应的关系:PC站M站www.baidu.comm.baidu.comsports.sina.comsports.sina.cna.hao123.neta.m.hao123.netwww.m168.ccwww.m168.info

可能大家会发现,最后一个例子中,PC站和M站都是使用的www作为前缀,其实我是不怎么赞同的,使用m或者wap才较为合适。因为说不定什么时候老板想把www.m168.cc作为他用,而www.m168.info作为PC站了。

可以看到,百度搜索引擎(以下内容简称百度)认同用hao123做为主干,使用不同后缀的域名分别用作PC站和M站的域名,但不推荐使用没有关系的域名。

3.前端开发语言移动互联网发展至今,前端开发语言经过历次的更迭,目前主流仍在使用的用xml、xhtml、html5。历年来,移动web主要技术标准有:WML——古典的移动web标准,使用WMLi-mode——小日本的标准,使用iHTML,我们可以忽略OMA领导的xHTMLmobileprofile,使用xHTMLW3C领导的xHTMLBasic,使用xHTML以及所谓的FullWeb,也就是普通的HTML——从iPhone开始流行起来

针对恶意外链事件屡次发生,站长平台发布了“外链分析”的工具,让各位站长可以明确的知晓到底有哪些站放了我们网站的外链。各位可以在站长平台查看:五、移动类型提交

百度站在平台的设置里,把网站分为了五类:PC站;有对应PC站的移动站;独立移动站;自适应的站点;代码适配的站点。根据站点实际情况进行设置,有利于百度蜘蛛在抓取页面,以及搜索结果的排名(PC站和M站的搜索结果展现机制不一样)。设置方法如下:

下图中这个移动站上线半年,之前一直做了自主适配和meta标注,在8月10日的时候提交了移动适配,通过下面曲线图就可以看出6天之后适配效果就达到比较理想状态(红线和蓝线间距越小适配效果越好)。

一、内容一致是移动适配成功的关键

二、建议移动站和PC同主域或同主干,不建议使用目录

1、移动站和PC主域相同,或主干相同例若PC站是www.123.com,移动站强烈建议选用m.123.com,移动站URL尽量简洁短小,建议使用m.123.com而非yidongzhan.123.com。www.123.net因为主干相同也可以。

三、更多注意事项

1、允许Baiduspider访问,不要robots封禁虽然听起来有些无厘头,但这种情况是真实存在的,要注意你的移动站点对百度是不是开放的。

2、UA判断后尽量使用301或302进行跳转现在比较常见的是PC站点只适配一个移动站点,那么使用301就可以,如果需要同时适配高端域名和低端域名,推荐使用302

3、尽量为页面添加applicable-device标签applicable-device标签用于帮助百度校验识别页面类型的准确度,虽然不是硬性要求,但对站点来说没有任何弊端如果是PC页,在中标注如果是移动页,在中标注

4、移动适配工具、META标签、自主适配——三种方式逻辑关系保持一致很多朋友都是这三种方式全用的,百度也支持这样,但这里有一个问题是:逻辑关系要保持不致,不能在自主适配时PC页对应的是移动页是A,而提交时却变成了B。这样最终百度自主选择的适配移动页面可能和你预期的不一样。

四、通过百度站长工具提交适配关系的注意事项

前面两个要点要确保都没问题了,那接下来就是向百度提交适配关系了。

五、最后强调

不管使用哪种方式,适配成功后都要持续保持PC页和移动页的适配关系,因为百度会继续检查适配关系是否正常是否生效,如果发现适配关系不正确,之前生效的数据也会转为失效,影响移动流量。1,PC结构发生变化,检查移动站点是否快速跟着变了2,PC页面主体内容发生变化,检查移动页面是否一致3,如果使用平台工具提交的适配关系,定期检查数据状态,如果之前显示“适配成功”的数据改成了“校验失败”要赶紧查看PC页与移动页的对应关系。

一、什么样的网站适合做自适应自适应网页设计(ResponsiveWebDesign)是指可以自动识别终端设备屏幕的大小从而做出相应调整的网页设计方法。这种网页设计方法完美解决了如何在不同大小的网络设备上呈现同样的网页效果。大家公认自适应至少有4个好处:提升用户体验;PC端和移动端SEO保持一致;避免重复内容和出错内容;链接统一。

6、设计响应式图片有很多同比缩放图片的技术,其中有不少是简单易行的,比较流行的方法是使用CSS的max-width属性:img{max-width:100%;}老版本的IE不支持max-width,所以只好写成:img{width:100%;}此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令:img{-ms-interpolation-mode:bicubic;}或者,EthanMarcotte的imgSizer.js。addLoadEvent(function(){varimgs=ocument.getElementById("content").getElementsByTagName("img");imgSizer.collate(imgs);});如果有条件的话,最好能根据屏幕的不同大小,加载不同分辨率的图片。

三、自适应站点对百度友好的关键1,applicable-device标注应该怎么写有了自适应设计的网页,还要照顾到对百度友好的设计,即告诉百度“我是自适应页面”方便百度进行识别校验。方法也很简单,只要在上面viewport标签下面再添加一个applicable-device标签就行:表示页面同时适合在移动设备和PC上进行浏览。2,在使用百度站长平台链接提交工具的sitemp进行提交时,要做mobiletype标记,具体取值:其他网页取值如下::移动网页:移动网页:代码适配无该上述标签表示为PC网页

百度的移动适配目前分为三种情况:跳转适配,代码适配和自适应。跳转适配目前百度的站长平台里有完整的适配工具,可以在平台里提交适配规则即可。但是代码适配则需要我们在网站里做一些配置,才能让百度准确识别我们的网页适配关系。下面就详细介绍下我们做代码适配的过程。

流量潜力

如果不做移动适配的话,可能我们本来有的移动网页和移动端排名因百度无法确认是移动页面,因此这部分流量都给指向了百度的转码页。可以看自己网站在站长工具里面,移动端有多少流量是指向了转码页。这部分流量在做完适配后,即可指向我们的移动页面,避免了自己的流量被百度截流。

开发

代码适配的开发,百度官方也有详细的说明,可分为两部分:VaryHTTP标头和Metaapplicable-device标签。【VaryHTTP标头】其作用在百度的文档里解释得很清楚:1、它会向百度传递一个信号,表示说这是个代码适配的站点,百度就会尽快把网站抓取一遍进行适配;2、它可以防止用户接收到错误的网页缓存。这部分是在网站的服务器上进行的,有可能是Nginx,Apache,IIS等,需要在服务器的配置里,设置Varyheader为Vary:Accept-Encoding,User-Agent

比如Nginx下,可以在配置文件中加上:more_set_headers-s200"Vary:""Accept-Encoding,User-Agent"注意:打开这个设置需要nginx同时安装有ngx_headers_more模块

在Apache下,可以在配置文件里写上:HeaderappendVaryUser-Agent【Metaapplicable-device标签】Varyheader加上之后,为了让百度更好地识别我们的页面是PC还是Mobile,就需要使用百度自定义的这个Metaapplicable-device标签了。注意以下来自百度的消息:Metaapplicable-device标签,并非是站点必须标注的,现在很多站点没有标记这个标签情况也很好。但这个标签可以帮助百度校验自己的判断,并及时进行修正。做这个事情又不麻烦,所以我们建议代码适配站点为了保证效果,还是加这个标签。

因此可能有些网站之前的移动流量已经很好了,不会出现被百度转码的情况.这说明百度已经能很好地识别你的移动页面了.但是依然建议加上这个标签,一来加这个标签很容易,二来可以确保百度能更准确地识别页面类型.如果没有加这个标签的话,万一突然技术做改版,一些代码的修改导致百度无法继续准确识别页面类型了呢

这部分是在网站的模板里添加的。自适应的网站肯定已经有了判断用户设备是PC还是Mobile的逻辑。利用这个逻辑,在整站的部分添加一行代码即可:如果用户是PC设备(注意需要包括BaiduspiderPCUA),则添加如果用户是移动设备(包括BaiduspiderMobileUA),则添加

注:关于BAIDUSPIDER,移动和PC其实都是Baiduspider,并没有区分,只是UA进行了区分。最新移动UA请见百度官方文档。

验收上线

开发完成后,需要先在测试机上验收。可以用Google浏览器来模拟Baiduspider来检查是否添加正确,如图所示,是检查BaiduspiderMobileUA的效果的

在测试机上验收完成后就可以上线了。上线后,尽量再用站长平台的抓取诊断工具测试几个页面,以免到线上后出现与测试机不一致的情况。比如下面是抓取PC页面来检查的线上结果。

THE END
1.响应式Web设计实战:从布局原理到自适应开发的最佳实践教程一、什么是响应式Web设计? 响应式Web设计是一种能够自适应不同设备屏幕大小和分辨率的网页设计方法。它通过使用流式布局、弹性图片/媒体和媒体查询等技术,实现了网页在桌面、平板和移动设备上都能够呈现出最佳的视觉和交互体验。 二、响应式Web设计的核心原理 https://www.jianshu.com/p/085572887f7c
2.响应式网页设计:媒体查询与BootStrap框架响应式网页:同一套代码适配不同的屏幕宽度1. 媒体查询目标:能够根据设备宽度的变化,设置差异化样式常用写法:/* 媒体特性采用写法 max-width min-width */ @media(媒体特性){ 选择器{ 样式} } /* 视口宽度小于等于768px, 网页背景色是粉色 */ @media (max-width: 768px) { body { background-color: https://blog.csdn.net/weixin_58470558/article/details/129802048
3.如何写响应式页面,如何实现html响应式网页代码如何实现求给关键代码创新互联建站专注于企业全网营销推广、网站重做改版、北票网站定制设计、自适应品牌网站建设、H5场景定制、商城开发、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为北票等各大城市提供网站开发制作服务。 1,如何实现html响应式网页代码如何实现求给关键代码 http://shouzuofang.com/article/epggic.html
4.响应式网页设计示例51CTO博客推荐一个响应式设计创意收集网站:http://mediaqueri.es。虽然这里收集的网站并不是全部都采纳完整的响应式方法论,即先针对小视口进行设计,然后逐步针对大视口进行渐进增强支持。但就目前来看,响应式设计方法兴起的时间不长,再考虑到响应式网页设计的各种可能性,这里确实有很多能让我们汲取创意的范例。尽管调整视口大小https://blog.51cto.com/u_15767091/6856919
5.响应式网页设计的快速教程(适合个人站点)CSS教程CSS网页制作所谓“响应式网页设计(Responsive Web Design)”也就是自适应,就是可以自动识别屏幕宽度、并做出相应调整的网页设计。 GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用! 【如果你想靠AI翻身,你先需要一个靠谱的工具!】 做过wap站、做过siteApp、做过第三方,也做过独立APP,现在又做了个自适应的模板。所谓“响https://www.jb51.net/css/229246.html
6.响应式个人网站模板源码,个人网页设计html代码响应式个人网站模板源码,个人网页设计html代码 这是一款高质量的适合个人或工作室机构用来展示自身形象和业务技能的响应式个人网站模板源码,个人网页设计html代码,模板采用大图结构设计,创意新颖。https://www.17sucai.com/pins/44306.html
7.HTML5+CSS3各行业网站前端模板响应式国外H5网页设计源代码打包HTML5+CSS3各行业网站前端模板 响应式国外H5网页设计源代码打包 ,设计联盟商城网价:6.80,设计联盟商城网掌柜:最森绿,http://witcp.com/shop/c40/t5dd9edbe1d1e.html
8.网页特效—免费网页特效下载,js特效代码让你用来得心应手!科e互联为广大网页制作提供最简洁、简单易用网页特效代码。包括:网页特效,js特效,jQuery特效,flash+xml特效,焦点图特效,图文相册特效,css3特效,html5+css3网页特效代码。http://internetke.com/effects/
9.75款响应式国外漂亮网站建设中模板(上线倒计时模板)73、【网站开通倒计时】响应式网页倒计时模板 大小:754 KB 下载地址:http://www.177347.com/view-105-31800-0.html 74、【网站开通倒计时】速度表网页模板 大小:396 KB 下载地址:http://www.177347.com/view-105-31796-0.html 75、婚礼倒计时网页模板代码 http://www.rskf.cn/news/53847.html
10.关于Web响应式设计Web程序员海军复制代码 响应式图像 在网页中,图像是有固定大小的,如果图像比屏幕宽,图像就会溢出,出现水平滚动条显示。 幸运的是,CSS 提供了 一个 属性来约束这种情况。max-inline-size 它也可以将相同的规则应用于其他类型的嵌入内容。 浏览器将自动缩小图像以适应屏幕 https://xie.infoq.cn/article/19e62034824fb8abd6f1702a2
11.响应式网站模板jQuery特效html5静态网页源码2023最新版jQuery弹幕文字滚动代码 2023最新版jQuery鼠标移入移出判断方向 2023最新版jQuery水平滑动手风琴切换特效 2023最新版jQuery图片配文字动画切换代码 2023最新版jQuery手机端日历考勤记录插件 2023最新版Bootstrap淘宝购物车结算代码 2023最新版jQuery响应式多步骤演示代码 https://www.erdangjiade.com/
12.网页编辑工具有哪些?超全工具合集,值得收藏!实时预览:在Dreamweaver中,你可以同时进行设计和代码编辑,并且可以立即预览所做的修改。 响应式网页设计:Dreamweaver支持响应式网页设计,可以确保你的网站在任何设备上都有最佳显示效果。 集成了Adobe创意云库:作为Adobe家族中的网页编辑工具,Dreamweaver与Adobe的其他产品,如Photoshop、Illustrator等,深度集成。你可以直接从这https://pixso.cn/designskills/collection-of-web-editing-tools/
13.HTML/CSS设计一个网页菜鸟教程接下来我们通过 HTML/CSS 来创建一个简单的响应式网页。 在学习之前我们可以先看下效果:https://www.runoob.com/try/demo_source/tryhtmlcss_website.htm CSS 代码 [mycode3 type='css'] * { box-sizing: border-box; } /* body 样式 */ body { font-famil..https://www.runoob.com/w3cnote/htmlcss-make-a-website.html
14.意派Coolsite360响应式网站自助建站专业级响应式网页设计制作软件工具,中国webflow、wix、Weebly,意派CoolSite360是国内唯一全自由度网页设计、自助建站工具,支持CMS内容管理,支持导出网页代码。http://www.coolsite360.com/
15.前端备份20个国外非常漂亮的404错误提示网页模板分享一组紫色404错误页面响应式网页模板页面代码,源文件:html,风格:欧美风格,来源:网上收集,文件大小:.16M,喜欢的朋友可以收藏转发一下。 截图: 下载地址:http://www.177347.com/view-105-21813-0.html 【9】木质背景网页404错误提示页面模板 文件大小:1.29M https://blog.itpub.net/29532788/viewspace-2199892/
16.大学生个人网站设计作业模板DW个人网页制作代码下载静态HTML本学生个人网页制作作品共3个页面:个人主页、兴趣爱好、在线留言。网页采用DIV CSS布局制作,主页插入了背景音乐,兴趣爱好插入了视频,在线留言插入了表单。网页主体宽度1100PX,整体采用左右布局结构,左侧导航区域背景色与网页背景图片主色调呼应。 网页作品代码简单,可使用Dreamweaver、HBuilder、Notepad++等任意HTML软件编辑修https://www.stu-works.com/html/geren/343.html
17.?创意网页:打造简洁美观的网页轮播图(HTML简单实现轮播图在代码中,我们使用了一些CSS样式和JavaScript来实现轮播图的效果。CSS样式用于定义页面的布局和外观,而JavaScript则用于控制幻灯片的切换和轮播。 网页源代码 代码语言:javascript 复制 <!DOCTYPEhtml>简洁美观的轮播图简洁美观的轮播图<https://cloud.tencent.com/developer/article/2398941
18.网页代码站(WebDm)网页代码站(www.webdm.cn)为您提供Div,Css,Css3,HTML,xHTML,JavaScript,jQuery,Flash,滑动门,焦点图,菜单,按钮,广告,布局,日期时间等网页制作特效代码。这里还是站长的家园,有资讯频道、问问频道、贴吧频道、查询频道、在线手册、精品美文频道等,真诚为站长朋友们服务,助http://www.webdm.cn/
19.制作网页的模板的网站,html制作网页代码模板HTML5 UP是一个专注于HTML5和CSS3的网页模板网站,提供了许多现代化和响应式的模板供用户选择,这些模板的设计非常精美,适用于各种类型的网站,包括企业、个人博客、作品集等,HTML5 UP的模板都是免费的,并且可以直接下载使用,你可以根据自己的需求选择合适的模板,并通过修改其中的代码来实现个性化定制。 https://www.kdun.com/ask/47885.html
20.html网页制作代码大全!初学者福音!HTML(Hypertext Markup Language)是一种标准的标记语言,用于构建网页和应用程序的用户界面。它是一种基础的技术,对于每个网页开发者来说,了解并熟练掌握HTML是必不可少的。在这篇文章中,我将为初学者提供一些HTML网页制作的代码示例,希望能为你们的学习提供一些帮助。 https://www.3000.cn/news/6/21676
21.web前端简单的网页代码有哪些?Worktile社区响应式布局示例 屏幕尺寸大于等于1200px时,容器的padding为60px。 屏幕尺寸大于等于768px,小于1200px时,容器的padding为40px。 屏幕尺寸小于768px时,容器的padding为20px。 表单: 姓名: 邮箱: 留言: 这些代码示例展示了HTML、CSS和JavaScript在构建简单网页中的基本用法,包括网页结构、样式设计、交互效果和表单处理等https://worktile.com/kb/ask/813966.html
22.新鲜实用!20款为前端和网页设计师准备的代码工具优设网毫无疑问,高效的代码工具能够让前端和网页设计师的工作事半功倍。实用的代码工具不仅能够帮你更为有效的应付不同类型的任务,还能帮助你的项目更为有效的推进。今天推荐的前端代码工具能够让你拥有更为富有成效的工作流程,这些工具涉及到字体、色彩、PSD、HTML/CSS等多个https://www.uisdc.com/coding-tools-web-designers
23.简单响应式网站设计代码响应式网站简单模板华为云为你分享云计算行业信息,包含产品介绍、用户指南、开发指南、最佳实践和常见问题等文档,方便快速查找定位问题与能力成长,并提供相关资料和解决方案。本页面关键词:简单响应式网站设计代码。https://www.huaweicloud.com/theme/732276-3-J
24.网页错误代码网页错误代码500是什么意思网页错误代码以及网页错误代码500的含义和作用。我们将介绍什么是网页错误代码以及它们的作用。然后,我们将从六个方面详细讨论网页错误代码500,包括其定义、原因、影响、解决方法、常见场景以及预防措施。我们将总结归纳的主要内容。 1. 网页错误代码的定义和作用 网页错https://www.nzw6.com/9131.html
25.H5响应式网上商城源代码H5响应式网上商城源代码 值得一用https://www.iteye.com/resource/qq_36767290-9870746