Mobile-Friendly Sites and Mobile-First Indexing #GoogleSEOGuide #s1ep42

Mobile-First Indexing Best Practices

Google predominantly uses the mobile version of a site's content, crawled with the?smartphone agent, for indexing and ranking. ?? This is called?mobile-first indexing.

While it's not required to have a mobile version of your pages to have your content included in Google's Search results, it is very strongly recommended. These best practices apply to mobile sites in general, and by definition to mobile-first indexing.

To make sure that your users have the best experience, follow the best practices detailed in this guide.

?? Create a mobile-friendly site

If you haven't already, create a mobile-fiendly website so your users visiting your site through a mobile phone can have a stellar experience. There are three configurations you can choose from to create a mobile-friendly site:

? Responsive design:?Serves the same HTML code on the same URL regardless of the users' device (for example, desktop, tablet, mobile, non-visual browser), but can display the content differently based on the screen size.?Google recommends Responsive Web Design because it's the easiest design pattern to implement and maintain.

? Dynamic serving:?Uses the same URL regardless of device. This configuration relies on?user-agent?sniffing?and the?Vary: user-agent?HTTP response header?to serve a different version of the HTML to different devices.

? Separate URLs:?Serves different HTML to each device, and on separate URLs. Like dynamic serving, this configuration relies on the?user-agent?and?Vary?HTTP headers to redirect users to the device-appropriate version of the site.

?????? The contents of this guide only apply to dynamic serving and separate URL configurations. In case of responsive design, the content and the metadata are the same on the mobile and desktop version of the pages.

?? Let Google can access and render your content

Make sure that Google can access and render your mobile page content and resources.

• Use the same meta robots tags on the mobile and desktop site.?If you use a different meta robots tag on the mobile site (especially the?noindex?or?nofollow?tags), Google may fail to crawl and index your page when your site is enabled for mobile-first indexing.
• Don't lazy-load primary content upon user interaction.?Google won't load content that requires user interactions (for example, swiping, clicking, or typing) to load.?Make sure that Google can see lazy-loaded content.
• Let Google crawl your resources.?Some resources have different URLs on the mobile site from those on the desktop site. If you want Google to crawl your URLs, make sure that you're not blocking the URL with the?disallow?directive.

?? Make sure that content is the same on desktop and mobile

Even with the equivalent content, differences in DOM (The Document Object Model?(DOM) is the structure of an HTML document — it defines how that document can be accessed and changed by things like JavaScript.) or layout between desktop and mobile page can result in Google understanding the content differently. However having the same content on the desktop and mobile version ensures that the two versions can rank for the same keywords.

• Make sure that your mobile site contains the same content as your desktop site.?If your mobile site has less content than your desktop site, consider updating your mobile site so that its primary content is equivalent to your desktop site. You can have a different design on mobile to maximize user experience (for example, moving content into accordions or tabs); just make sure that the content is equivalent to the desktop site, since almost all indexing on your site comes from the mobile site.
• If it's your intention that the mobile page should have less content than the desktop page, you can expect some traffic loss when your site is enabled mobile-first indexing, since Google can't get as much information from your page as before. Instead of removing content, consider moving content into accordions or tabs to save space.
• Use the same clear and meaningful headings?on the mobile site as you do on the desktop site.

?? Check your structured data and metadata

If you have structured data on your site, make sure that it's present on both versions of your site. Here are some specific things to check:

• Make sure that your mobile and desktop sites have the same structured data.?If you have to prioritize which types you add to your mobile site, start with?Breadcrumb,?Product, and?VideoObject?structured data.
• Use correct URLs in structured data.?Make sure that URLs in the structured data on the mobile versions are updated to the mobile URLs.
• If you use Data Highlighter, train it on your mobile site.?If you use?Data Highlighter?to provide structured data, regularly check the?Data Highlighter dashboard?for extraction errors.
• Make sure that the?title?element?and the?meta description?are equivalent across both versions of your site.

?? Check visual content

? Check your images

Make sure that the images on your mobile site follow the?image best practices. In particular, Google recommends us:

• Provide?high quality images.?Don't use images that are too small or have a low resolution on the mobile site.
• Use a?supported format for images.?Don't use unsupported formats or tags. For example, Google supports SVG format images, but our systems can't index a .jpg image in the?<image>?tag inside an inline SVG.
• Don't use URLs that change every time the page loads for images.?Google won't be able to process and index your resources properly if you use constantly-changing URLs for them.
• Make sure that the mobile site has the same alt text for images as the desktop site.?Use?descriptive alt text?for images on your mobile site as you do on your desktop site.
• Make sure that the mobile page content quality is as good as the desktop page.?Use the same?titles, captions, filenames, and text?relevant to the images on the mobile site as you do for the desktop site.
• If your site is using different image URLs for the desktop and mobile site, you may see a temporary image traffic loss while your site transitions to mobile-first indexing.?This is because the image URLs on the mobile site are new to Google indexing, and it will take some time for the new image URLs to gain enough historical search results to get a better ranking. To avoid a temporary image traffic loss, use the same image URLs across both versions of your site. If you don't mind a temporary image traffic loss, you don't need to take any action.

