background preloader

The Definitive Guide To Technical Mobile SEO

The Definitive Guide To Technical Mobile SEO
Related:  SEO Mobile-friendly Website Tips, AMP, Page Speed

Mobile SEO Overview  |  Mobile Friendly Websites  |  Google Developers Let's make sure your site shows up in search results. Here you can learn how to configure your site for multiple devices and help search engines understand your site. 3 ways to implement your mobile website There are three main techniques for implementing a website that can handle view screens of all types and sizes. Responsive web design: Serves the same HTML code on the same URL regardless of the users’ device (desktop, tablet, mobile, non-visual browser), but can render the display differently (i.e., “respond”) based on the screen size. Google does not favor any particular URL format as long as the page(s) and all page assets are accessible to all Googlebot user-agents. For more information on selecting a mobile site configuration (and weighing the pros and cons of each option), please see “Building Websites for the Multi-Screen Consumer”. The key points for going mobile As we discuss later, there are different configurations you can choose to make your site mobile-friendly.

Mobile Site Configuration & The Vary HTTP Header Yesterday, Google announced more changes to the Google mobile search algorithm , which we can expect to roll out shortly. This update is intended to improve the search experience for mobile users by “address[ing] sites that are misconfigured for smartphone users” — presumably by improving mobile rankings for sites that have been optimized according to their Mobile Optimization Guidelines . In an attempt to prevent some confusion, Google also updated these guidelines to include a list of common mistakes , along with ways to avoid said mistakes. In November 2011, when Google launched the GoMo project to help businesses make “m.” versions of their desktop sites, it seemed like a tacit endorsement for the development of mobile-specific pages from Google, and that was great. The inconsistency in Google’s messaging about mobile SEO leaves large, enterprise-level strategists wondering if it is truly possible to future-proof their mobile search strategy. The Problem With Responsive Design

Responsive Web Design  |  Mobile Friendly Websites  |  Google Developers Responsive web design (RWD) is a setup where the server always sends the same HTML code to all devices and CSS is used to alter the rendering of the page on the device. Google’s algorithms should be able to automatically detect this setup if all Googlebot user agents are allowed to crawl the page and its assets (CSS, JavaScript, and images). Use meta name="viewport" tag to tell the browser how to adjust the content.Check out our Web Fundamentals site for further documentation. To signal to browsers that your page will adapt to all devices, add a meta tag to the head of the document: The meta viewport tag gives the browser instructions on how to adjust the dimensions and scaling of the page to the width of the device. For users, this means that font sizes may have an inconsistent appearance, and users may have to double-tap or pinch-to-zoom in order to be able to see and interact with the content. For responsive images, include the <picture> element. Why responsive design JavaScript

Vary with Care - IEInternals About the Vary Response Header As described in the HTTP/1.1 specification (RFC2616), the Vary response header allows a cache to determine if a cached (still fresh) response may be returned for a subsequent request, based on whether or not the new request's headers match those that were sent when the the previously response was originally cached. The Vary field value indicates the set of request-header fields that fully determines, while the response is fresh, whether a cache is permitted to use the response to reply to a subsequent request without revalidation. For uncacheable or stale responses, the Vary field value advises the user agent about the criteria that were used to select the representation. The Problem(s) Unfortunately, the WinINET caching engine (below Internet Explorer and other applications) does not cache outbound request headers. Note: IE's isn't the only cache with issues around Vary; see Internet Explorer 6

What will Google’s Accelerated Mobile Pages (AMP) mean for marketers? Google’s Accelerated Mobile Pages (AMP) project has launched, taking a huge stride towards Google’s stated goal of a “better, faster mobile internet.” But just what does AMP consist of, and what will it mean for the marketing industry? Last October, Google announced the introduction of its Accelerated Mobile Pages project, a new open-source initiative aiming to “dramatically improve the performance of the mobile web.” This latest move towards a more mobile-friendly web is Google’s answer to Facebook’s Instant Articles and Apple News. In the months since the announcement, we’ve seen a lot more information released about what AMP will consist of, its key features and how it will alter the experience of the mobile web. What is AMP, and what does it do? Simply put, Accelerated Mobile Pages is a stripped-down version of the mobile web which runs on a reinvented version of the language used to create web pages: HTML. Sounds good so far. But don’t despair just yet. Fine-tuning ad control

Google's Starting To Enforce Smartphone Penalties: The Evidence In June, Google announced it would be adjusting search rankings appearing on smartphones based on how well the site in question handled the mobile user experience. The company didn’t say exactly when these changes would be rolling out, but only said it planned “to roll out several ranking changes in the near future that address sites that are misconfigured for smartphone users.” These smartphone misconfiguration errors include faulty redirects like app interstitials or homepage redirects, and smartphone-only errors such as unplayable videos, smartphone-only 404 pages and serving 404 pages or redirects when equivalent content exists on the desktop site. It’s anyone’s guess how far away “the near future” is; so at SMX East, I presented results of a random sample of about a hundred queries where sites that exhibited these smartphone misconfiguration errors showed up in smartphone and desktop search results. Related Topics: Channel: Mobile | Google: Mobile | Mobile Search

