Creative Technical

The responsive design SEO checklist

by on 25th July 2017

In November 2016, Google announced their mobile-first index initiative. While we don’t expect to see it until 2018, Google said in a recent Webmasters hangout that websites planning to migrate their m-dot subdomain to a fully responsive website should do so before this mobile-first index goes live.

Right now, Google has a desktop-first index. For sites using an m-dot subdomain, this means that Google primarily uses signals from the desktop site to determine rankings. When the mobile-first index goes live, this system will be reversed. Google will crawl primarily from a mobile perspective.

Migrating to a responsive site after the mobile-first rollout will likely result in significant disruption: it will mean multiple changes to indexed URLs, content, and ranking signals.

Responsive design is the most sustainable and future-proof way to adapt to these changes. By serving the same HTML code on the same URL regardless of the user’s device – and by relying on CSS to alter the rendering of the page – your site will reap the following benefits in terms of both SEO and UX:

  • Content that lives on one website and one URL is much easier for users to share and interact with.
  • Easier and more efficient for Google to crawl, index, and organise your content, as there is no need to signal the existence of corresponding desktop/mobile pages.
  • Requires no redirection to a device-specific view, reducing load time.
  • Less time consuming to manage and maintain a single site.
  • Improves crawl efficiency, as Google will only crawl each page once, rather than retrieving two versions of the same content with two different Googlebot user agents.

Here is a checklist of elements to consider when building a user and search -friendly (and search-engine friendly) responsive website:

Best Practice Checklist

SEO Considerations for Mobile

Key considerations for your mobile web design


SEO Considerations for Mobile

Page Speed

Page speed became a ranking factor for Google back in April 2010 and nowadays everyone understands the importance of improving the speed of a website for search engines and user experience – especially on mobile.

Replacing Click Events with Touch Events, image optimisation techniques and other actions to improve how page’s resources are loaded on mobile – such us mobile-optimised caching or file compression – are some of the actions that can significantly help you improve your website’s page load speed. Remember to monitor your page speed frequently with Google Page Speed Insights and third-party tools like GTmetrix to discover and address any potential issues that might be slowing down your pages.


Site speed for content marketers – view full presentation on Slideshare

site speed optimisation by Builtvisible

Code Semantics

Structured data for mobile with Schema.org is another way of enriching your content and make it stand out on search results (rich snippets look even more prominent on mobile devices, due to the limited screen space). Events microdata (which allows users to easily discover and attend your event) and Software Application mark-up (to display your app details in Google search results) are two of the most common forms of structured data for mobile.

Avoid interstitials

Interstitials and overlays that partially – or completely – cover the real content of the page the user is visiting, negatively impact the user’s experience on both desktop and mobile; however, due to the limited display space, this can be even more frustrating when browsing from mobile devices. As Google explain on their Webmaster’s Mobile Guide, you can avoid these by using a simple banner to promote and link to your app inline with the page’s content or by implementing app indexing if you have an Android app.

Optimise titles and meta descriptions

Mobile browser displays are smaller than their desktop counterparts, meaning more limited space for titles, URLs and meta descriptions on mobile SERPs. Google is still experimenting with title tag length on mobile, and so there is no hard-and-fast rule on length. However, by sticking to under 60 characters for titles and under 155 characters for meta descriptions, you can expect at least 90% of them to display properly without being truncated.

Accessibility

Googlebot needs access to many resources (such as scripts, CSS, and image files) on your page in order to render and index the content optimally. This can affect the page’s ranking in Google search and therefore, you need to make sure that your robots.txt file is not preventing Google-Mobile user-agent from accessing these files and that it can see pages like an average user. Use the “Fetch as Google” feature (which simulates a crawl and render execution as done in Google’s normal crawling and rendering process) and check the blocked resources report, which will show you the resources used by your site that are blocked to Googlebot.

Key considerations for your mobile web design

There are many aspects you need to consider at the outset of your mobile site design project if you want to ensure a good user experience. Avoiding Adobe Flash, optimised spacing between page elements or building a responsive navigation menu are only some of them. However, as there are many articles out there about design patterns and guidelines for mobile development, we have only included factors which can have a bigger impact on the SEO performance of your site.

Meta Viewport Element

The meta name=”viewport” tag gives control over the page’s width and scaling on different devices and it’s placed in the html page’s head, as shown below:

The width property controls the size of the viewport. It can be set to a specific number of pixels, like width=600, or to the special value device-width which is the width of the screen in CSS pixels at a scale of 100%.

For more information on using the meta viewport element, click here.

Fluid Images

Unless you specify the opposite, standard images remain the same size and orientation at all configurations of the viewport, being cropped when becoming too large for their container. Fluid images, however, adapt to the container they are in, which scales down or up in relation to the device screen.

There are two approaches to creating fluid images:

  • You can make the image to scale along with the browser window as it narrows by setting the max-width of the image at 100%:
  • If you want the image to scale with the text size instead, you will have to set the width of the image as a percentage of the overall page’s width:

Responsive Videos

When building responsive websites, you will want to scale videos as well as you would scale an image. This can be achieved by creating intrinsic ratios for video, a technique which allows browsers to determine video dimensions based on the width of their containing block, whilst maintaining its original aspect ratio. This approach avoids static sizing that can distort the image or display black bars around the video (also called letterboxing).

Break Points

Breakpoints are browser widths at which your site’s content will respond to provide users with the best possible layout. Whereas you can use standard breakpoints when designing responsive pages, it is recommended creating these based on content – never on specific devices – to ensure a better user experience. It is best practices to design for your smallest viewport first: design the content to fit on a small screen size first and then expand the screen until a breakpoint becomes necessary.

Remember also to create breakpoints for devices when they are in both landscape and portrait orientation. You can read this article for more information on creating custom breakpoints.

CSS media queries

Media queries are a CSS declaration that allow you to load different CSS properties based on screen dimensions (width). They are an effective and simple way to rearrange a page’s content based on the browser window size.

For more information about media queries in responsive web design, click here.

Measure your success

Finally, in order to understand how your content is performing, you should track the performance of your pages. By monitoring messages pertaining to mobile usability on Google Search Console, you will discover specific issues that need to be addressed; and by testing your pages with the Mobile-Friendly Test tool, you will be able to find out whether your site is compatible for mobile users at a page level. Comparing average position across mobile and desktop for your top traffic driving keywords can also help you identify any potential issues your site might be having with mobile devices.

Like this? Sign up to read more

Responses

  1. Thanks for Interesting Articles. I would like to add some points which are also important:
    Minify CSS, JavaScript, and HTML
    Reduce redirects
    Leverage browser caching
    Best,
    Marcin Kordowski,

  2. Nice post. This is a great checklist and I always do this checklist before working on any projects. Thanks for explaining it in detailed manner. Its really necessary. Thanks for sharing!

Your comment