Website

SEO optimization on mobile sites [Latest]

SEO optimization on mobile sites

What should I do for SEO optimization on mobile sites?

Q&A community in the past few months to answer a number on a mobile website optimization end of the issue, found that many mobile SEO issues related to the mobile version to do with what kind of architecture. Many SEOs seem to have no small obsession with independent mobile version website, that is, individual m.domain versions, and believe that standalone mobile versions are the best.

In the question and answer background, I saw another reader “a dreamy salted fish”, and also asked, “whether the new website is used for mobile SEO, using m- version or responsive?”

Hello, I saw your answer in a specific reply, and there are some doubts. You suggest: “A new website, or a mobile SEO that has just been done, it is best to adopt a responsive style.” Well, my feeling is that the mobile search is currently ranked at the top of m versions more After reviewing the previous posts about mobile SEO, I found that mobile SEO should be optimized in a way that has not been carefully written. Today’s post discusses in depth how to choose three ways of mobile optimization.

Three ways to optimize mobile website

There are three ways to choose a mobile website:

01 Responsive design

The URL of the PC version website and the mobile version website are precisely the same (no matter what device is used to access it), the HTML code returned to the browser is the same, and the screen layout of different widths is controlled by CSS. It used to be called adaptive design because it was automatically adapted to the screen width.

02 Dynamic serving

The URL of the PC version website and the mobile version are precisely the same, which is the same as the responsive design, but the HTML code (and CSS) returned to the browser by the dynamic service method is different. The HTML code obtained by the PC device is the PC version. The HTML code received on mobile devices is a mobile version specially optimized for mobile.

03 A separate mobile version (separate m. Site)

The URL of the mobile version is different from that of the PC version, usually with a separate subdomain, for example, the PC version is www.example.com, the mobile version is m.example.com, and of course the HTML code (and CSS) of the mobile version and the PC The version is also different, it is specifically optimized for mobile. In other words, in this way, the mobile version is an independent website.

Each of these three methods has its own characteristics.

Responsive design

Since the URL is the same, the HTML code is the same for all devices, and the benefits are apparent: simple and clear, the search engine will not be confused. The search engine crawls and indexes a set of pages, which improves indexing efficiency. Especially for large websites, the scraping share is wasted on multiple URLs, which means that the chance of deep pages being crawled is reduced. The adaptive design has only one URL, and the link and weight calculation are concentrated on one URL, so there is no problem.

Users will not be confused, and bookmarking and sharing pages will not cause problems due to different URLs.

It is enough for the webmaster to develop and maintain a set of code, and the back-end development cost is relatively low. The construction link is also concentrated on a URL.

There is no need to determine the type of device, browser, or steering, so there is no mistake.
Of course, there are disadvantages. For example, due to the size of the screen, mobile devices often hide some content and functions, but still need to download the complete HTML code, and often include pictures so that it will waste bandwidth. If the mobile phone network speed is slow, downloading more files means that the speed becomes more time-consuming. Moreover, the same set of code should be displayed correctly on all devices, and it must be rendered as soon as possible. The front-end design needs a relatively high level.

Responsively designed pages must have a viewport, telling the browser to adjust the page layout according to the screen width automatically:

<meta name = ”viewport” content = ”width = device-width, initial-scale = 1.0 ″>

 Although there are shortcomings, with the improvement of mobile network speed and mobile phone performance, the failures of responsiveness gradually seem less fatal, and its simplicity is more advantageous. Therefore, responsive design is the future direction and the general trend. That’s why I suggest a new website or a website that has just made mobile SEO, and it must be directly responsive, without considering other options. (Unless your company is not bad, you can find dynamic services.)

Dynamic serving

The dynamic service is the same as the independent mobile version, first determine the device and browser type on the server-side, and then return different HTML and CSS codes according to the browser screen width at the same URL.

Therefore, the dynamic service method is equivalent to combining the advantages of responsive design and independent mobile versions, that is, there is a concise and concise URL, and the code optimization of independent mobile versions, the SEO effect is the best. Of course, the price is that both front-end and back-end costs must increase.

For companies that are not bad money, dynamic content is the best choice. For example, Amazon now uses dynamic services for mobile optimization. The URL is unified and simple without errors. The two versions of the code can be optimized separately. It is said that Amazon Mobile The version saves 40% of file downloads. For mobile phone users, the increase in page opening speed is crucial.

Whether to use dynamic services depends on the company. For most websites, the page content, layout, and functions are not so complicated. The responsive design has met the needs. The dynamic services are realized at a high cost, and the saved downloads are not so obvious. For example, SEO posts this kind of blog every day. In a large number of content-based websites, the page does not even have a picture, and there is no other interaction other than leaving a message. That is, you can’t save a little download, and the dynamic service is meaningless.

When a search engine spider accesses a dynamic service page, the HTML code cannot automatically know that the code obtained by different browsers will be different. For example, when the PC spider accesses, the PC version code is obtained, but the spider does not necessarily know that the mobile spider will get different codes if it visits, so the server needs to tell the search engine spider through the Vary HTTP header information, PC spider and mobile spider get The code is different, both spiders have to visit. For example, the server header information on the amazon.com page:

