Mobile version

1 - Findings and impacts

Although we talk a lot about "mobile SEO", it's all about respecting mobile site design best practices and making the user experience more optimal, while allowing search engines to navigate easily.

The mobile version of a website should not penalize the performances of the DESKTOP version and vice versa. There are 3 setups available to address the mobile usage:

• Dynamic service
• A dedicated mobile site
• Responsive web design ------ PWAs

2 - Recommendations

Responsive design (Recommended)

Responsive design means that no matter how big a screen is — from a phone to a watch to a tablet to a desktop — the site will fill the screen and present information in a clear way.

Responsive Web Design is a configuration in which the server sends the same HTML code to all devices. CSS is used to adapt the display of the page to the device. Google algorithms automatically detect this configuration if all Googlebot User-agents are allowed to crawl the page and its elements (CSS, JavaScript, and image files). Responsive Web Design relies on a single URL for mobile and Desktop versions. This unique URL will be able to benefit from all backlinks (external links pointing to your site) - backlinks that would otherwise dilute if they had to point to an alternative URL for the mobile version of your website (URL type: m.mysite.fr).

The only issue with RD is that load times can be impacted. It is due to the number of desktop elements that the mobile version embeds and conversely, many mobile elements the desktop version needs to embed.

Elements to take into account for a SEO-friendly responsive design mobile version

• To tell browsers that your page is suitable for all devices, add a Meta tag at the beginning of the document:

• The Meta Viewport tag tells the browser how to adjust the size and scale of the page to the width of the device.
• If the Mata tag is missing, mobile browsers will display the desktop page by default (at the size of the computer screen).
• Font sizes can be inconsistent, and users might have to double-tap the screen or pinch to zoom in order to view and use the content. When a page requires such interactions on a mobile device, Google considers that it is not mobile-friendly. You need to make sure that all elements are visible for the mobile version without zooming
• Links need to have a certain distance with one another
• Your content needs to be the same on desktop and on mobile: cut down on information and content.” After your mobile site is in place, you may find that you don’t need to add more to the desktop version to the site, after all.
• Think small: Less is more when it comes to mobile. Since phones aren’t as powerful as a desktop browser, you should make sure your site is optimized to load quickly
• Pick a reliable web host: the simple fact is that if you choose a host or plan that doesn’t offer the speed and resources you need, no amount of work on your part can stop your website from performing poorly.
• Keep your site’s loading times to a minimum

PWA

We recommend that you look at building the new site using the PWA framework for the following reasons:

• Render extremely fast
• Progressive web application applies SEO best practices by design - and Google has become mobile "first", meaning it takes your mobiler version into account to rank your website
• Users will have access to features like push notifications
• Users will have a simple home screen icon, the ability to launch in full screen
• In some cases, browsers are even actively crawling in search of PWAs to add to their own app stores, like Bing.