AMP Design Architecture

The core layout of the design is a series of PHP include files that are applied to the main content.

Normal Header HTML Code

To tell the Search Engines that this page is an AMP page, you need to edit the < html > line to:

<html amp lang='en-US'>

There was an upper/lower case issue. Lower case does work.

Everything else seems to be normal. There is nothing magical here...

AMP Required Elements

The AMP specification states that you must use a set of custom elements and boilerplate styles. The following 'scripts' are some of the AMP required script element. The order of these is important!

<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>

Twitter Card data

Recommended Twitter Card elements

<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@catanich"> <meta name="twitter:creator" content="@catanich"> <meta name="twitter:title" content="<?= $strTitle ?>"> <meta name="twitter:description" content="<?= $strDescription ?>"> <meta name="twitter:image" content="<?= $strImage ?>">

Open Graph data

Recommended Open Graph elements

<meta property="fb:app_id" content="fb Ap Id"> <meta property="og:title" content="<?= $strTitle ?>" /> <meta property="og:type" content="article" /> <meta property="og:image" content="<?= $strImage ?>" /> <meta property="og:url" content="http://<?php echo $_SERVER['HTTP_HOST']; ?><?php echo parse_url( $_SERVER['REQUEST_URI'], PHP_URL_PATH ); ?>" /> <meta property="og:description" content="<?= $strDescription ?>" /> <meta property="og:site_name" content="Catanich Internet Marketing" /> <meta property="article:published_time" content="<?= $strFileCDate ?>" /> <meta property="article:modified_time" content="<?= date ('c', getlastmod()); ?>" />

AMP Schema Requirements

Recommended Open Graph elements

WebSite Schema (Optional)

<script type="application/ld+json"> { "@context": "http://schema.org", "@type": "WebSite", "name": "Catanich Internet Marketing", "alternateName": "Web Design by Catanich", "url": "http://www.catanich.com" } </script>

NewsArticle Schema

Although this series of Schema code is used in most examples, it triggers a series of error within the Google Structured Data Testing Tool

<script type="application/ld+json"> { "@context": "http://schema.org", "@type": "NewsArticle", "headline": "Article headline", "image": [ "thumbnail1.jpg" ], "datePublished": "<?= date ("c", strtotime($strCdate)); ?>", } </script>

NewsArticle Schema (Recommended)

This is the series of Schema code that resolved all Structured Data Testing Tool errors.

<script type="application/ld+json"> { "@context": "http://schema.org", "@type": "NewsArticle", "mainEntityOfPage": { "@type": "WebPage", "@id": "<?php echo $_SERVER['HTTP_HOST']; ?><?php echo parse_url( $_SERVER['REQUEST_URI'], PHP_URL_PATH ); ?>" }, "headline": "<?= $strTitle ?>", "image": { "@type": "ImageObject", "url": "http://www.catanich.com/images/articles.jpg", "height": 280, "width": 800 }, "datePublished": "<?= date ("c", strtotime($strCdate)); ?>", "dateModified": "<?= date ("c", getlastmod()); ?>", "author": { "@type": "Person", "name": "Jim Catanich" }, "publisher": { "@type": "Organization", "name": "Catanich Internet Marketing", "logo": { "@type": "ImageObject", "url": "http://www.catanich.com/images/catanich-internet-marketing.jpg", "width": 310, "height": 60 } }, "description": "<?= $strDescription ?>" } </script>

Breadcrumb Schema (Recommended)

This code puts that breadcrumb line within your listing in the SERPs

