Header Example

The core code layout didn't give us a problem. All jScript was removed and replaced with the "AMP Required Elements". You add or remove the AMP elements depending on what AMP elpment/component you are using on the page. We have left the PHP code inserted for your ease of understanding on what we have done. But by viewing VIEW SOURCE, you can see the resulting HTML code.

<!-- *** Start Of Header *** -->

<!DOCTYPE html>
<html amp lang="en-US">
<head itemscope itemtype="http://schema.org/WebSite">
<meta charset="utf-8">
<title itemprop='name'><?= $strTitle ?></title>
<meta name="description" content="<?= $strDescription ?>">
<meta name="keyword" content="<?= $strKeywords ?>">
<link rel="canonical" href="http://<?php echo $_SERVER['HTTP_HOST']; ?><?php echo parse_url( $_SERVER['REQUEST_URI'], PHP_URL_PATH ); ?>" itemprop="url" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="shortcut icon" href="http://www.catanich.com/favicons/favicon.ico">

<!-- AMP Required Elements -->
<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 -->
<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 -->
<meta property="fb:app_id" content="1141156689239439">
<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()); ?>" />

<!-- ICONs -->
<link rel="icon" type="image/png" sizes="192x192" href="http://www.catanich.com/favicons/android-chrome-192x192.png">
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="<?= $strTitle ?>">
<link rel="icon" type="image/png" sizes="228x228" href="http://www.catanich.com/favicons/coast-228x228.png">
<link rel="icon" type="image/png" sizes="16x16" href="http://www.catanich.com/favicons/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="http://www.catanich.com/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="http://www.catanich.com/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="230x230" href="http://www.catanich.com/favicons/favicon-230x230.png">
<link rel="shortcut icon" href="http://www.catanich.com/favicons/favicon.ico">
<link rel="yandex-tableau-widget" href="http://www.catanich.com/favicons/yandex-browser-manifest.json">
<meta name="msapplication-TileColor" content="#fff">
<meta name="msapplication-TileImage" content="http://www.catanich.com/favicons/mstile-144x144.png">
<meta name="msapplication-config" content="http://www.catanich.com/favicons/browserconfig.xml">
<link rel="apple-touch-icon" sizes="57x57" href="http://www.catanich.com/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="http://www.catanich.com/favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="http://www.catanich.com/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="http://www.catanich.com/favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="http://www.catanich.com/favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="http://www.catanich.com/favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="http://www.catanich.com/favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="http://www.catanich.com/favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="http://www.catanich.com/favicons/apple-touch-icon-180x180.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="<?= $strTitle ?>">

Notes

The AMP required section must be above all CSS or things get screwed up.

No jScript is allowed anywhere - so event tracking has been removed.

Did recieve an AMP Error for having two different lines for the rel="canonical" link.

Get started with
Catanich Internet Marketing

Talk to sales.

214-762-8208

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