? Check your videos

Make sure that the videos on your mobile site follow the?video best practices. In particular, Google recommends us:

• Don't use URLs that change every time the page loads for your videos.?Google won't be able to process and index your resources properly if you use constantly changing URLs for them.
• Use a?supported format?for your videos and put videos in supported tags. Videos are identified in the page by the presence of an HTML tag, for example:?<video>,?<embed>, or?<object>.
• Use the same video structured data?on both your mobile site and desktop site. For more information,?check your structured data.
• Place the video in an easy to find position on the page when viewed on a mobile device.?For example, it might harm the video's ranking if users need to scroll down too much to find the video on mobile page.

?? Additional best practices for separate URLs

If your site has separate URLs for the desktop and mobile versions of a page (also known as m-dot), Google recommends the following additional best practices:

? Make sure that the error page status is the same on both the desktop and mobile sites.?If a page on your desktop site serves normal contents and your mobile site's version of that page serves an error page, this page will be missing from the index.

? Make sure that your mobile version doesn't have fragment URLs.?The fragment part of the URL is the end of the URL that starts with?#. Most of the time, fragment URLs are not indexable, these pages will be missing from the index after your domain is enabled for mobile-first indexing.

? Ensure that the desktop versions that serve different contents have equivalent mobile versions.?If different URLs redirects to the same URL, for example, homepage, on mobile devices, after your domain is enabled for mobile-first indexing, all these pages will be missing from the index.

? Verify both versions of your site in?Search Console?to make sure that you have access to data and messages for both versions. Your site may experience a data shift when Google switches to mobile-first indexing for your site.

? Check?hreflang?links on separate URLs.?When you use?rel=hreflang?link?elements?for?internationalization, link between mobile and desktop URLs separately. Your mobile URLs'?hreflang?must point to mobile URLs, and similarly desktop URL?hreflang?must point to desktop URLs.

Here's an example of?hreflang?for the homepage of a site with separate URLs for mobile and desktop:

? In this example, the desktop site URL is?https://example.com/.

<link rel="canonical" >
<link rel="alternate" media="only screen and (max-width: 640px)" >
<link rel="alternate" hreflang="es" >
<link rel="alternate" hreflang="fr" >
<link rel="alternate" hreflang="de" >
<link rel="alternate" hreflang="th" >        

? In this example, the mobile site URL is?https://m.example.com/.

<link rel="canonical" >
<link rel="alternate" hreflang="es" >
<link rel="alternate" hreflang="fr" >
<link rel="alternate" hreflang="de" >
<link rel="alternate" hreflang="th" >        

? Ensure that your mobile site has enough capacity?to handle a potential increase in?crawl rate?on the mobile version of your site.

? Verify that your?robots.txt directives?work as you intend for both versions of your site. The robots.txt file lets you specify which parts of a website may be crawled or not. In most cases, use the same robots.txt directives for both mobile and desktop versions of your site.

? Use the correct?rel=canonical?and?rel=alternate?link?elements?between your mobile and desktop versions.

Here's an example of?rel=canonical?and?rel=alternate?for a separate URLs site setup.

? In this example, the desktop site URL is?https://example.com/.

<link rel="canonical" >
<link rel="alternate" media="only screen and (max-width: 640px)" >        

? In this example, the mobile site URL is?https://m.example.com/.

<link rel="canonical" >        

?? Troubleshooting and Mobile-First Indexing Checklist

Here's a Mobile-First Indexing Checklist of the most common errors that can stop sites from being enabled for mobile-first indexing or could cause a drop in ranking after a site is enabled for mobile-first indexing. If your site isn't enabled for mobile-first indexing yet, you've seen a drop in ranking after your site is enabled for mobile-first indexing, or you've received a message in Search Console, check the list of common errors and resolve possible errors you may have:

To be continued...

Thank you for learning with us. This episode is based on?the Fundamentals of SEO Starter Guide?by Google.?Remember, you could always follow all of the episodes for "Google SEO Guide" from the document below:

How Will We Do It? ??????

• We will learn SEO
• We will learn about Digital Marketing
• We will not give up
• We will not stop till we get results

We won’t care what anyone says, and SEO & Digital Marketing will change our lives!!!

What Will We Learn:???????

Click the below link and get the?#LearningSEOsocially?Calendar Season 1&2. Follow this plan and learn with me how to develop?#SEO?skills with free guides, resources, tools, and more.

Follow Eachother to?#LearnSEO?Socially:???????

• Twitter: https://twitter.com/this_is_nazo/
• Linkedin: https://tr.linkedin.com/in/nazimkopuz

BONUS:???????

Don't forget to get a list of?29 Must-Have?#SEO?Skills?basic to mastery.