<script type="application/ld+json"> { "@context": "http://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "item": { "@id": "http://www.catanich.com/index.php", "name": "Catanich", "image": "http://www.catanich.com/favicons/favicon-32x32.png" } },{ "@type": "ListItem", "position": 2, "item": { "@id": "http://www.catanich.com/AMP/index.php", "name": "AMP" },{ "@type": "ListItem", "position": 3, "item": { "@id": "http://<?php echo $_SERVER['HTTP_HOST']; ?><?php echo parse_url( $_SERVER['REQUEST_URI'], PHP_URL_PATH ); ?>", "name": "<?= $strBreadcrumb ?>" } }] } </script>

AMP Menuing - The AMP-Sidebar component

Currently there is two menu list used to make up the AMP menuing section. One list is for the Mobile device and the section section is for the Desktop device. We will be reviewing this over and over to find a single list solution.

AMP Mobile Menu>

This is the code for a AMP menu using the AMP-SIDEBAR component. It will kick in when the @media changes around 600px

<amp-sidebar id='sidebar' side='right' layout='nodisplay'> <amp-img class='amp-close-image' src="/images/ic_close_black_18dp_2x.png" width="20" height="20" alt="an image" on="tap:sidebar.close" role="button" tabindex="0"></amp-img> <ul> <li><a href="http://www.catanich.com/" tabindex="1">Home</a></li> <li><a href="tel:1214762-8208" tabindex="2"><b>(214) 762-8208</b></a></li> <li><a href="http://www.catanich.com/amp/index.php" tabindex="3">AMP</a></li> </ul> </amp-sidebar>

Desktop Menu>

This is the normal inline menu used for the desktop

<header class="fixed"> <div class="wrap"> <div class="container"> <div class="clearfix"> <div class="left-nav"> <a href="/" class="tab header-title"><span itemprop="name">Catanich</span></a> </div> <div class="right alt"> <a class="tab desktop" href="http://www.catanich.com/index.php">Home</a> <a class="tab desktop" href="http://www.catanich.com/amp/index.php">AMP Overview</a> <a class="tab desktop" href="http://www.catanich.com/amp/index.php">Design</a> <a href="http://www.catanich.com/amp/" itemprop="url"> <amp-img class="alignright amp-enforced-sizes" src="http://www.catanich.com/images/amped.jpg" width="20" height="20" sizes="(min-width: 20px) 20px, 10vw" title="I'm AMPed!"></amp-img></a> <button class="tab hamburger" id="menu-button" on="tap:sidebar.toggle">≡</button> </div> </div> </div> </div> </header>

HTML Breadcrumbs

This is the normal HTML breadcrumb code. However, we didn't add the Breadcrumb Schema data here because it did not generate the Serp listing bar we were after.

<div class="container breadcrumbs"> <div class="row"> <div class="six columns"> <a href="http://www.catanich.com/">Home</a> >> <a href="http://www.catanich.com/AMP/index.php">AMP</a> >> <?= $strBreadcrumb ?> </div> <div class="six columns"></div> </div> </div>

Footer

Standard footer design concept except we added the AMP-Social-Share component here. Although we added the main five components in a row, we played around by putting each one in a different location on the pages and they still wroked.

The Twitter component does not show the "t" in IE for some reason, but it shows up under Chrome.

Social Media - AMP-SOCIAL-SHARE component

<section> <div class="questions-wrap"> <div class="questions-quote"> <p>Questions? Need a Quote? Call us today! <a href="tel:2147628208">(214) 762-8208</a><br> <amp-social-share type="gplus"></amp-social-share> <amp-social-share type="twitter"></amp-social-share> <amp-social-share type="linkedin" width="60" height="44" data-text="<?= $strTitle ?>" data-url="http://<?php echo $_SERVER['HTTP_HOST']; ?><?php echo parse_url( $_SERVER['REQUEST_URI'], PHP_URL_PATH ); ?>" data-attribution="AMPhtml"></amp-social-share> <amp-social-share type="email" width="60" height="44"></amp-social-share> <amp-social-share type="facebook" width="60" height="44" data-attribution="1141156689239439"></amp-social-share> </p> </div> </div> </section>

Analytics Tracking - AMP-ANALYTICS componenet

At the bottom of the footer we placed the AMP-ANALYTICS component (out of habit). I try to minimize the amount of code "above the fold" for speed reasoons only.

We never worry about page rendering speed, we've always had fast loading pages.

Many SEOer insist that tracking be at the front of the code, but they usually have slow loading pages and still want to get credit for the click (even though to user clicks out of the slow loading.

<amp-analytics type="googleanalytics" id="gAnalytics"> <script type="application/json"> { "vars": { "account": "UA-6165729-1" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } } </script> </amp-analytics>

Get started with
Catanich Internet Marketing

Talk to sales.

214-762-8208

Ready to take your digital marketing to the next level?
Contact us