The Accelerated Mobile Pages (AMP) Project is an open-source initiative by Google (and Twitter) which aims to make the web faster by providing an alternative distribution for your web pages on Google's own network.
AMP pages are fast to load and therefore faster for Google to crawl, since they consist of lightweight HTML. Due to the required structured data, they are easy for the search engine to understand. In addition, because of the so-called Google AMP Cache, these pages are Google-hosted, heavily cached versions.
This in turn means that Google products serve valid AMP documents and their resources from their platform instead of a website’s own hosting environment. AMP allows Google to perform their own optimization by stripping certain CSS and severely limiting JavaScript, for example.
As of 2021, Google AMP has become more controversial. Please be sure to do your own research before deciding whether or not to implement AMP. Changes to AMP continuously occur, as with all other services.
The good news is that AMP is neither a requirement for Google Discover, nor is it a Top Stories requirement any longer. Google had previously excluded non-AMP pages from visibility in its mobile Top Stories.
In fact, there is no more preferential treatment for AMP in search results, Top Stories, or Google News ever since Google introduced its Core Web Vitals metrics. Google is even removing the AMP badge icon from the search results. Please note that webpages failing Core Web Vitals are still eligible for Google's Top Stories.
As part of the page experience update, we're expanding the usage of non-AMP content to power the core experience on news.google.com and in the Google News app.
Additionally, we will no longer show the AMP badge icon to indicate AMP content. You can expect this change to come to our products as the page experience update begins to roll out in mid-June. We'll continue to test other ways to help identify content with a great page experience, and we'll keep you updated when there is more to share.
At the same time, lead capturing and navigation aren't easier with AMP and it limits publishers' advertising options (number of ads on a page, types of ads) as well as the variety of enriched content on their pages.
An antitrust lawsuit against Google LLC has been filed under US federal and state antitrust laws and deceptive trade practices laws.
Further reading:
Google throttled non-AMP page speeds, created format to hamper header bidding, antitrust complaint claims (Searchengineland)
Publishers Move to Abandon Google-Supported Mobile Web Initiative (The Washington Post)
Participating in the AMP Project
With Metro Publisher, we make it easy for you to participate with AMP. You simply have to go "opt-in" to AMP and our system will generate an alternate set of HTML pages that comply with AMP's specifications.
Below are the basic steps to set up AMP for your Metro Publisher website. For any questions about AMP, please refer to Google's documentation.
2. Adding your logo to AMP pages
3. Customizing the design of AMP Pages
5. Ads with AMP
Activating AMP
To get started, you need to activate AMP for your Metro Publisher site.
Log in to Metro Publisher as an Admin:
- Go to Settings > 3rd Party
- Then, from the pulldown on the upper left, select ALL
- Then scroll over to the right and click Google AMP
- Check the box that says Activate AMP
Once you've done that, Metro Publisher will automatically generate alternate HTML for all your content. Google will be able to see these alternate pages and provide that HTML to its mobile users on Google search results pages.
Adding your logo to your AMP pages
After you've activated AMP for your Metro Publisher website, you will want to add a logo for your AMP pages.
Log in to Metro Publisher as an Admin:
- Go to Design > Edit Current Design
- From the edit palette, click Logos and Colors > Other Logos.
- In the pop-up, you'll see an option for an "AMP Logo." Click that and add your logo.
Google image requirements
-
Files must be raster, such as .jpg, .png, or .gif (do not use vector files such as .svg).
- The logo should be a rectangle, not a square.
- The logo should fit in a 600x60px rectangle, and either be exactly 60px high (preferred), or exactly 600px wide. For example, 450x45px would not be acceptable, even though it fits in the 600x60px rectangle.
- It is best to make a version of your logo that fits within these dimensions, has a white background, and is legible at that size. Re-using the logo from your website header is usually NOT sufficient.
Read more...
Customizing the design of AMP pages
In the Design Studio, there is an amp.css file where you can add your own CSS to customize your AMP pages. There is quite a bit that can be done with CSS, but AMP limits CSS file size to 50kb, so keep it straightforward. Here's a resource that outlines what CSS is currently supported by AMP. Particularly interesting here is how to use custom fonts.
If you've got custom fonts w/ @font-face in your screen.css, to use on those same fonts on your amp.css make sure to add /api/design/ to the front of every font file in the URL.
See the example here from screen.css:
@font-face {
font-family: 'Fanwood';
src: url('Fanwood.otf') format('opentype');
Change the URL this way to use the same font in amp.css:
@font-face {
font-family: 'Fanwood';
src: url('/api/design/Fanwood.otf') format('opentype');
Once you've added some CSS, you'll need to save and publish your edits to see them on the live AMP versions of your articles. Keep reading to learn how to preview the AMP version of any published article on your site.
NOTE: If you would like your AMP pages customized to match your design, this can be arranged through our custom support services. We estimate 3-5 hours of billable time. If you are interested, please put in a support ticket to inquire.
Previewing AMP pages
You can preview the AMP page for any article from your mobile phone or desktop.
To do that, you simply have to add "/api/amp" after your wesbite's domain for any article. For example, if you have an article with this web address (URL):
http:mywebsite.com/food/recipes/chocolate-tart/
You can preview the AMP page by adding "/api/amp" like this:
http:mywebsite.com/api/amp/food/recipes/chocolate-tart/
Ads with AMP
Metro Publisher implements AMP on content and the ads get embedded into that content. The AMP ad code is used with the regular Google ad ID.
Only the mp_mpu_right is shown, meaning that if you have AMP activated and have a google_ad_pub_id set, the mpu_right ad will appear in the content.
Comments