amphtml/examples/metadata-examples at master · ampproject/amphtml Use Google's Image & Mobile Optimisation Guidelines For SEO Advantage At the recent SMX Advanced conference in Seattle, Google’s Tech Lead for its developer program, Maile Ohye, spoke on a panel entitled, “Complicated Technical Issues That Sabotage SEO Efforts.” (There’s an excellent write-up on it here.) She discussed (among other things) the company’s recently announced changes to rankings in smartphone search results based on mobile user experience. Consolidate your image optimisation strategy with your mobile strategy to best affect your SEO traffic. Soon after, RKG chief product officer, and SEL contributing editor, Vanessa Fox produced an excellent write-up on technical SEO for mobile sites, in which she discussed different methods of optimising websites for different devices (in general URL architecture terms), including the benefits and challenges of each method. Page Load Time Is Important For Mobile Google wants to provide mobile searchers with the best experience possible, and page response times are a part of this experience. Why? So what?

Include Iframes and Media Learn how to display an iframe and include media content in your pages. Display an iframe Display an iframe in your page using the amp-iframe element. amp-iframe requirements: Must be at least 600px or 75% of the first viewport away from the top. To include an amp-iframe in your page, first include the following script to the <head>, which loads the additional code for the extended component: An example amp-iframe from the released.amp example: Include images, video, and audio in your page using AMP media elements. Include an image Include an image in your page using the amp-img element. amp-img requirements: Must include an explicit width and height. Responsive image example: Fixed-size image example: Hidden image example: The AMP HTML runtime can effectively manage image resources, choosing to delay or prioritize resource loading based on the viewport position, system resources, connection bandwidth, or other factors. Include an animated image Include a video Include an audio resource

amphtml/ at master · ampproject/amphtml How to Style Your Pages Like all web pages, AMP pages are styled with CSS, but you can’t reference external stylesheets (with the exception of custom fonts) and inline style attributes aren’t allowed. Also, certain style properties related to animations have been disallowed due to performance implications, and the embedded style tag must be in the <head> of the page. These different kinds of limitations are there to improve the performance of your pages, but can be overwhelming at first. When in doubt, always test your styles using the AMP validator. Even though inline stylesheets add bytes to every page, the saved round trip request to another external file would be even slower. Having your styles in the <head> of the page effectively means that all your CSS becomes critical CSS that is loaded before the rest of the page is loaded, so only include what you need. Read on to learn how to style your AMP pages: Learn more about critical CSS in this article, Understanding Critical CSS. Add styles to a page

Validate AMP Pages The key strength of AMP isn’t just that it makes your pages fast, but that it makes your pages fast in a way that can be validated. This way, third parties such as Twitter, Instagram or Google Search can feel great about serving AMP pages to readers in increasingly interesting ways. How do I check if my page is valid AMP? The AMP validator comes bundled with the AMP JS library, so it is available on every AMP page out of the box. Open your page in your browser Add “#development=1” to the URL, for example, What happens if my page isn’t valid? The AMP validator isn’t just a convenience for you during development. If the AMP validation service detects that there’s something wrong with your page, it won’t get discovered and distributed by third party websites and won’t appear in the AMP Cache. How do I fix validation errors? Most validation errors are easy to address and fix.

How to Contribute AMP Issues Please file any feedback you have about the actual project at the amphtml issue tracker. Documentation Issues For bugs or inconsistencies on this website, file a bug at the docs issue tracker instead. Contribute source code Want to help fix bugs or make AMP even faster? Please see the CONTRIBUTING file for information on contributing to the AMP Project, the DEVELOPING file for documentation on the AMP library internals, and hints on how to get started. Google has launched Accelerated Mobile Pages Welcome to a speedier mobile web. It’s been a massive week for the Google SERPs this week and it’s only Tuesday. As well as Google killing Right Hand Side Ads and shutting down its own comparison service, it seems that Google has also launched its Accelerated Mobile Pages project. Although we had been expecting it around next weekend, as Google stated it would be here “late February”, it seems some people have been seeing results with a little AMP icon today (Tues 23 Feb). The AMP project is an open source initiative which aims to improve the performance of the mobile web. As our own Rebecca Sentance explained in her article on Google’s AMP only yesterday, AMP pages are a “stripped-down version of the mobile web which runs on a reinvented version of HTML.” Google has stated that a page created with AMP HTML can load anywhere from 15 to 85% faster than the non-AMP version of that page. Fair enough to be honest.