esedic
4/7/2017 - 5:17 PM

Accelerated Mobile Pages Example

Accelerated Mobile Pages Example

<!doctype html>
<html lang="en-GB" dir="ltr" amp>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic|Open+Sans:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
    <link rel="canonical" href="https://weeblr.com/blog/accelerated-mobile-pages-talk-at-jandbeyond-2016" />
    <title>What is AMP, why use it and how to implement on Joomla sites</title>
    <meta name="description" content="A global introduction to AMP, with practical steps to implement them on your Joomla website">
    <link href="https://plus.google.com/112339585624473331717" rel="publisher" />
    <!-- sh404SEF OGP tags -->
    <meta property="og:locale" content="en_GB" />
    <meta property="og:type" content="article" />
    <meta property="og:url" content="https://weeblr.com/blog/accelerated-mobile-pages-talk-at-jandbeyond-2016" />
    <meta property="og:image" content="https://weeblr.com/images/blog/2016-05-31-amp-seo-benefit.png" />
    <meta property="og:image:width" content="960" />
    <meta property="og:image:height" content="720" />
    <meta property="og:image:secure_url" content="https://weeblr.com/images/blog/2016-05-31-amp-seo-benefit.png" />
    <meta property="og:site_name" content="Weeblr" />
    <meta property="fb:admins" content="yannickweeblr" />
    <meta property="fb:app_id" content="154426421321384" />
    <!-- sh404SEF OGP tags - end -->
    <!-- sh404SEF Twitter cards -->
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@weeblr" />
    <meta name="twitter:creator" content="@weeblr" />
    <meta name="twitter:url" content="https://weeblr.com/blog/accelerated-mobile-pages-talk-at-jandbeyond-2016" />
    <meta name="twitter:image" content="https://weeblr.com/images/blog/2016-05-31-amp-seo-benefit.png" />
    <!-- sh404SEF Twitter cards - end -->
    <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>
    <style amp-custom>
    body {
        font-family: "Roboto", sans-serif;
        font-size: 16px;
        line-height: 1.8;
        background: #F3F3F5;
        color: #333333;
        padding-bottom: 100px
    }
    
    blockquote {
        padding: 16px;
        margin: 8px 0 24px 0;
        border-left: 2px solid #87a6bc;
        color: #4f748e;
        background: #e9eff3
    }
    
    blockquote p:last-child {
        margin-bottom: 0
    }
    
    .wbamp-container {
        margin: 0 auto;
        padding: 0;
        border: none;
        box-sizing: border-box;
        max-width: 479px
    }
    
    .wbamp-container.wbamp-header,
    .wbamp-container.wbamp-footer,
    .wbamp-container.wbamp-ad {
        text-align: center
    }
    
    .wbamp-container.wbamp-header-module {
        margin: 0 auto;
        padding: 0
    }
    
    .wbamp-container.wbamp-header-module:after {
        content: "";
        display: table;
        clear: both
    }
    
    .wbamp-container.wbamp-header-module amp-img {
        display: inline-block;
        margin-left: 0.25em;
        margin-right: 0.25em
    }
    
    .wbamp-container.wbamp-header {
        margin: 0 auto;
        padding: 0;
        font-family: "Open Sans", sans-serif;
        font-size: 1.2em;
        background: #6E97CC;
        color: #FFFFFF;
        min-height: 100px;
        vertical-align: middle;
        text-align: center
    }
    
    .wbamp-container.wbamp-header:after {
        content: "";
        display: table;
        clear: both
    }
    
    .wbamp-container.wbamp-header {
        background-image: url(https://weeblr.com/media/weeblr/img/banners/weeblr-banner-479_5423068308_12c6ebdb75_b.png)
    }
    
    .wbamp-container.wbamp-header.wbamp-header-image {
        line-height: 1em
    }
    
    .wbamp-container.wbamp-header.wbamp-header-no-background {
        background-image: none
    }
    
    .wbamp-header a,
    .wbamp-header a:visited {
        text-decoration: none;
        color: #FFFFFF;
        min-height: 1.8em
    }
    
    .wbamp-site-logo {
        display: inline-block;
        vertical-align: middle;
        margin: 0;
        padding: 0;
        width: 100%;
        line-height: 100px
    }
    
    .wbamp-header-text {
        font-size: 2em
    }
    
    .wbamp-header-image.wbamp-header-site-name amp-img {
        vertical-align: middle
    }
    
    .wbamp-header-image.wbamp-header-site-name .wbamp-header-text {
        display: inline-block;
        vertical-align: middle;
        margin-left: 0.25em;
        line-height: 1.8
    }
    
    @media only screen and (max-width:767px) {
        .wbamp-header-image.wbamp-header-site-name .wbamp-header-text {
            margin-left: 0;
        }
    }
    
    .wbamp-container.wbamp-content {
        margin: 0 auto 0;
        padding: 0.25em 1em;
        font-family: "Roboto", sans-serif;
        font-size: 0.9em;
        background: #FFFFFF;
        color: #333333
    }
    
    .wbamp-content {
        overflow-wrap: break-word;
        word-wrap: break-word
    }
    
    .wbamp-container.wbamp-content a {
        color: #333333;
        text-decoration: underline
    }
    
    .wbamp-container.wbamp-content a:visited,
    .wbamp-container.wbamp-content a:focus {
        color: #BBBBBB
    }
    
    .wbamp-container.wbamp-content a:hover {
        color: #777777
    }
    
    .wbamp-container.wbamp-content h1 {
        font-family: "Roboto", sans-serif;
        font-size: 1.75em;
        background: none;
        color: #333333
    }
    
    .wbamp-container.wbamp-content h2 {
        font-family: "Roboto", sans-serif;
        font-size: 1.35em;
        background: none;
        color: #333333
    }
    
    .wbamp-container.wbamp-content h3 {
        font-family: "Roboto", sans-serif;
        font-size: 1em;
        background: none;
        color: #333333
    }
    
    .wbamp-container.wbamp-footer {
        min-height: 0;
        margin: 0 auto 0;
        padding: 0;
        font-family: "Roboto", sans-serif;
        background: #6E97CC;
        color: #FFFFFF;
        font-size: 0.8em;
        vertical-align: middle
    }
    
    .wbamp-container.wbamp-footer .custom {
        display: inline-block;
        line-height: 0
    }
    
    .amp-wp-enforced-sizes {
        max-width: 100%
    }
    
    .wbamp-amp-tag {
        margin: 0;
        padding: 0.25em 1em;
        text-align: center
    }
    
    amp-img {
        display: block;
        margin-left: auto;
        margin-right: auto
    }
    
    .wbamp-amp-tag.wbamp-carousel {
        margin: 0;
        padding: 0
    }
    
    .wbamp-amp-tag.wbamp-carousel amp-img {
        margin-left: 0;
        margin-right: 0
    }
    
    .wbamp-sidebar {
        background: #b6be9c
    }
    
    .wbamp-sidebar .wbamp-menu {
        margin: 0 auto 0;
        padding: 0;
        font-family: "Roboto", sans-serif;
        color: #444444;
        background: #b6be9c;
        font-size: 0.8em
    }
    
    .wbamp-sidebar .wbamp-menu {
        min-width: 50vw
    }
    
    .wbamp-sidebar .wbamp-menu ul {
        list-style-type: none;
        padding: 1em;
        margin: 0
    }
    
    .wbamp-sidebar .wbamp-menu li a,
    .wbamp-sidebar .wbamp-menu li a:visited {
        display: inline-block;
        width: 100%;
        text-decoration: none;
        color: #444444;
        padding-top: 0.25em;
        padding-bottom: 0.25em;
        padding-left: 1em;
        margin-left: -1em;
        padding-right: 1em;
        margin-right: -1em
    }
    
    .wbamp-sidebar .wbamp-menu li a:hover,
    .wbamp-sidebar .wbamp-menu li.active a:hover {
        background: #FFAC2F;
        color: #000000
    }
    
    .wbamp-sidebar .wbamp-menu li.active a {
        background: #327DCB;
        color: #FFFFFF
    }
    
    .wbamp-sidebar .wbamp-menu li ul {
        padding: 0 0 0 1em
    }
    
    .wbamp-sidebar .wbamp-menu li ul a,
    .wbamp-sidebar .wbamp-menu li.active ul a {
        background: #b6be9c;
        color: #444444;
        padding-left: 2em;
        margin-left: -2em
    }
    
    .wbamp-sidebar-control {
        position: absolute;
        margin: 0 auto
    }
    
    .wbamp-sidebar-button {
        display: inline-block;
        text-align: left;
        height: 2.5em;
        line-height: 2.5em;
        padding: 0.3em 0.5em;
        margin: 0;
        border: none;
        color: #BBBBBB;
        background: transparent;
        border-radius: 0
    }
    
    .wbamp-sidebar-button:hover {
        cursor: pointer;
        outline: none;
        color: #000000
    }
    
    .wbamp-sidebar-button .menu-icon-bar {
        display: block;
        width: 1.5em;
        height: 0.20em;
        margin: 0;
        padding: 0;
        background-color: #BBBBBB;
        box-shadow: none
    }
    
    .wbamp-sidebar-button:hover .menu-icon-bar {
        background-color: #000000
    }
    
    .wbamp-sidebar-button .menu-icon-bar+.menu-icon-bar {
        margin-top: 0.25em
    }
    
    .wbamp-sidebar-button.menu-close {
        position: absolute;
        top: 0;
        font-size: 1.75em;
        line-height: 1.1em;
        padding: 0.1em;
        width: auto;
        height: auto;
        text-align: center;
        vertical-align: middle;
        background: transparent;
        border-radius: 0.1em;
        cursor: pointer;
        color: #EEEEEE
    }
    
    .wbamp-sidebar-button.menu-close .menu-close {
        display: none
    }
    
    .wbamp-sidebar-button.menu-close:hover {
        color: #000000
    }
    
    .wbamp-sidebar[side][open] .menu-close {
        display: block
    }
    
    .wbamp-sidebar[side="left"] .wbamp-sidebar-button.menu-close {
        right: 0.5em
    }
    
    .wbamp-sidebar[side="right"] .wbamp-sidebar-button.menu-close {
        left: 0.5em
    }
    
    .wbamp-container.wbamp-ad {
        margin: 0 auto;
        padding: 1em 0;
        font-family: 'Roboto', sans-serif;
        background: #FFFFFF;
        color: #3d596d
    }
    
    .wbamp-ad .wbamp-amp-tag {
        line-height: 0.2
    }
    
    .wbamp-container.wbamp-header+.wbamp-container.wbamp-social-buttons {
        border-bottom: 1px solid #DDDDDD
    }
    
    .wbamp-container.wbamp-content+.wbamp-container.wbamp-social-buttons {
        border-top: 1px solid #DDDDDD
    }
    
    .wbamp-container.wbamp-social-buttons {
        padding: 0.25em;
        background: #FFFFFF;
        text-align: center;
        vertical-align: middle
    }
    
    .wbamp-social-buttons ul {
        list-style: none;
        margin: 0.25em auto;
        padding: 0.4em 0
    }
    
    .wbamp-social-buttons li {
        display: inline-block;
        vertical-align: middle;
        padding: 0 0.2em;
        margin: 0 0.35em
    }
    
    .wbamp-social-buttons span {
        display: inline-block;
        vertical-align: middle;
        margin: 0 0.35em
    }
    
    .wbamp-social-buttons.wbamp-rounded span {
        border-radius: 50%
    }
    
    .wbamp-social-buttons.wbamp-squared span {
        border-radius: 0.2em
    }
    
    .wbamp-social-icon {
        width: 2em;
        height: 2em;
        text-align: center
    }
    
    .wbamp-icons-colors .wbamp-social-icon {
        fill: #FFFFFF
    }
    
    .wbamp-icons-colors .wbamp-social-icon:hover {
        fill: #333333
    }
    
    .wbamp-icons-colors .wbamp-facebook {
        background: #3067a3
    }
    
    .wbamp-icons-colors .wbamp-twitter {
        background: #03B3EE
    }
    
    .wbamp-icons-colors .wbamp-google-plus {
        background: #e15440
    }
    
    .wbamp-icons-colors .wbamp-linked-in {
        background: #0071a1
    }
    
    .wbamp-icons-white .wbamp-social-icon {
        fill: #333333
    }
    
    .wbamp-icons-white .wbamp-social-icon:hover {
        fill: #777777
    }
    
    .wbamp-icons-white .wbamp-facebook {
        background: #FFFFFF
    }
    
    .wbamp-icons-white .wbamp-twitter {
        background: #FFFFFF
    }
    
    .wbamp-icons-white .wbamp-google-plus {
        background: #FFFFFF
    }
    
    .wbamp-icons-white .wbamp-linked-in {
        background: #FFFFFF
    }
    
    .wbamp-icons-dark .wbamp-social-icon {
        fill: #FFFFFF
    }
    
    .wbamp-icons-dark .wbamp-social-icon:hover {
        background: #777777
    }
    
    .wbamp-icons-dark .wbamp-facebook {
        background: #333333
    }
    
    .wbamp-icons-dark .wbamp-twitter {
        background: #333333
    }
    
    .wbamp-icons-dark .wbamp-google-plus {
        background: #333333
    }
    
    .wbamp-icons-dark .wbamp-linked-in {
        background: #333333
    }
    
    .wbamp-icons-light .wbamp-social-icon {
        fill: #FFFFFF
    }
    
    .wbamp-icons-light .wbamp-social-icon:hover {
        background: #333333;
        fill: #FFFFFF
    }
    
    .wbamp-icons-light .wbamp-facebook {
        background: #777777
    }
    
    .wbamp-icons-light .wbamp-twitter {
        background: #777777
    }
    
    .wbamp-icons-light .wbamp-google-plus {
        background: #777777
    }
    
    .wbamp-icons-light .wbamp-linked-in {
        background: #777777
    }
    
    .wbamp-container.wbamp-content.wbamp-error {
        padding-top: 3em;
        min-height: 80%;
        box-sizing: border-box
    }
    
    .wbamp-error-title {
        font-family: "Roboto", sans-serif;
        color: #333333;
        background: #FFFFFF;
        font-size: 1.3em;
        text-align: center
    }
    
    .wbamp-error-image {
        padding: 0;
        margin: 2em auto;
        width: 95%;
        height: 200px;
        background-image: url(http://lorempixel.com/350/200/nature);
        background-repeat: no-repeat;
        background-position: center
    }
    
    .wbamp-error-body {
        font-family: "Roboto", sans-serif;
        color: #333333;
        background: #FFFFFF;
        font-size: 0.9em;
        margin-top: 2em
    }
    
    .wbamp-error-footer {
        font-family: "Roboto", sans-serif;
        color: #BBBBBB;
        background: #FFFFFF;
        font-size: 0.8em;
        margin-top: 1em;
        text-align: center
    }
    
    .wbamp-container amp-user-notification {
        box-sizing: border-box
    }
    
    .wbamp-container amp-user-notification.amp-active {
        padding: 0.5em
    }
    
    .wbamp-container amp-user-notification.amp-active button {
        padding: 0.35em 0.5em;
        margin: 0 0.5em;
        font-size: 1em;
        font-weight: bold;
        border: none;
        border-radius: 0.2em
    }
    
    .wbamp-container amp-user-notification.amp-active button:hover {
        cursor: pointer
    }
    
    .wbamp-container.wbamp-notification-light amp-user-notification {
        background: #ffffff
    }
    
    .wbamp-container.wbamp-notification-light button {
        background: #6e97cc;
        color: #FFFFFF
    }
    
    .wbamp-container.wbamp-notification-dark amp-user-notification {
        background: #000000;
        color: #FFFFFF
    }
    
    .wbamp-container.wbamp-notification-dark button {
        background: #ffac2f;
        color: #333333
    }
    
    .wbamp-container.wbamp-content .wbamp-info-block {
        color: #777777;
        background: inherit;
        font-family: 'Roboto', Serif;
        font-size: 0.9em
    }
    
    .wbamp-container.wbamp-content .wbamp-info-block a,
    .wbamp-container.wbamp-content .wbamp-info-block a:visited,
    .wbamp-container.wbamp-content .wbamp-info-block a:focus {
        color: #777777
    }
    
    .wbamp-container.wbamp-content .wbamp-info-block a:hover {
        color: #333333
    }
    
    .wbamp-container.wbamp-content .wbamp-info-block p {
        margin-top: 0;
        margin-bottom: 0;
        line-height: 1
    }
    
    .wbamp-container.wbamp-content ul.pager.pagenav {
        margin: 1em 0;
        padding: 0;
        font-size: 0.8em;
        overflow: auto
    }
    
    .wbamp-container.wbamp-content ul.pager.pagenav li {
        display: inline-block
    }
    
    .wbamp-container.wbamp-content ul.pager.pagenav li a {
        float: right;
        padding: 0.4em 1em;
        text-decoration: none;
        font-family: "Roboto", sans-serif;
        font-size: 1em;
        background: #b6be9c;
        color: #444444
    }
    
    .wbamp-container.wbamp-content ul.pager.pagenav li:hover a,
    .wbamp-container.wbamp-content ul.pager.pagenav li:hover a:visited,
    .wbamp-container.wbamp-content ul.pager.pagenav li:hover a:focus {
        color: #000000;
        background: #FFAC2F
    }
    
    .wbamp-container.wbamp-content ul.pager.pagenav li.previous a:before {
        content: "\AB";
        margin-right: 0.25em;
        font-size: 1.5em;
        line-height: 1
    }
    
    .wbamp-container.wbamp-content ul.pager.pagenav li.next {
        float: right
    }
    
    .wbamp-container.wbamp-content ul.pager.pagenav li.next a:after {
        content: "\BB";
        margin-left: 0.25em;
        font-size: 1.5em;
        line-height: 1
    }
    
    .wbamp-container.wbamp-content div.pager ul {
        margin: 1em 0;
        padding: 0;
        font-size: 0.8em;
        text-align: center
    }
    
    .wbamp-container.wbamp-content div.pager ul li {
        padding: 0.4em 1em;
        display: inline-block
    }
    
    .wbamp-container.wbamp-content div.pager ul li a {
        text-decoration: none
    }
    
    .wbamp-container.wbamp-content div.pagination ul {
        margin: 1em 0;
        padding: 0;
        font-size: 0.8em;
        text-align: center
    }
    
    .wbamp-container.wbamp-content div.pagination ul li {
        padding: 0.4em 1em;
        display: inline-block
    }
    
    .wbamp-container.wbamp-content div.pagination ul li a {
        text-decoration: underline
    }
    
    .wbamp-container.wbamp-content div.pagination ul li a:visited {
        color: #777777
    }
    
    .wbamp-container.wbamp-content div.pagination ul li span {
        color: #BBBBBB
    }
    
    .wbamp-container.wbamp-content a.readmore,
    .wbamp-container.wbamp-content a.readmore:visited,
    .wbamp-container.wbamp-content a.readmore:focus,
    .wbamp-container.wbamp-content p.readmore a.btn,
    .wbamp-container.wbamp-content p.readmore a.btn:visited,
    .wbamp-container.wbamp-content p.readmore a.btn:focus {
        background: #FFAC2F;
        color: #FFFFFF;
        text-decoration: none;
        padding: 0.25em 1em
    }
    
    .wbamp-container.wbamp-content a.readmore:hover,
    .wbamp-container.wbamp-content p.readmore a.btn:hover {
        background: #B6BE9C;
        color: #333333
    }
    
    .wbamp-container.wbamp-content a.readmore[rel="prev"]:after,
    .wbamp-container.wbamp-content p.readmore a[rel="prev"]:after {
        content: "\AB";
        margin-right: 0.25em;
        font-size: 1.5em;
        line-height: 1
    }
    
    .wbamp-container.wbamp-content a.readmore[rel="next"]:after,
    .wbamp-container.wbamp-content p.readmore a[rel="next"]:after {
        content: "\BB";
        margin-left: 0.25em;
        font-size: 1.5em;
        line-height: 1
    }
    /* Custom */
    </style>
    <script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "mainEntityOfPage": "https://weeblr.com/blog/accelerated-mobile-pages-talk-at-jandbeyond-2016",
        "headline": "A global introduction to AMP, with practical steps to implement them on your Joomla website",
        "publisher": {
            "@type": "Organization",
            "name": "Weeblr",
            "logo": {
                "@type": "ImageObject",
                "url": "https://weeblr.com/media/weeblr/img/logos/weeblr-logo-text-w250-h60-with-border_o.png",
                "width": 250,
                "height": 60
            }
        },
        "datePublished": "2016-06-01T13:00:00Z",
        "dateModified": "2017-02-13T19:23:14Z",
        "author": {
            "@type": "Person",
            "name": "Yannick Gaultier"
        },
        "image": {
            "@type": "ImageObject",
            "url": "https://weeblr.com/images/blog/2016-05-31-amp-seo-benefit.png",
            "width": 960,
            "height": 720
        }
    }
    </script>
    <!-- Google sitelinks search markup-->
    <script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "WebSite",
        "url": "https://weeblr.com/",
        "potentialAction": {
            "@type": "SearchAction",
            "target": "https://weeblr.com/search?searchword={search_term_string}",
            "query-input": "required name=search_term_string"
        }
    }
    </script>
    <!-- End of Google sitelinks search markup-->
    <!-- Google social profiles markup-->
    <script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "Organization",
        "url": "https://weeblr.com/",
        "name": "Weeblr",
        "sameAs": [
            "https://www.facebook.com/weeblr",
            "https://www.twitter.com/weeblr"
        ]
    }
    </script>
    <!-- End of Google social profiles markup-->
    <!-- Google logo & contacts markup-->
    <script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "Organization",
        "url": "https://weeblr.com/",
        "logo": "https://weeblr.com/media/weeblr/img/logos/weeblr-logo-text-w250-h60-with-border_o.png"
    }
    </script>
    <!-- End of Google logo & contacts markup-->
    <!-- Google breadcrumb markup-->
    <script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [{
            "@type": "ListItem",
            "position": 1,
            "item": {
                "@id": "https://weeblr.com/",
                "name": "Home"
            }
        }, {
            "@type": "ListItem",
            "position": 2,
            "item": {
                "@id": "https://weeblr.com/blog/",
                "name": "Blog"
            }
        }, {
            "@type": "ListItem",
            "position": 3,
            "item": {
                "@id": "",
                "name": "Accelerated Mobile Pages talk at JandBeyond 2016"
            }
        }]
    }
    </script>
    <!-- End of Google breadcrumb markup-->
    <script custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js" async></script>
    <script custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" async></script>
    <script custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js" async></script>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>

