Google AMP

Follow

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. 

 


 Activating AMP 
To get started, you need to activate AMP for your Metro Publisher site.

Screen_Shot_2017-10-09_at_4.37.56_PM.png

 Log in to Metro Publisher as an Admin:

  1. Go to Settings > 3rd Party
  2. Then, from the pulldown on the upper left, select ALL
  3. Then scroll over to the right and click Google AMP
  4. 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.

amp-logo.png

Log in to Metro Publisher as an Admin:

  1. Go to Design > Refine Colors
  2. On the header, click the pencil icon on the upper right
  3. At the bottom, 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.

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/

 

 

 

 

 

Have more questions? Submit a request

Comments

Powered by Zendesk