Self-adapting website design key to Baidu friendly: add applicable-device tag (turn)

<span id="Label3"></p><p><p>Many websites now use adaptive web design (response-web-design) to meet the needs of a large mobile user Base. however, in the technical design of adaptive web pages, for the sake of SEO considerations, You also have to take care of how Baidu is more friendly, that is to tell Baidu "i am adaptive page", Baidu to facilitate the identification of the CHECK.</p></p><p><p></p></p><p><p>self-adapting Web Design</p></p><p><p><strong>browser-to-adaptive Identification Check Code</strong></p></p><p><p>In the adaptive web design, we use META tags to tell the browser the adaptive rules of the Web Page. Such as:</p></p><pre><pre><meta name= "viewport" content= "width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0, User-scalable=no "/></pre></pre><p><p>This meta,<strong>user-scalable=no</strong> is a disclaimer page that suppresses zooming.</p></p><p><p><strong>General search engine for adaptive identification check code</strong></p></p><pre><pre><meta http-equiv= "cache-control" content= "no-transform"/> <meta http-equiv= "Cache-Control" content= " No-siteapp "/></pre></pre><p><p>This two meta,<strong>No-siteapp</strong> and <strong>No-transform</strong>, is telling the search engine not to transcode the Page.</p></p><p><p><strong>The key of Self-adapting website design to Baidu Friendly</strong></p></p><p><p>In fact, using the two meta-statements above, Baidu will be able to identify adaptive web Pages.</p></p><p><p>however, in order to be more friendly to baidu, let Baidu more convenient to identify the check, we want to add a meta tag.</p></p><p><p>The method is also very simple, just add a <strong>applicable-device</strong> tag below the <strong>viewport</strong> tag above the line:</p></p><pre><pre><meta name= "applicable-device" content= "pc,mobile" ></pre></pre><p><p>This meta tag means that the page is also suitable for browsing on mobile devices and Pcs. (you can set only one Value)</p></p><p><p><strong>Not all sites are suitable for adaptive design</strong></p></p><p><p>Adaptive Web Design (responsive) is a Web design method that automatically identifies the size of the screen of an end-device to make a corresponding adjustment. This method of Web design perfectly solves how to render the same page effect on different sizes of network Devices. It is universally acknowledged <strong>that Self-adaptation has at least 4 benefits: improving the user experience, keeping the pc-side and mobile SEO consistent, avoiding duplication of content and error content, and unifying links. </strong></p></p><p><p>The obvious drawback of adaptive adaptation is that the cost of development is relatively high, especially when it comes to building complex, adaptive sites that contain additional programming, which takes longer. If your site needs are simple, There are many open source templates to choose From.</p></p><p><p>For the more mature PC website, if you want to achieve the full-station adaptive, you may need to push away all the original code for refactoring, time and technical costs are relatively large, and if a site has multiple portal (portal), will greatly increase the complexity of the architecture design, So now there are a lot of web sites only on the mobile side of the implementation of responsive layout design.</p></p>Complete a day to change the PC website to adaptive! It turned out to be so simple!<p><p>Web site adaptation, Many people think it is very senior need a lot of time to achieve things, do not want to go to a ready-made site to adapt, rather than do a separate mobile Station. I previously felt that the implementation of the site adaptive, to design a lot of css, and to combine jquery, to achieve adaptive different devices. I thought I wanted to redesign the picture of the article, or to use JavaScript to control the size of the picture, because the picture was too big to go beyond the phone screen, and the workload was Horrible. A variety of concerns so I have been afraid to start the operation, resulting in the site is still just a PC version, but also did not do a mobile Version.</p></p><p><p>Often in the group to see everyone said mobile traffic how much more, some also said that mobile traffic significantly more than the PC traffic, said the mobile traffic ads Click-through rate is higher than the PC traffic, imperceptible role, I also slowly affected by the infection, so decided to change the site to adaptive!</p></p><p><p>Why do I change the website to adaptive instead of a separate mobile station? Because I want to be a pepsi, don't want to maintain both PC station and mobile station, This will save a lot of time for future update Articles.</p></p><p><p>Because it is the first contact, there is no practical experience, so we need to look for information to see the case side to modify the Code.</p></p><p><p>To my surprise, it took me just one day to finish the work!</p></p><p><p><strong>Let's take a look at my changes.</strong></p></p><p><p><strong></strong></p></p><p><p>PC version Web page</p></p><p><p></p></p><p><p>Mobile version of the page</p></p><p><p></p></p><p><p>This mobile version shows less content, in fact, the mobile version of the page, at the end of the article also shows Google ads, the end of the article also has a user message, the user can still comment on the phone, in addition, "extended reading" later also showed the PC version of the sidebar several columns of the article list, and finally, Baidu Mobile's Adaptive ads are placed above the coloring layer of the search box at the end of the Page.</p></p><p><p><strong>How easy is it to change the website to adaptive?</strong></p></p><p><p>Let's talk about how to change the Web page to adaptive, Why do I say it's simple? Because you don't need any advanced web design techniques, you just need to know a little bit of html, a little bit of css, and the time-consuming changes are only a few hours for a normal web Page.</p></p><p><p>I have divided the entire process into two steps.</p></p><p><p>The first step, very simple, to copy the following code directly into the