<body>
    <!-- wbAMP: Google Tag Manager -->
    <amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-MHQH9NV&gtm.url=SOURCE_URL" data-credentials="include"></amp-analytics>
    <!-- wbAMP: Google Tag Manager -->
    <amp-sidebar id='wbamp_sidebar_1' layout='nodisplay' class="wbamp-sidebar" side="left">
        <div class="wbamp-menu wbamp-left">
            <ul class="nav menu">
                <li class="item-201 divider deeper parent"><span class="separator ">Products</span>
                    <ul class="nav-child unstyled small">
                        <li class="item-195 parent"><a href="/joomla-seo-analytics-security/sh404sef">sh404SEF</a></li>
                        <li class="item-834"><a href="/joomla-accelerated-mobile-pages/wbamp">wbAMP</a></li>
                        <li class="item-305"><a href="/plan/subscribe/weeblr" title="All our products on one single page">All products and plans</a></li>
                    </ul>
                </li>
                <li class="item-240"><a href="/download">Downloads</a></li>
                <li class="item-202 divider deeper parent"><span class="separator ">Get help</span>
                    <ul class="nav-child unstyled small">
                        <li class="item-428"><a href="/frequent-questions" title="Some Frequently Asked Questions...">Frequent questions</a></li>
                        <li class="item-147"><a href="/forum" title="Forum for pre-sale questions and general discussions">Ask a question</a></li>
                        <li class="item-434"><a href="/helpdesk" title="Helpdesk for customers assistance, requires subscription">Get support</a></li>
                        <li class="item-235"><a href="/documentation">Documentation</a></li>
                        <li class="item-490"><a href="/releases-and-security/">Releases and security</a></li>
                    </ul>
                </li>
                <li class="item-726 current active"><a href="/blog/">Blog</a></li>
            </ul>
        </div>
        <button type="button" class="wbamp-sidebar-button menu-close" on='tap:wbamp_sidebar_1.close'>&times;</button>
    </amp-sidebar>
    <div class="wbamp-wrapper">
        <div class="wbamp-container wbamp-sidebar-control wbamp-left">
            <button type="button" class="wbamp-sidebar-button menu-open" on='tap:wbamp_sidebar_1.open'>
                <span class="menu-icon-bar"></span>
                <span class="menu-icon-bar"></span>
                <span class="menu-icon-bar"></span>
            </button>
        </div>
    </div>
    <div class="wbamp-wrapper">
        <nav class="wbamp-container wbamp-header  wbamp-header-site-name">
            <a class="wbamp-site-logo" href="https://weeblr.com/">
                <div class="wbamp-header-text">
                    Weeblr </div>
            </a>
        </nav>
        <div class="wbamp-container wbamp-content">
            <div class="item-page" itemscope="">
                <meta itemprop="inLanguage" content="en-GB" />
                <div class="page-header">
                    <h2 itemprop="headline">Accelerated Mobile Pages talk at JandBeyond 2016</h2>
                </div>
                <div class="wbamp-info-block">
                    <p>Written by <span class="wbamp-created-by" itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span class="wbamp-author" itemprop="name">Yannick Gaultier</span></span> on
                        <time itemprop="dateCreated">01 June 2016</time>
                    </p>
                </div>
                <div itemprop="articleBody">
                    <p></p>
                    <p>
                        <amp-img src="https://assets.weeblr.net/images/blog/2016-05-31-amp-seo-benefit.png" alt="AMP expected benefits for SEO" width="0" height="0" sizes="(min-width: 0px) 0px, 100vw" class="amp-wp-enforced-sizes"></amp-img>
                    </p>
                    <p>Hi all,</p>
                    <p>As mentioned in my last message yesterday (yes, we <a href="/blog/wbamp-is-joomla-innovation-of-the-year-2016">won an award!</a>), I wanted to get back with more details about my talks at JandBeyond 2016, in Barcelona. I had the chance to speak twice, first about <a href="/joomla-accelerated-mobile-pages/wbamp" title="Visit the wbAMP product page">wbAMP</a> and then about how to use Google Seach console and Analytics to improve your site results.</p>
                    <p>The wbAMP talk is an introduction to <strong>what</strong> <a href="https://www.ampproject.org/" title="Visit the Google AMP website">Accelerated Mobile Pages</a> is, <strong>why</strong> you would want to enable them, and <strong>how</strong> you can do that on your Joomla site. You will find below my slides for this talk:</p>
                    <div class="wb-iframe-container wb-google-slides">
                        <amp-iframe src="https://docs.google.com/presentation/d/1n_i_sBKaBe4FZF3HERFPN6zRqculhP-Qld3h4kBA-lc/embed?start=false&amp;loop=false&amp;delayms=60000" frameborder="0" allowfullscreen="" sandbox="allow-scripts allow-same-origin" height="265" layout="fixed-height">
                            <div placeholder="" class="amp-wp-iframe-placeholder"></div>
                        </amp-iframe>
                    </div>
                    <p>In addition, and courtesy of the JandBeyond  video team, a full recording of the session, with questions/answers is available below:</p>
                    <p> </p>
                    <div class="wb-iframe-container wb-youtube-video">
                        <amp-iframe src="https://www.youtube.com/embed/VZ-wojR2hCE" allowfullscreen="" sandbox="allow-scripts allow-same-origin" height="265" layout="fixed-height">
                            <div placeholder="" class="amp-wp-iframe-placeholder"></div>
                        </amp-iframe>
                    </div>
                    <p> </p>
                    <p>Hope you enjoy the reading/viewing. I will share details of my second talk, Google Search console and Analytics in the coming days.</p>
                    <p>Cheers</p>
                    <p>Yannick</p>
                </div>
                <ul class="pager pagenav">
                    <li class="previous">
                        <a href="/blog/a-method-to-use-search-console-and-google-analytics-on-your-joomla-site/amp" rel="prev">
                            <span class="icon-chevron-left"></span> A method to use Search console and Google analytics on your Joomla site </a>
                    </li>
                    <li class="next">
                        <a href="/blog/wbamp-is-joomla-innovation-of-the-year-2016/amp" rel="next">
            wbAMP is Joomla Innovation of the year 2016! <span class="icon-chevron-right"></span>       </a>
                    </li>
                </ul>
            </div>
        </div>
        <nav class="wbamp-container wbamp-social-buttons wbamp-icons-colors wbamp-rounded">
            <ul>
                <li class="">
                    <a class="wbamp-social-buttons" id="wbamp-button_facebook_share_1" href="https://facebook.com/sharer.php?u=https://weeblr.com/blog/accelerated-mobile-pages-talk-at-jandbeyond-2016" title="Facebook">
                        <span class="wbamp-social-icon wbamp-facebook">
                            <svg width="32" height="32" viewBox="-2 -2 32 32">
                                <path d="M17.9 14h-3v8H12v-8h-2v-2.9h2V8.7C12 6.8 13.1 5 16 5c1.2 0 2 .1 2 .1v3h-1.8c-1 0-1.2.5-1.2 1.3v1.8h3l-.1 2.8z"></path>
                            </svg>
                        </span>
                    </a>
                </li>
                <li class="">
                    <a class="wbamp-social-buttons" id="wbamp-button_twitter_tweet_share_1" href="https://twitter.com/share?url=https://weeblr.com/blog/accelerated-mobile-pages-talk-at-jandbeyond-2016&amp;text=What+is+AMP%2C+why+use+it+and+how+to+implement+on+Joomla+sites" title="Tweet">
                        <span class="wbamp-social-icon wbamp-twitter">
                            <svg width="32" height="32" viewBox="-2 -2 32 32">
                                <path d="M21.3 10.5v.5c0 4.7-3.5 10.1-9.9 10.1-2 0-3.8-.6-5.3-1.6.3 0 .6.1.8.1 1.6 0 3.1-.6 4.3-1.5-1.5 0-2.8-1-3.3-2.4.2 0 .4.1.7.1l.9-.1c-1.6-.3-2.8-1.8-2.8-3.5.5.3 1 .4 1.6.4-.9-.6-1.6-1.7-1.6-2.9 0-.6.2-1.3.5-1.8 1.7 2.1 4.3 3.6 7.2 3.7-.1-.3-.1-.5-.1-.8 0-2 1.6-3.5 3.5-3.5 1 0 1.9.4 2.5 1.1.8-.1 1.5-.4 2.2-.8-.3.8-.8 1.5-1.5 1.9.7-.1 1.4-.3 2-.5-.4.4-1 1-1.7 1.5z"/>
                            </svg>
                        </span>
                    </a>
                </li>
                <li class="">
                    <a class="wbamp-social-buttons" id="wbamp-button_googleplus_share_1" href="https://plus.google.com/share?url=https://weeblr.com/blog/accelerated-mobile-pages-talk-at-jandbeyond-2016" title="Google +">
                        <span class="wbamp-social-icon wbamp-google-plus">
                            <svg width="32" height="32" viewBox="4 -4 32 32">
                                <path d="M8.8 12c-.1 2.9 2 5.7 4.7 6.6 2.6.9 5.8.2 7.5-2 1.3-1.6 1.6-3.6 1.4-5.6h-6.7v2.4h4c-.3 1.2-1.1 2.2-2.3 2.7-2.3 1-5.1-.3-5.8-2.7-.9-2.3.5-5 2.9-5.7 1.4-.5 2.9.1 4.1.8l1.8-1.8c-1.4-1.2-3.2-1.9-5-1.7-3.6.1-6.8 3.4-6.6 7zm18-3v2h-2v2h2v2h2v-2h2v-2h-2V9h-2z"/>
                            </svg>
                        </span>
                    </a>
                </li>
            </ul>
        </nav>
        <div class="wbamp-container wbamp-footer">
            <div class="custom">
                <div class="wb-copyright-wrapper">Copyright (c) 2011 - 2017 - Weeblr,llc</div>
            </div>
        </div>
    </div>
</body>

</html>