The Accelerated Mobile Pages (AMP) Project is an open-source initiative by Google which aims to make the web faster by providing an alternative distribution for your web pages on Google's own network.
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.
The current integration with Metro Publisher is still in Beta mode, and we are looking for feedback from our clients in order to make improvements.
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.
5. Ads with 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.
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:
src: url('Fanwood.otf') format('opentype');
Change the URL this way to use the same font in amp.css:
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):
You can preview the AMP page by adding "/api/amp" like this:
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.