How Can I Add A Frequent Page To The Google Start Up Page

Avoid common mistakes when designing for mobile

This page describes some of the virtually mutual mistakes that website owners make when designing for mobile.

Blocked JavaScript, CSS, and Epitome Files

For optimal rendering and indexing, ever allow Googlebot access to the JavaScript, CSS, and image files used by your website then that Googlebot can see your site like an average user. If your site'southward robots.txt file disallows crawling of these avails, it straight harms how well our algorithms render and alphabetize your content. This tin result in suboptimal rankings.

Recommended deportment

Make sure that Googlebot can crawl your JavaScript, CSS and image files past using the URL Inspection tool in Search Console. The tool shows yous how Googlebot sees and renders your content, and it helps you lot identify and set up a number of indexing issues on your site.
Check and examination your robots.txt in Search Console.
Test your mobile pages with the Mobile-Friendly Test to see if our systems detect your website as compatible for mobile users.
If you use carve up URLs for your mobile pages, make sure to test both the mobile and the desktop URLs, so you can confirm that the redirect is recognized and crawlable.

Unplayable Content

Some types of videos or content are not playable on mobile devices, such equally license-constrained media or experiences that crave video players that are not broadly supported on mobile devices. Unplayable content, when featured on a page of whatsoever website tin can be very frustrating for users.

When users visit a page with content not supported on a mobile device, they see an error message. This provides users with a poor mobile experience! Instead of using a proprietary video thespian or putting content in unsupported formats, nosotros recommend using HTML5 standard tags to include videos or animations.

For animated content, use HTML5 animations that work across all web browsers. Google Web Designer makes it piece of cake to create these animations in HTML5.

Recommended deportment

Use HTML5 standards for animations to provide a good experience to all your users.
Utilise video-embedding that'south playable on all devices.
Consider having the transcript of the video bachelor. This makes your site accessible to people who use assistive browsing technologies or who have browsers that can't play a proprietary video format.

For more details, read about video best practices on Google'due south Web Fundamentals.

Faulty Redirects

If you have split up mobile URLs, nosotros recommend that you redirect mobile users on each desktop URL to the appropriate mobile URL. Redirecting to other pages (such as always to the homepage) would be incorrect.

Examples:

Your desktop site's server is configured to redirect mobile users to the mobile site'due south homepage, regardless of which URL they originally requested, even if the mobile site has the equivalent page to the redirecting desktop page.
Your desktop site's URLs are dynamically generated with URL parameters that don't map well to the equivalent mobile URL. For example, a user who is looking for a railroad train timetable on a specific date on the desktop site may be frustrated if they are redirected to the general timetable search page on the mobile site. We recommend that you configure the redirection correctly if yous accept an equivalent mobile URL so that users end up on the page they were looking for.
Your desktop site redirects some mobile devices but not others. For example, a site may redirect only Android users to the mobile site and not redirect iPhone or Windows Phone users.

Recommended deportment

Use Search Console. If y'all're a verified user, we'll ship you lot a message if we detect that whatever of your site'due south pages are redirecting smartphone users to the homepage.
Fix your server so that information technology redirects smartphone users to the equivalent URL on your smartphone site.
If a page on your site doesn't have a smartphone equivalent, proceed users on the desktop page, rather than redirecting them to the smartphone site's homepage. Doing nothing is better than doing something wrong in this instance.
Try using responsive web design, which serves the aforementioned content for desktop and smartphone users.

Mobile-Only 404s

Some sites serve content to desktop users accessing a URL simply prove an mistake page to mobile users.

To ensure the best user experience, if you recognize that a user is visiting a desktop page from a mobile device and you lot have an equivalent mobile page at a different URL, redirect them to that URL instead of serving a 404 or a soft 404 page. Also make sure that the mobile-friendly page itself isn't an error page.

Recommended actions

Use Search Panel. If y'all're a verified user for the site, yous'll get a notification in the bulletin panel.
If you have a smartphone site on a split up URL, set upwardly your server so that it redirects smartphone users to the equivalent URL on your smartphone site.
If you use Dynamic serving, ensure that your user agent detection is correctly configured.
If a folio on your site doesn't take a smartphone equivalent, keep users on the desktop folio. Showing the content the user was looking for is a much improve experience than showing an error page.
Use responsive spider web design when possible. This configuration allows you to serve the same content to users, whatever the device they apply.

Avoid interstitials

Many websites show interstitials or overlays that partially or completely cover the contents of the folio the user is visiting. These interstitials, commonly seen on mobile devices promoting a website'due south app, mailing list sign-upward forms, or advertisements, can make for a bad user experience. In farthermost cases, the interstitial is designed to make it very difficult for the user to dismiss it and view the existent content of the folio. Since screen real-estate on mobile devices is limited, whatsoever interstitial negatively impacts the user's experience.

App Download Interstitials

Many site owners promote their business' apps to their mobile website visitors. If not done with care, this can crusade indexing issues, and disrupt the visitor'southward usage of the site.

Avoid interstitials — The interstitial is blocking the user from completing tasks.

App banner — A imprint lets users consummate tasks while presenting the app.

Recommended deportment

Employ a simple banner to promote your app inline with the page'due south content. This banner can be implemented using:

A browser-supported imprint such as Smart App Banners for Safari or in-app install feel for Chrome.
An HTML banner or epitome, similar to a typical pocket-size advertisement, that links to the correct app store for download.

Irrelevant Cross Links

A common practice when a website serves users on separate mobile URLs is to have links to the desktop-optimized version, and likewise a link from the desktop page to the mobile folio. A common error is to accept links bespeak to an irrelevant page such as having the mobile pages link to the desktop site'south homepage.

Recommended action

Check your links to make sure that they point to the correct equivalent page.

Slow Mobile Pages

Information technology's important to make certain your mobile site loads quickly. Users can go very frustrated if they have to wait a long time to see your content.

Recommended action

Utilise Google PageSpeed Insights to detect if your page has any issues that tin slow your pages down, focusing on the "Speed" sub-section. Try to address the issues marked every bit "Should Gear up."

For more data, see:

Make your mobile pages return in under one second
Brand the mobile web faster
Optimize for mobile

Fix your viewport correctly

Because visitors to your site use a variety of devices with varying screen sizes, your pages should specify a viewport using the viewport meta tag. This tag tells browsers how to adapt the page'due south dimension and scaling to suit the device. Here are two common problems:

Using stock-still-width viewports. This makes the page not calibration well for all device sizes (and there are a lot).
Bold an unrealistically wide minimum viewport, which can force users on smaller devices to curlicue horizontally to read the content. This happens when pages use absolute values in CSS declarations, or use images designed to wait best at a specific browser width (such every bit 980px). To set up this fault, make sure the pages use relative width and position values for CSS elements, and make sure images can scale too.

Small-scale font size

Avoid setting the font size likewise modest—generally smaller than 12px—to be legible on a mobile device, forcing those visitors to "compression to zoom" in order to read. After specifying a viewport for your web pages, set your font sizes to scale properly within the viewport. Read more about font size best practices in Use Legible Font Sizes.

Impact elements as well close

Avoid setting bear upon elements such as buttons and links so close to each other that a mobile user can't easily tap a desired element with their finger without besides borer a neighboring element. To fix these errors, make sure to size and space buttons and navigational links suitably for your mobile visitors. Read more in Size Tap Targets Appropriately.