Craft Engaging AMP Web Stories for Social Media

You can effectively create engaging web stories by crafting short, compelling narratives that summarize the highlights of your web articles across a few compelling sections. Once created, you can easily add a link to your story page directly into your social media posts, significantly extending your content's reach.

There's a significant advantage to this! With well-structured web stories, Google offers prominent placement at the top of the Search Engine Result Page (SERP) for your best content pieces. This format is perfectly tailored for mobile devices, allowing you to inform your audience or promote your products and services in an immersive way. Importantly, a good web story also functions seamlessly on desktop, ensuring broad accessibility.

Setting Up Your Web Story

To create a web story, you'll write standard HTML. While there's no dedicated "amp-story" extension needed for a regular HTML article, you'll structure your content with semantic HTML5 elements. Focus on clear headings, concise paragraphs, and relevant images.

Basic HTML Structure

Your web story can follow a simple, logical flow using standard HTML tags.

Styling Your Web Story with CSS

Effective styling is key to making your web story visually appealing. You can embed your CSS directly in the <head> section or link to an external .css file for larger projects. Here's an example of basic styling rules:

Writing the Web Story Content

When you create web stories as standard articles, your core structure involves semantic HTML elements like <section>, <h2>, <p>, and <amp-img>. Here’s an example of the HTML structure for your article:

<!doctype html>
<html ⚡ lang="id">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
 <link rel="canonical" href="https://[namawebsiteanda.com]/stories/gaun-musim-panas-terbaru">
 <title>Koleksi Gaun Musim Panas Terbaru!</title>
 <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>
 <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
 <script async custom-element="amp-img" src="https://cdn.ampproject.org/v0/amp-img-0.1.js"></script>
 <style amp-custom>
  /* Global styles for the story */
  amp-story-page {
   background-color: #f0f0f0;
   color: #333;
   font-family: 'Arial', sans-serif;
  }
  .text-overlay {
   position: absolute;
   bottom: 20%;
   left: 0;
   right: 0;
   padding: 16px;
   background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
   color: white;
   text-align: center;
  }
  .text-overlay h1 {
   margin: 0;
   font-size: 2.5em;
   text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  }
  .text-overlay p {
   margin-top: 8px;
   font-size: 1.2em;
  }
  .cta-button {
   display: inline-block;
   margin-top: 20px;
   padding: 12px 24px;
   background-color: #007bff;
   color: white;
   text-decoration: none;
   border-radius: 30px;
   font-weight: bold;
   font-size: 1.1em;
   box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  }
  .price {
   font-size: 1.5em;
   font-weight: bold;
   color: #ffe000; /* Bright yellow for price */
   margin-top: 10px;
  }

  /* Style for the second page - if you add more */
  .product-details {
   padding: 20px;
   text-align: center;
  }
  .product-details h2 {
   color: #0056b3;
   font-size: 2em;
   margin-bottom: 10px;
  }
  .product-details p {
   font-size: 1.1em;
   line-height: 1.5;
  }
 </style>
</head>
<body>
 <amp-story standalone>
  <amp-story-page id="page-1">
   <amp-story-grid-layer template="fill">
    <amp-img src="https://via.placeholder.com/720x1280?text=Koleksi+Gaun+Musim+Panas"
         width="720" height="1280"
         layout="responsive"
         alt="Model mengenakan gaun musim panas cerah"
         animate-in="fly-in-bottom" animate-in-duration="0.8s">
    </amp-img>
   </amp-story-grid-layer>
   <amp-story-grid-layer template="vertical">
    <div class="text-overlay">
     <h1 animate-in="fade-in" animate-in-delay="0.5s">Gaun Musim Panas Terbaru!</h1>
     <p animate-in="fade-in" animate-in-delay="1s">Temukan koleksi menawan kami yang ringan &amp; nyaman.</p>
     <a href="id/fashion/summer-dresses-new-arrivals" class="cta-button" target="_blank" animate-in="bounce-in" animate-in-delay="1.5s">
      Lihat Sekarang!
     </a>
    </div>
   </amp-story-grid-layer>
  </amp-story-page>

  <amp-story-page id="page-2">
   <amp-story-grid-layer template="fill">
    <amp-img src="https://via.placeholder.com/720x1280?text=Gaun+Elegan"
         width="720" height="1280"
         layout="responsive"
         alt="Gaun musim panas elegan dengan latar belakang cerah"
         animate-in="zoom-in" animate-in-duration="0.8s">
    </amp-img>
   </amp-story-grid-layer>
   <amp-story-grid-layer template="vertical">
    <div class="text-overlay">
     <h1 animate-in="fade-in">Mulai Dari</h1>
     <p class="price" animate-in="fade-in" animate-in-delay="0.5s">Rp250.000</p>
     <p animate-in="fade-in" animate-in-delay="1s">Sempurna untuk segala acara. Temukan favorit Anda hari ini!</p>
     <a href="id/fashion/summer-dresses-new-arrivals" class="cta-button" target="_blank" animate-in="bounce-in" animate-in-delay="1.5s">
      Belanja Sekarang
     </a>
    </div>
   </amp-story-grid-layer>
  </amp-story-page>

  </amp-story>
</body>
</html>