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 users’ 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:
- It’s easier for users to share and link to our content with a single URL.
- It helps Google’s algorithms assign indexing properties to the page rather than needing to signal the existence of corresponding desktop or mobile pages.
- By avoiding redirection for users to have a device-optimised view, load time is reduced.
- It requires less resources to maintain multiple pages for the same content.
- It saves resources when Googlebot crawls your site (it will only crawl your page once, rather than crawling multiple times with different Googlebot user-agents).
We have put together a checklist of factors and elements necessary to build a user-friendly (and search-engine friendly) responsive website.
Best Practice Checklist
SEO Considerations for Mobile
Site Design Considerations for Mobile
SEO Considerations for Mobile
Page Speed
Site speed has been a ranking signal in Google’s ranking algorithms since 2010 so at this time everyone should already know how important speeding up a website is. Moreover, we all know that the faster a website loads, the better the user experience is, especially on mobile.
Some recommended actions to avoid slow mobile pages are replacing Click Events with Touch Events, focusing on mobile image optimisation or using front-end optimisation strategies such as mobile-optimised caching. It is also important to check your page speed regularly with Google Page Speed Insights and third-party tools like GTmetrix to discover if your page has any issues that can slow your pages down.
Site speed for content marketers – full full presentation via Slideshare
Code Semantics
You can also use Schema.org structured data for mobile to enrich your pages. Because of the limited screen space, a search result with rich snippets on mobile is even more likely to stand out than on desktop. Some of the most common examples of structured data for mobile are Rich Snippets for Software Apps (indexable apps that will be shown in SERPs) or for Events (to be shown in Google Now cards and Knowledge Graph).
Avoid interstitials
Pop-up windows and interstitials are already annoying in desktop but having an overlay or interstitial popping up and taking the majority – if not all – of your screen while you are navigating can be really frustrating. You should be careful with these in order not to disrupt the visitor’s usage of the site. For example, instead of an app download interstitial, you could use a simple banner app in line with the page’s content (similar to a small add), that links to the correct app store for download. For more information about how to deal with app download interstitials, check the Google Webmaster’s Mobile Guide.
Optimise titles and meta descriptions
When creating titles, URLs and meta descriptions, remember than you are working with less screen space when a user searches using a mobile device. 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
Make sure that the Googlebot-Mobile user-agent can access your site. Check your robots.txt file in Google Search Console and make sure that Googlebot can crawl your JavaScript, CSS and image files by using the “Fetch as Google” feature, which shows how Google renders pages from your site.
Site Design Considerations for Mobile
There are many elements to look at when it comes to designing a website for mobile. Responsive navigation menus, make buttons visible, avoiding Adobe Flash, or designing for the fat finger are some of the basic recommendations for mobile responsive design. There are already plenty of good articles about mobile web development guidelines so we will skip this and focus on the elements of the page which can really represent a problem when not used correctly.
Meta Viewport Element
You need to place a meta name=”viewport” tag in the head of the html page in order to give the browser instructions on how to control the page’s dimensions and scaling:
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
With the value width=device-width, you are instructing the page to match the screen’s width in device-independent pixels, allowing the page to reorganise content to match different screen sizes. Click here to read more about how to use the meta viewport element.
Fluid Images
Web page text is fluid by default (this means that as the browser window narrows, text reflows to occupy the remaining space); however, images are not naturally fluid and they will remain the same size and orientation unless you specify otherwise. Therefore, they will be cut off or displayed out-of-scale compared to the surrounding text content as the browser narrows. The best two possible solutions to creating fluid images are:
- Set the max-width of the image at 100% (the image will scale to fit the browser window as it narrows):
<img src="picture-example.jpg" alt="London-landscape" style="max-width:100%;height:auto;">
- To measure the width of the image as a percentage of the overall width of the page (the image will always remain in scale with the rest of the text):
<img src="picture-example.jpg" alt="London-landscape" style="float: right; width:41.66%; margin-left:2rem">
Responsive Videos
Same as images, embed video players which are given a fixed width and height will not respond to changes in the browser. Therefore, if you reduce the browser window, the video will not be resized. In order to avoid this, you need to resize video players according to screen dimensions – rather than fix width and height, while also maintaining the aspect ratio, so that the video is not letterboxed.
Break Points
Break points are browser widths that have a media query declaration to change the layout of the page once the browser is within the declared range. Every responsive site will have at least two breakpoints – for tablets and mobile phones. When it comes to deciding where to put breakpoints in a responsive design, you can either use the standard breakpoints – which are based on the screen sizes of the iPhone and iPad, due to these being the most popular devices in both mobile and tablet devices – or create custom breakpoints.
Whereas the standard breakpoints are good enough for most responsive websites today, we recommend the creation of custom breakpoints to ensure a better user experience. Whichever each of these two approaches you use, remember to include breakpoints for devices when they are in both landscape and portrait orientation.
More information about how to create custom breakpoints can be found here.
CSS media queries
Media queries are filters that can be applied to CSS styles, allowing content rendering to adapt to different conditions and screen resolutions. This way, a website can be rearranged on a different way based on the browser window size. You can read this article for more information about how to use media queries for mobile responsiveness.
Measure your success
Once your website is optimised for mobile, it is also important that you measure and track your performance in order to understand where your pages are succeeding or failing. You can start by testing your mobile pages with the Mobile-Friendly Test to see if the system detects your website as compatible for mobile users (remember that this tool works at a page level rather than the entire site) or looking in Google Search Console for messages pertaining to mobile usability, which will note the specific issues that need to be addressed.
Google Search Console can also be used to view the average rank your site holds for some of your top traffic driving keywords. Comparing the average rankings across mobile and desktop can flag any issues your site may be having with mobile rankings.
from SEOgadget.co.uk http://ift.tt/2tG02oq
via IFTTT
No comments:
Post a Comment