手机网站移动端适配设定如何SEO优化
发布时间：2022-03-02 11:21:03 所属栏目：搜索优化 来源：互联网
导读：这篇文章主要为大家详细介绍了手机网站移动端适配设置如何SEO优化，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。 今天下面要讲的是针对有PC站和移动站点的，而且PC站和移动站存在页面对应关系的为最佳。这样的移
|
这篇文章主要为大家详细介绍了手机网站移动端适配设置如何SEO优化，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。 今天下面要讲的是针对有PC站和移动站点的，而且PC站和移动站存在页面对应关系的为最佳。这样的移动适配主要针对蜘蛛，对优化有很大的好处。判断是否用JS跳转到移动端；对蜘蛛就用<meta>或<link>声明。完整的移动适配是PC和移动端的URL一一对应。 在移动端</head>之前，增加如下代码： <!--百度移动申明--><link rel="canonical" href="http://www.cuoxin.com/code/ " /> 里面的链接是告诉搜索引擎，这个链接是规范、正确、希望百度收录且参与排名的链接（网页权威链接）。 需要用rel="canonical"声明的情况： ①网站进行了改版，将旧的内容搬到新的URL，但没有做301重定向； ②某些CMS栏目或内容的静态链接和动态链接内容相同，而且没有做301重定向； ③移动端和PC端虽然模板不一样，但是主要内容一样，避免分散权重。 移动端声明 不同的移动设备上浏览页面有可能出现横向滚动条。增加viewport属性作用是当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1;" > 移动端<style>样式 CSS样式有三种写法： ①外部引用 <link rel="stylesheet" type="text/css" href="http://www.cuoxin.com/mbzjskin/css/styles.css" media="screen" > ②页面内 <style type="text/css"> .div{width:100%;height:auto;margin:0 auto;} </style> ③行内样式 <div class="div" style="background:#c00;border:1px solid #ccc;">行内样式写法</div> 移动端和PC端建议首页采用②页面内写法，其他采用①外部引用写法，为了让HTML主体部分代码简洁，尽量不采用③行内样式写法。 移动端适配PC端相关部署 PC端声明 适配只针对存在对应关系的页面，无对应关系的PC页面无需任何操作。 <meta name="mobile-agent" content="format=xhtml;url=http://m.cuoxin.com/code/"> name="mobile-agent"为更新后的meta声明，建议使用。原有meta规则http-equiv="mobile-agent"能够兼容并继续生效，已标注过的无需修改。 橙色部分为移动端对应URL页面；format有几种属性：wml、xhtml、html5，根据实际情况选用。 在PC端</head>之前，增加如下代码： <!--百度移动适配META申明--><meta name="mobile-agent" content="format=xhtml;url=http://m.cuoxin.com/code/" /><!--谷歌、雅虎等移动申明--><link href="http://m.cuoxin.com/code/" rel="alternate" media="only screen and (max-width: 640px)" /> PC端<script>识别访问设备JS跳转 通过JS识别设备跳转，这边361源码就不累述了，早上关于这个问题已经专门讲解过了，参看文章《JS代码判断客户端是手机访问还是PC电脑访问》。 最好稍微总结一下：如果你不想自己动手设置或者不太会设置处理，可以联系我们的在线客服帮你处理。 （编辑：我爱故事小小网_铜陵站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
浙公网安备 33038102330570号