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.

Seven Mobile SEO Myths Exposed Not too long ago, the article Mobile SEO is a Myth got a lot of people fired up about the foolish notion that mobile SEO is a construct developed by salesmen to sell more SEO services. I responded in the comments to the author’s points, and have addressed this point in multiple articles over the years, so I’m not going to argue it here again. While I don’t agree at all that mobile SEO itself is a myth, there are many myths around mobile SEO that practitioners need to be aware of. Here are a few of the most prevalent… Myth #1: A Dotmobi TLD Is Necessary For Indexing & Ranking According to the first result in Google for the query [mobile seo best practices], “the best way to build your mobile web site for SEO is by using the dotMobi domain”. One of the reasons dotMobi gives for this is the following: Futhermore, no DotMobis appeared in the results of an upcoming Resolution Media study that deconstructs the smartphone search results for some top mobile queries in Google.

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

16 Differences Between Google Mobile & Desktop Search Results In 2012 Google continues to differentiate mobile results from desktop search results, having recently announced interactive answers for tablet and mobile and a test for smartphone icons in smartphone search results. Did you even know that Google mobile search results (whether tablet, feature phone or smartphone) can be different from desktop results? In May of last year, I shared 14 ways they’re different. This year some differences have disappeared and others have taken their place, but in all, there are at least 16 known differences between Google smartphone results and Google desktop results as of this writing. Google announces separate changes for mobile and desktop in their search quality updates, so the fact that there are some differences between mobile and desktop results that marketers should be aware of shouldn’t be too controversial by now. Yet, I know this is a counterintuitive and even an unpopular notion in SEO at the moment. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16.

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

Mobile SEO Best Practices There is little doubt that mobile search is the hot topic in the SEO world at the moment. Some brands are now finding that more than 30 percent of all searches come from mobile devices, according to Mobile Marketer. It’s fair to say that mobile search is quickly moving out of the Stone Age and into the digital age. That’s the premise of a new insight paper, Mobile SEO Best Practices, published recently by my company, MediaWhiz (disclosure: I lead MediaWhiz’s search marketing and digital strategy divisions). The tips range from the simple (e.g., understanding the differences in how people search on mobile devices compared to their searches on desktops) to the complex, such as best practices to ensure a site’s mobile content can be properly viewed and crawled by search engines. Below are my top-10 tips for effective mobile SEO. 1. Searchers using mobile devices enter keyword queries differently than they do with desktop applications. 2. 3. 4. Web developers should consider vertical menus.

amphtml/examples/metadata-examples at master · ampproject/amphtml 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.

Accelerated Mobile Pages (AMP) - Analytics Help Accelerated Mobile Pages require a different Analytics tag. Accelerated Mobile Pages (AMP) is an open source page format for the mobile web that makes it possible for your pages to render near instantly on mobile devices. AMP (.amp.html) pages are similar to HTML pages and load in any browser. Analytics data collection is implemented as a layer on top of the Measurement Protocol. AMP Analytics supports the Analytics opt-out. Requirements To use Analytics on .amp.html pages, you must: Disclose how Analytics collects and uses data and offer users the opportunity to opt-out of Analytics. Capabilities and limitations AMP Analytics allows you to collect the following data: Page data: Domain, path, page title User data: client ID, timezone Browsing data: referrer, unique page view ID Browser data: screen height, screen width, user agent Interaction data: page height and page width Event data AMP Analytics API