pc网站和移动网站制作时候需要注意meta标签

作者

平时制作移动站,一般有三种方式,跳转适配, 代码适配自适应。三种方式都可以制作手机网站。比如一个代码适配的网站,手机访问返回手机端的页面,pc访问返回pc的页面。因为代码适配的网站,网址是一样的。如果用缓存服务器,那么应该返回那个页面呢?同样对于百度蜘蛛来说,虽说有针对移动端的蜘蛛,但好还是表明一下,这页面是什么类型的页面。这里总结以下,需要注意的地方。

电脑手机
电脑手机

代码适配网站需要注意的地方

页面本身要表明页面的类型适是pc的页面,还是移动的页面
pc页面可以写

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

mobile页面可以写

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

还需要注意的地方 http报文中的 vary设置
比如在nginx服务器中加入一行设置

add_header Vary "Accept-Encoding, User-Agent";

Vary 意思是可变的, 因为代码适配是通过判断 User-Agent 来返回不同的页面。所以就可以告诉百度蜘蛛或者代码服务器,这个页面是根据不同的代理(User-agent)返回的页面是不同的。这样百度蜘蛛或者代理服务器就可以正常的处理这个页面了。

自适应的页面就比较简单

<meta name="applicable-device"content="pc,mobile">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

一行代码,就说明了。这个页面是可以在电脑上看,也可以在移动端看。二行是给浏览器看的,可以更好的显示网页。

代码跳转页面需要注意的地方

代码跳转页面,和前两种方式比较。不同的地方是,手机端和移动端页面的地址是不同的,这里就有个对应的问题。需要表明的是,手机端对应的移动端的页面是什么,移动端对应的手机端的页面是什么。

移动端的页面添加

<link rel="canonical"href="移动端对应的pc页面的url" >

pc端填写

<link rel="alternate" media="only screen and (max-width: 640px)" href="pc对应的移动页面的url" >

总结以下 就是 网页本身,就应该表明这是个什么页面

回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注