<Content-Type: text / html
<Content-Length: 6400
<Connection: keep-alive
<Server: Server
<Date: Sat, 27 Jul 2019 16:42:45 GMT
<Vary: Content-Type, Host, Cookie, Accept-Encoding, X-Amzn-CDN-Cache, X-Amzn-AX-Treatment, User-Agent
<Edge-Control: no-store
<x-amz-rid: KH589YRZC8QEW3QEWGKD
<X-Cache: Error from cloudfront
<Via: 1.1 1b52a5dd431f9e3c81753e61dfdf467a.cloudfront.net (CloudFront)
<X-Amz-Cf-Pop: SFO9
<X-Amz-Cf-Id: 0qtVw99a2_AustEZ-dxC_cs9hfVzyll-DmHnmWFDtBSWKtinpxhB2Q ==

The Vary line is to notify the browser/spider. According to the situation in the following columns, the HTML code is different. Vary: User-Agent refers to the different HTML user code according to the browser user agent.

A separate mobile version

Compared with the responsive design, the development cost of an independent mobile version website is obviously higher, and two sets of codes are developed and maintained. As domestic labour costs increase, things that need to be repeated will become less and less cost-effective.

The more significant potential trouble for independent mobile versions is that the difference in URLs can cause confusion and various errors. For example, since the mobile and PC version URLs are different, the search engine needs to establish a corresponding relationship, and it must determine what the mobile version URL corresponds to the PC page and what the PC version URL corresponds to the mobile page. The website needs to add code to the page to help search engines judge:

The PC page needs to add the following code to indicate the location of the mobile version:
<link rel = ”alternate” media = ”only screen and (max-width: 640px)” href = ”https://m.example.com/”>
 
The corresponding mobile page needs to add the following code to indicate the location of the PC version:
 
<link rel = ”canonical” href = ”https://www.example.com/”>

When both versions of the search engine are captured and correctly judged, the PC and mobile versions establish a one-to-one correspondence. But what if the webmaster adds the wrong label? What if the search engine only crawls one version? What if the search engine does not accurately parse the tag?

Moreover, to establish a one-to-one correspondence, the main content of the PC version and the mobile version needs to be the same. In many cases, the content of the mobile version of the page has been reduced or modified too much. What should the search engine think that the content does not match? Sometimes even independent mobile versions have only built some pages, what if many PC pages do not correspond to mobile pages?

There are two versions of the website when users add bookmarks and share links, it is inevitable that some will point to the URL of the PC page and some will point to the mobile URL, and the link weight will be scattered.

Usually, in order to user experience and help the search engine to determine the corresponding relationship, the website needs to make a rule-compliant turn:

  • If the PC user accesses the mobile URL for some reason, it needs to be automatically 301 redirected to the PC version URL
  • If the mobile user accesses the PC page URL for some reason, it needs to be automatically 301 redirected to the mobile URL
  • The 301 transitions are generally done on the server-side. First, you need to determine the user device and browser type based on the matching character string of the browser user agent

There are many kinds of Internet devices and browsers. It is not easy to detect the program 100% correctly. If the judgment is wrong, the user may only see a page with an incorrect layout, and even some functions cannot be used. Search engine spiders may also be judged wrong, resulting in the inability to establish a correspondence between the two versions.

Large companies need to use subdomains for multilingual website SEO, plus m. Independent mobile version, it will make the management of subdomains more complicated, because the website has to increase:

  • uk.example.com
  • m.uk.example.com
  • us.example.com
  • m.us.example.com and many more.

Multi-language hreflang tags and independent mobile version’s tags are arranged and combined. Which one corresponds to which cannot be mistaken. If you add Google AMP page versions, the correspondence and labelling between all versions may faint people.

Google has always recommended responsive design.

Of course, the recommendation here does not mean that the responsiveness is better than the SEO of independent mobile versions, but it only shows that Google is equal to the three methods, and the ranking is not biased to which one, and the SEO effect is the same… Since the result is the same, of course, it is recommended that it is cheap and straightforward.

The second reason, as the reader said at the beginning, is that there are currently more m versions in the top ranking of Google mobile search. This is an accurate observation. Indeed, there are many well-ranked m versions in Google mobile search results. In many industries, m. However, this does not necessarily mean that m. Independent mobile versions have SEO advantages; I think this is more caused by sampling bias.

For example, the data shows that most of the accidents are caused by male drivers, but does this mean that male drivers have disadvantages in driving? I’m afraid I can’t think so because the ratio of men and women on the road must be considered. It is likely that 80% of the driver’s drive are men, causing 70% of car accidents, so 70% of car accidents are caused by male drivers.

The same goes for mobile search rankings. Most of the top m. versions are now ranked. It is likely that most of these versions are old versions (so the ranking ability is high), and almost all old versions started from the m version when they started mobile SEO. As a last resort, these early versions that use m versions will not change to responsive website design, because the changes are too big, risky, and have no apparent benefits (as mentioned before, the three methods have the same SEO effect), and there is no motivation to change.

Therefore, old versions and big versions are ranked well, and early versions and big versions are mainly based on m versions, so we see that m versions are well ranked. But this does not mean that a new version must learn to be an m version.