ZOO Amp Documentation
General
AMP, in a nutshell, is a framework for extremely fast loading mobile pages. It is a Google project. AMP HTML is an extremely slimmed-down version of HTML and therefore works extremely quickly on mobile.
ZOO Amp runs your ZOO Items through a process and creates AMP compatible HTML pages… and it happens automatically in the background.
Amp
Here are a few “at-a-glance” concepts regarding AMP:
- For AMP pages to be accessed, Google must first index your AMP pages. It does this by looking for an ‘amphtml’ link in your <head> code. (more on this later)
- AMP pages are not accessed directly on your site. When Google indexes your AMP page and serves it up on search, it actually shows the user a google hosted page.
- AMP can carry lots of the usual functionality of a normal web page, like ads, social links, images and video, so users shouldn’t get a worse experience.
ZOO Amp
Here are a few “at-a-glance” concepts regarding ZOO Amp:
- ZOO Amp will only create AMP pages for the layout types you need. Leave the layout blank and no AMP page will be created.
- ZOO Amp automatically adds the ‘amphtml’ rel link to the <head> of the normal webpage.
- You can style your AMP page how you like using a combination of Plugin Parameters and a Custom CSS ZOO element.
- ZooModsPlus have created some custom elements to help support ZOO Amp pages, there are:
- ZooAmpGooleAdsense
- ZooAmpSocialShare
- ZooAmpFacebookLike
- ZOO Amp “runs” when you save an item, so changing style setting in the plugin parameters or the Custom CSS element, will only take effect when you save the item. All previous saved versions will remain unchanged.
Click into the plugin to begin initial setup.
There are two ‘sides’ to the required setup for ZOOAmp; the plugin and ZOO settings.
Plugin Setup
The plugin parameters will allow you to determine the basic style of the AMP page.
Header Options
Under the “Header Options” tab, you will see a number of parameters to set up the AMP Page header, including header background colour and even the logo:
Footer Options
Under the “Footer Options” tab, you will see a number of parameters to set up the AMP Page footer, including background colour and copyright info:
Include AMP Plugins
Under the “Include AMP Plugins” tab, you will see a number of parameters that determine whether you want to include certain AMP plugins for AMP services. Select the ones you want to load:
Step 1: Connecting your web page to your AMP page
The first step in getting your ZOO Amp system to work is to create the “ZOO Amp Loader” element and place it in your “full” view. This will insert the required code in the <head> of your page and let Google know that you have an equivalent.
Here’s a step-by-step guide:
- Go to ZOO and click the “gear” icon to access your ZOO settings.
- Click the app you wish to configure
- Edit the elements of the type you wish to configure:
- Now create the “ZOO Amp Loader” element:
- And now add it to your full layout:
IMPORTANT NOTE: In this example, We’ve added the element to to the ‘top’ position, however, it doesn’t matter where you add this element, it can be added to any position in the full layout. Your frontend view won’t change.
Now that this element is created and placed, Google will now look for your AMP page when it comes to crawl your page.
Step 2: Adding content to your AMP page layout.
Now we’re ready to start adding your content elements to your AMP layout.
In ZOO settings, under “Extension Layouts” you’ll see the layout for ZOO Amp:
To edit the layout and add elements, click “AMP Layout”, this will load the layout editor:
Now you can drag and drop your content elements into the predefined positions.
The Layout Explained
We’ve created 8 distinct sections for you to use in putting together your AMP page. There are:
- Title
- Meta
- Section 1
- Section 2
- Section 3
- Section 4
- Section 5
- Section 6
This should give you enough scope to design an AMP to suit any website.
Using the “Custom CSS” position
You will notice a position at the top of the layout named “Custom CSS”. This is to be used only with the “Zoo AMP Custom CSS” element. Drag this element into this position (and ONLY this element in this position - no other element will work there and will probably break your AMP page).
Now edit the element by clicking the pencil icon. This will open a “Custom CSS” box. This is where you can write your custom CSS.
There are a few built in classes you can target to style your AMP sections:
- amp-header - this targets the header of the page, where the logo is located
- amp-main - this targets the main content div and wraps all the layout sections
- amp-title - this targets the ‘title’ layout position
- amp-meta - this targets the ‘meta’ layout position
- amp-section1 - this targets the ‘section 1’ layout position
- amp-section2 - this targets the ‘section 2’ layout position
- amp-section3 - this targets the ‘section 3’ layout position
- amp-section4 - this targets the ‘section 4’ layout position
- amp-section5 - this targets the ‘section 5’ layout position
- amp-section6 - this targets the ‘section 6’ layout position
- amp-footer - this targets the footer of the page, where the copyright is located
Here’s the body HTML markup with CSS classes for your reference:
<body>
<div class="amp-header"> </div>
<div class="amp-main">
<h1 class="amp-title"></h1>
<p class="amp-meta"></p>
<div class="amp-section1"></div>
<div class="amp-section2"></div>
<div class="amp-section3"></div>
<div class="amp-section4"></div>
<div class="amp-section5"></div>
<div class="amp-section6"></div>
</div>
<div class="amp-footer"> </div>
</body>
Custom Styles - a basic example
Let’s have a look at a Custom CSS example that will add some basic styles to your AMP page:
.amp-main {
padding-left: 10px;
padding-right: 10px;
}
.amp-title {
Font-size: 28px;
}
.amp-section1 {
background-color:#eeeeee;
}