Google’s 5-step Google mobile optimization plan for your website!
Why is creating a mobile-friendly website important for Google?
Over the past decade, global audiences have moved from desktop to mobile. Google is announcing a fully confirmed mobile indexing preference by 2020. This means that in website crawling, priority is given to mobile-optimized websites.
This becomes extremely important for website owners: if you want to improve your site’s rankings and stay top in the SERP, make it mobile-friendly.
Recent statistics also support making your website mobile-friendly:
- By 2020, mobile users will account for more than half of global traffic, and this trend is likely to continue.
- It is one of the ranking factors for search engines, helping mobile-friendly websites increase SERPs.
- According to Google, 70% of websites have turned to the mobile experience.
So there’s no time to go again! Learn how to create mobile-friendly websites with free and hassle-free tools.
Ready to make your website mobile-friendly?
When thinking of mobile-friendliness, you should keep this photo of a smartphone user in mind. The most important is:
- The mobile screen is quite small
- Cell phones typically have slower processors than PCs
- Cellular connections typically have lower bandwidth and slower load speeds
- Everyone touches the touch screen with their fingers
- People use mobile devices while on the go
This step-by-step guide provides a clear strategy to do the long-term and do all the optimization work for your mobile device properly.
Where to start?
1.Check out the site for mobile-friendliness
Check if your site failed or pass Google’s mobile-friendliness test.
2.Choose your most mobile-friendly solution
Choose your best solution: this can be responsive design, dynamic serving, a separate mobile-friendly website, or a mobile app.
3.Use mobile SEO best practices
For effective mobile SEO, make sure your site meets Google’s mobile-friendly criteria, like using readable text, avoiding uncommon software. variable on a mobile device (like Flash), etc
4.Avoid common mobile optimization errors
Don’t block JavaScript, CSS, or image files; avoid including unplayable content, fix irrelevant cross-links, etc.
5.Use SEO tools to improve your rankings in mobile SERPs
Research your rankings and keywords to see what content and experiences are relevant to your mobile audience and ensure consistency for both mobile and desktop views of your website.
Let’s explore the steps in detail.
1. Test your website for mobile-friendliness
Confused about how to create a website without serious mobile issues? First of all, check your website analytics to see where you stand in terms of mobile optimization.
Go to Google Analytics> Audiences> Mobile> Overview / Devices and see the visitor breakdown by device: mobile, desktop, and tablet. You can break this down further to see metrics like bounce rate, hit time, and goal conversion rate across specific devices (iPhones, Samsung phones, iPods, etc.).
Then test your website with Google Mobile-Friendly Test. There, you can get one of two results:
Your website is mobile-friendly, meaning you have nothing to worry about.
Your website did not pass the mobile-friendliness test. Usually, the reasons for this are: the text is too small to read, the links are too close together, and the mobile view isn’t set.
So if your website fails on Google’s mobile-friendliness test, move on to the next step.
2. Choose your mobile-friendly solution
When you decide on a long term mobile device optimization plan, there are a number of options for you to choose from. Consider which of them is right for your project.
1. Responsive Design: Responsive web design
Responsive web design is the most elegant solution and recommended by Google. In short, the same website with the same URL is served across all devices, but the page adapts its layout for each device. The approach is to code in such a way that the content of the website is automatically adjusted to the height, width, resolution, and other characteristics of a particular gadget.
Advantages
- Easy to do. Ask any web developer what they think of responsive design and they’ll let you know that’s simply great. The secret behind the popularity of this approach is that it is a much more affordable solution than designing a mobile website that needs to be tailored to each type of device.
- Easy to maintain. One of the biggest advantages is, when you build a website with a responsive web design, you can maintain it quite easily.
Defect
- Responsive design has a bit of a limit on the number of ways it can “respond” to users. Because you only maintain a single piece of content, you can create a website experience that displays information for just one type of user intent.
- Implementing a responsive web design means a massive redesign of your website’s layout and structure, which may not be an option for some website owners.
2. Dynamic Serving: Dynamic service
The user’s device is discovered, and a custom page displayed is created specifically for that device. With dynamic serving, the server responds with different HTML (and CSS) on the same URL depending on which user agent requests the page (mobile, tablet, or desktop).
Advantages
- Compact mobile site content optimization.
Defect
- It’s more expensive than responsive design since you need to generate HTML-specific responses for mobile devices.
- User-agent detection is very easy to fail. For example, the user experience might be corrupted when a new user agent comes in, or when a tablet is considered a smartphone.
3. Mobile version of website separately
This approach lies in creating a separate mobile-friendly website for display on mobile devices. Mobile users are redirected to another mobile-specific URL. Tablet users are shown on the website on their desktop. As a rule, the mobile version has less content than the original website and offers much more suitable navigation for mobile browsing.
For example, many online businesses today have the m.example.com subdomain, to which mobile visitors are redirected based on their device/user agent. A link to the official version is also often provided, in case one wants to see the entire website.
Advantages
Flexible. Mobile users typically want certain types of content, such as business locations, hours of operation, directions, and more. With a separate mobile site, it’s easy to create your web pages specifically designed for mobile users, meaning filling them with significantly different information than we expected. found on the desktop website.
Analysis. From a marketing standpoint, it’s simpler to get your mobile traffic going into a separate sales funnel. So the mobile website gives you all the analytics you need for your mobile campaign.
Defect
It is difficult to cover all facilities. With this approach, it’s hard to tailor your website to all kinds of handsets that it can be accessed. However, if you are mainly targeting iPhone users, then this shouldn’t be a problem.
An annoyance to maintain. While your mobile-friendly site might be well synchronized with your main site, it still requires maintenance and you’ll have to keep that in mind every time you update content or make changes. his website.
4. A mobile application
A separate app made for mobile users. This option is often used in conjunction with any of the options above.
Mobile apps take mobile user engagement to the next level. They are arguably the most user-friendly solution for mobile web marketing – according to a study by Jakob Nielsen, they have “the highest success rates”.
At the same time, studies show that the average retention rate of app users for the best three months is around 30%. Well, this shouldn’t be surprising, given the number of brands offering mobile apps today.
3. Use mobile SEO best practices
Whichever solution you choose, do these popular mobile SEO tasks, aimed at making your website mobile-friendly:
Use HTML5 Code
If possible, code in HTML5 and avoid uncommon mobile software, like Flash. This will ensure your content is displayed smoothly on the widest variety of handsets.
Make sure your page loads quickly
Speed is a key factor as mobile users don’t like wasting time. The recently updated Google Core Web Vitals metrics help estimate whether a website is performing well, and one of its core metrics is the website’s loading speed. If your website doesn’t start to load within 2.5 seconds, it needs improvement.
You can find many free tools to measure user experience, like the Chrome User Experience Report, Lighthouse, and more.
For example, to test your website speed with Page Speed Insights, simply enter the URL and see if your site passes the Core Web Vitals score. The tool provides diagnostic reviews and suggestions for improvements.
Tip: to make pages load faster on mobile devices, Google supports AMP (Accelerated Mobile Pages). You can read more about how to install AMP for websites here.
Don’t make your pages heavy
To make your mobile-friendly web pages load faster, avoid cumbersome images and ads. Heavy files can harm your user experience and your site’s ranking in the mobile SERPs. Use web-suitable image formats, cut down on pixels to resize images. See this tutorial on optimizing images for the web.
While the screen on mobile devices is quite small, it is sometimes difficult to see the navigation buttons, not to mention pressing them on the touchscreen. So you should make them clearer. Besides, if you have extensive top navigation, it’s best to move it down to the bottom of the page.
Make navigation buttons stand out
While the screen on mobile devices is quite small, it is sometimes difficult to see the navigation buttons, not to mention pressing them on the touchscreen. So you should make them clearer. Besides, if you have extensive top navigation, it’s best to move it down to the bottom of the page.
Think about how to make the menu that best serves your users – with a hamburger, tab template, preference template, or something else (Make your page content fit the screen
Fit your page content to the screen
Create content across the screen so your visitors don’t have to scroll horizontally to see the full content. It is easily done with a responsive design. That will require editing some of your tags and CSS styles.
You should set <meta name = “viewport” content = “width = device-width, initial-scale = 1.0”> value in the viewport meta tag to instruct the page to match the screen width in pixels regardless of device .
Tip: to check if all of your elements are scalable for the screens of different mobile devices, you don’t need to test each of those factors. Go to your browser’s Developer Tools, turn on the Device Switch toolbar, and switch between devices to check how your content is displayed.
Make your text readable without zooming in
Use readable text without double-clicking it. Apply a simple clear font and a large enough text size. You can edit the CSS media queries and breakpoints to arrange images and text, style them, and scale them by different screen widths.
Put links far enough apart to support extraction
Avoid cramming too many touch elements into a single page segment or making them too small. Google Use Alt tag images
If you use an existing CMS on your website (instead of coding from scratch), here are some mobile optimization recommendations for websites running on WordPress, Joomla, Drupal, Blogger, vBulletin, Tumblr, DataLife Engine, Magento, Prestashop, Bitrix, and Google Sites. In short, you need to check that your theme is up to date and supports responsive design; you can find such information in the subject document.
Use Alt tag images
A lot of people who use mobile devices to surf the web will have images blocked to reduce traffic consumption and speed up downloads. Hence, it becomes important to use image alt tags as they will tell the user what your images are about. Not to mention that search engines also prioritize image alt tags because they cannot read information from the image.
Make quick site search available
Web site search is essential for mobile users: not only is it within reach, but it should also do its job well. So tailor your documents for SEO with title and tag, and check how search and suggestions work on your website.
Provide jump links
As far as possible, scrolling on mobile devices is really annoying and time-consuming. Using jump links (used in the index of long posts) will be good for users when they want to get to the piece of content they are interested in fastest.
Create push-to-call buttons
Why not include a Click to Call button somewhere on your mobile site. After all, it will be viewed on the phone! As studies reveal, such a node can significantly increase conversions.
Turn on automatic login
Or, prompt the user to enter their credentials the next time they log in. This will save them sweat because data entry is more difficult on mobile devices.
4. Avoid these mobile device optimization mistakes
Once you’ve chosen the solution that best suits your goals and budget, here are some common mobile optimization errors to avoid.
Does not block JavaScript, CSS, or image files
Google has long advised SEOs not to block these vehicles (say in robots.txt), as this can lead to poor rankings for mobile as well as desktop websites. your desk. To make sure they’re not blocked, check with the URL Inspection Tool in Google Search Console.
Don’t lazy to load your main content
Lazy-loading content check – content appears after the main content, in the first screen, is fully loaded. Slow loading content reduces initial load time and size. This should not be your main content, the “official” content on your site. You have to make sure that everything you want is loaded in the view.
Do not use frames
Frames are not recommended for any type of SEO, as they make it harder for crawlers to pass through your website. And they have become especially important for mobile web page display. So frameworks are a no-no for your mobile SEO.
Set up your redirects properly
Regarding the mobile website version, a faulty redirect is any redirect that points the mobile user to the wrong URL equivalent to the “desktop” URL. Usually, these issues will be reported in Google Webmaster Tools.
Pay attention to 404 codes for mobile-only
Sometimes a page that loads perfectly well on desktop returns 404s on mobile. The best practice is to make sure the corresponding mobile page is not 404, and always redirect mobile users to the mobile equivalent pages of your desktop pages.
Check for irrelevant cross-links
If you use a separate mobile website, check its internal links for consistency. Make sure those internal links go to mobile-optimized pages, not to desktop partner sites (such as desktop-optimized homepage).
Don’t use tables to edit layouts
A table is aligned only on the mobile page to represent tabular data. Some people use table elements to adjust the layout, which is a bad idea for a mobile site.
Don’t create pop-ups that ruin the user experience
Don’t let pop-ups appear in another window because it’s difficult to switch between windows when surfing the web from a mobile device. Besides, make sure that interstitials don’t hinder viewing of your target content – this will improve user experience and be popular with search engines as well.
Don’t forcefully force users to download your app
If you have an app that you’d like to advertise to mobile users, this shouldn’t be done in a way that prevents users from browsing your content unless they download the app. This gives a poor user experience on your website and can cause indexing issues.
Don’t forget to add the mobile URL to your Sitemap
If you have a separate version of your mobile-friendly website, you can submit multiple sitemaps to indicate that some of your URLs serve mobile web content. After you add your mobile content, submit your Sitemap to Google as usual. By the way, this becomes irrelevant for responsive webpages, the URLs will be listed in a Sitemap.
Make your desktop and mobile versions consistent
Make sure your mobile and desktop sites have the same structured data. Put together metadata, image alt tags, etc.
5. Use mobile SEO tools to improve your rankings in Google Mobile
So even if you’ve finished your mobile-friendly website that meets Google’s criteria, it means that it will automatically rank top in electric search engines. cell phone? Yes, no. You still need to optimize your website / mobile app to promote it in mobile search or in the app store.
Basic knowledge of SEO on mobile devices
In addition to covering the mobile web design basics mentioned above, keep an eye on the optimization aspect entirely related to SEO.
Keyword research focuses on mobile devices
Maybe you should use slightly different keywords for your website / mobile app than the ones you use for your desktop website? Go to Google Keyword Planner and select Mobile Trends to find out:
Crawl in the form of mobile Googlebot
You can see your website as Googlebot mobile crawling it. Go to Site Checker> Options> Crawler Settings> Follow the Googlebot-Mobile robot.txt instructions.
ASO basics (app store optimization)
In 2018, people downloaded the app 194 billion times, and more than half of these downloads were through app store search. So it’s a great idea to optimize for higher positions in both Google Play and iOS App Store.
App store optimization ranking factors
- Keyword in app title (this is a great tool to pull keyword suggestions on the App Store from autocomplete)
- Keywords in the application description
- Use a nice icon (to increase downloads, this will help ASO)
- Use the right categories and categories
- Strive for higher ratings and better reviews
- Try to download more
Pro tip: use the Google+ plugin on your app page, as +1 helps your ranking in Google Play.
Conclusion
So, do you find mobile web design easy and fun? Do you have your own mobile-friendly optimization methods in place to make your website super hit? Share your insights and experiences in the comments below!
