Mobile Responsive Website
This manual covers all steps to become mobile responsive and get your mobile SEO in order. From April 21, 2015, a mobile responsive website will be given priority in Google's mobile search results. Mobile SEO is therefore more important than ever before.
Do you have a mobile site?
No mobile site? Go for the "one-URL solution"
3 type of mobile sites
Is your site mobile-friendly?
1. Do you have a mobile site?
Of course, everything starts with having a mobile site. Or more concretely: a website that works well on all devices, in this case especially on smartphones.
To score in mobile SEO, two main issues are important:
Mobile-friendliness: is your site user-friendly on mobile devices?
Technical (SEO) configuration: do you meet all technical guidelines?
No mobile website? Choose the "1-URL solution"
Which configuration you have to choose is pretty simple for me. Always go for the variant where the URL remains the same for each device .
So make the choice between Responsive web design or Dynamic view (read more about the different types of mobile sites below).
Choose Individual URLs when the 1-URL variant is not technically feasible or when this solution entails too much cost or lead time.
I have a mobile site, what now?
If you have a mobile site, it is important to know what type of site this is. Google identifies three different types of sites ( see Google documentation ). For a good
findability, Google sets different requirements for the technical configuration per type of site.
If you do not yet have a mobile site, then it is advisable to develop it as quickly as possible. You can choose to first focus on the most important pages and to ensure a
'mobile-friendly' page next to the desktop version. The Google mobile algorithm works at the page level and will take the 'mobile friendliness' into account as soon as a page
is made suitable for mobile.
Read all properties & operation of the Google mobile algorithm
3 type of mobile sites
Practice shows that there are more types of mobile sites than the three we are dealing with here, but in general terms a mobile site can be assigned to one of these three
groups.
Responsive web design
Dynamic display
Individual URLs
The following diagram simplifies the difference between these types of mobile configurations:
Differences 3 type of mobile sites
1. Responsive web design
With responsive web design, both the URL and the HTML of a web page are the same for all devices.
The way in which a responsive web page is presented differs per device, but in terms of content it is exactly the same.
This type of mobile site is recommended by Google, but everyone is free to choose another variant.
Google does not prefer a certain mobile type of site. For Google it is important that the configuration is technically correct and the pages are accessible to Googlebot (see
below).
2. Dynamic display
With this type of site, the view differs because the server generates different HTML for each device. The URL of the page remains the same on every device.
3. Individual URLs
As the name already makes clear, the URL of a page differs per device. Depending on the characteristics of the device that the server detects, visitors (and search engines)
are redirected to a URL whose page best matches the type of device.
Not only the URL differs per device, the server also generates (usually) different HTML per device.
Number of variants and mixed versions
For both the dynamic display and the individual URLs, the number of different displays and / or URLs (eg www and m.dot) is determined by the configuration. Often there are at
least two variants available, a desktop and a smartphone variant. Where the latter is often responsive and therefore very suitable for all types of smartphones or even
tablets.
Sometimes the choice is made to show the desktop version of the site on tablets. In that case it is important that the desktop version is touch-friendly, because elements
within a desktop version are often only tuned and react differently to the use of a mouse than a finger.
By merging two different mobile sites, there may be a mixed version where the type of mobile site differs per page. This does not have to be a problem, provided the required
configuration is correct.
2. Is the mobile site mobile-friendly according to Google's Mobile-Friendly test?
Okay, you've gone through the first step and there's a site that works well on mobile devices. The second step is to check whether your mobile site is in line with the
mobile-friendly guidelines from Google.
Google has made clear in recent years, and especially in the months to April 21, 2015, what the importance of mobile is.
In addition to comprehensive and valuable documentation , and warnings via Google Webmaster Tools , Google recently launched a 'Mobile-Friendly Test' tool .
Use this tool to test the URL of a web page to find out if it is also mobile-friendly. There are two different reasons why a page is not mobile-friendly:
Mobile usability
Content not accessible
1. Mobile usability
The mobile usability for each page must be in order. This is the case, for example, when the text is too small and a visitor has to zoom in, or when the page is partly out of
view and horizontal scrolling is required.
If you have received emails from Google in recent months about the mobile usability of the website, then the chances are that you will see these notifications including the
URLs where this plays in the ' Mobile usability ' report in Google Webmaster Tools.
2. Content not accessible
A second cause that emerges from the 'Mobile-Friendly Test' tool is how Google sees the page.
When certain sources, such as CSS or JavaScript, are blocked for Google (bot), the display of the page may differ from the view for visitors. This may even result in Google
not being able to determine that a mobile site is available.
It is important to prevent Googlebot from having access to static files such as CSS, JavaScript and images. In Google Webmaster Tools, Google has the " Blocked resources "
report where you can see if you are blocking resources for Googlebot.
3. Mobile SEO (Technical configuration)
Beautiful. Your mobile site is mobile-friendly. Then you come at least without loss of mobile SEO visitors through the update of April 21, 2015.
But you are not done yet! Being mobile-friendly does NOT mean that your mobile SEO is fully in order. In the third step of this checklist we will therefore go into that.
In addition to these important points to determine whether a page is mobile-friendly, it is important to check whether the technical configuration of the mobile site type is
correct.
In order to be easy to find as a site in the mobile search results, the mobile site has to lift on the authority and history of the desktop version.
What is required for this differs per type of mobile site. The more a mobile page and desktop page have in common, the easier the configuration is. It is probably no surprise
that responsive web design is the simplest configuration, and why this type is recommended by Google.
Guidelines Mobile SEO
1. SEO requirements Responsive web design
The SEO guidelines for Responsive design are the simplest, namely:
Google is able to automatically recognize this configuration when Googlebot has permission to crawl the page and static files such as CSS, JavaScript and images.
How to check?
Google makes it easy for you: as mentioned above, in Google Webmaster Tools, you'll find the Blocked Resources report , where you can see if your sources are blocking Google
(bot).
2. SEO requirements Dynamic display
With this configuration, it is not immediately clear to Google that the HTML differs per device.
Through a hint it is possible to tell Google to also have the page crawled by Googlebot for smartphones.
Use the Vary HTTP header ( more information ) to make Google understand that the HTML of a page differs per user-agent (desktop or mobile) who requests the page.
Because user-agent detection is central to this display, it is very important that this technical detection works properly.
How to check?
The first requirement - the Vary HTTP header - is easy to check with the browser extension SEO Peek .
The second requirement - correct user-agent detection - is most accurately controlled by actually testing with different devices and smartphones.
You can get a first impression with tools like MobileTest.me or Browserstack , but that is not always the most reliable.
3. SEO requirements Separate URLs
When the URL of a page differs per device, it is necessary to link the same page to different URLs (intended for different devices).
Make a link between a desktop page (www.domain.nl/pagename.html) and mobile page (m.domain.nl/paginaname.html) using rel = "canonical ??? and rel = "alternate ??? annotations
so that Google's algorithms are able to understand the relationship between the pages
Add an automatic redirection (preferably a 302 redirect) based on user-agent detection to redirect each device to the URL that is most suitable for the device requesting the
page.
Provide each site-specific website with a sitemap.xml file so that Google can quickly and easily discover these URLs. So for mobile URLs a specific mobile XML sitemap . It is
also possible to rel = "alternate ??? annotations to the sitemap.xml file instead of adding the HTML document.
How to check?
The links between desktop and mobile URLs can also be easily checked with the browser extension SEO Peek .
I recommend the redirect with a combination of the browser extensions Redirect path and User-agent switcher . For multiple URLs simultaneously, Httpstatus.io is useful for
this.