How to create Google Web Stories using AMP and HTML?

Article by: Manish Methani

Last Updated: September 24, 2021 at 8:04am IST
4 min 26 sec

Google Web Stories

  • Visual Storytelling Platform: Google Web Stories is a platform that allows users to create and share visually engaging and interactive stories on the web.

  • Mobile-Friendly Format: Stories are designed for mobile devices, providing a seamless and immersive experience for users on smartphones.

  • Short, Snackable Content: Stories are typically short and concise, making them ideal for quick consumption and easy sharing.

  • Immersive Multimedia Elements: Users can incorporate a variety of multimedia elements, such as images, videos, and animations, to enhance the storytelling experience.

  • Discoverability: Google Web Stories can appear in search results and are discoverable through Google Search, making it easier for users to find and engage with your content.

Advantages for Monetizing Passion:

  • Engaging Content: The visually appealing and interactive nature of Web Stories can captivate your audience, keeping them interested in your passion.

  • Increased Visibility: With the potential to appear in search results, Web Stories can attract a larger audience, increasing the visibility of your content.

  • Monetization Opportunities: Google Web Stories allows you to monetize your content through various methods, such as ads and affiliate marketing, providing an avenue to generate income from your passion.

  • Social Media Integration: Stories can be easily shared on social media platforms, expanding your reach and driving more traffic to your content.

  • User-Friendly Creation: The platform offers a user-friendly interface, making it accessible for creators of all levels, even those without advanced technical skills.

  • Mobile-Centric Experience: As a mobile-centric format, Web Stories align with the way users consume content on their smartphones, ensuring a seamless and enjoyable experience for your audience.

In essence, Google Web Stories provides a visually appealing and accessible platform for creators to share their passion, with built-in features that facilitate engagement and monetization opportunities.

Sample Code to create the Google Web Stories using AMP and HTML:

<html>
<head>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async
custom-element="amp-story"
src="https://cdn.ampproject.org/v0/amp-story-1.0.js"
></script>

<link rel="canonical" href="https://codzify.com/how-to-answer-tell-me-about-yourself" />

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"/>

<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>

</head>

<body>

<amp-story standalone publisher="" title="" 
publisher-logo-src="https://codzify.com/dash/imgs/main_icons/codzfy_without_border.png"
poster-portrait-src="https://codzify.com/assets/images/stories/tellMeAboutYourself/poster.jpg">
   <amp-story-page id="my-first-page">
        <amp-grid-layer template="fill">
           <amp-img src="https://codzify.com/assets/images/stories/tellMeAboutYourself/1.jpg" 
           width="900" height="1600" alt="This is my First Image">
    </amp-img>
   </amp-grid-layer>
 </amp-story-page>

   <amp-story-page id="my-second-page">
        <amp-grid-layer template="fill">
           <amp-img src="https://codzify.com/assets/images/stories/tellMeAboutYourself/2.jpg" 
           width="900" height="1600" alt="This is my Second Image">
    </amp-img>
   </amp-grid-layer>
 </amp-story-page>

   <amp-story-page id="my-third-page">
        <amp-grid-layer template="fill">
           <amp-img src="https://codzify.com/assets/images/stories/tellMeAboutYourself/3.jpg" 
           width="900" height="1600" alt="This is my Third Image">
    </amp-img>
   </amp-grid-layer>
 </amp-story-page>

   <amp-story-page id="my-fourth-page">
        <amp-grid-layer template="fill">
           <amp-img src="https://codzify.com/assets/images/stories/tellMeAboutYourself/4.jpg" 
           width="900" height="1600" alt="This is my Fourth Image">
    </amp-img>
   </amp-grid-layer>
 </amp-story-page>

   <amp-story-page id="my-fifth-page">
        <amp-grid-layer template="fill">
           <amp-img src="https://codzify.com/assets/images/stories/tellMeAboutYourself/5.jpg"
            width="900" height="1600" alt="This is my Fifth Image">
    </amp-img>
   </amp-grid-layer>
 </amp-story-page>

   <amp-story-page id="my-sixth-page">
        <amp-grid-layer template="fill">
           <amp-img src="https://codzify.com/assets/images/stories/tellMeAboutYourself/6.jpg"
            width="900" height="1600" alt="This is my Sixth Image">
    </amp-img>
   </amp-grid-layer>
 </amp-story-page>

</body>
</html>

Recommended Videos:

How to Add Google Analytics (GA4) & Adsense to Google Web Stories | Codzify Tech Tutorial

Watch Video Tutorials at Codzify YouTube Channel:

Codzify Logo

Terms and Conditions    Cookie Policy   Refund Policy   Adsense Disclaimer

Contact: teamcodzify@gmail.com