{"id":21491,"date":"2019-09-03T11:58:30","date_gmt":"2019-09-03T11:58:30","guid":{"rendered":"https:\/\/www.heartinternet.uk\/blog\/?p=21491"},"modified":"2019-09-03T11:58:30","modified_gmt":"2019-09-03T11:58:30","slug":"how-small-businesses-can-use-amp-stories-on-wordpress","status":"publish","type":"post","link":"https:\/\/www.heartinternet.uk\/blog\/how-small-businesses-can-use-amp-stories-on-wordpress\/","title":{"rendered":"How small businesses can use AMP Stories on WordPress"},"content":{"rendered":"<p>People love stories! Not only those told on TV or in children\u2019s books. Some of the stories of the 21st century are told on Snapchat, Facebook and Instagram. Many are personal and users embrace their ephemeral nature. What\u2019s a business to do, though? Most business leaders find it unproductive to create digital assets that don\u2019t last and cannot be linked to and reshared over and over again.<\/p>\n<p>Creating stories for Instagram or Facebook is only attractive to big businesses who have an army of social media content producers and employ PR and advertising agencies. They can \u2018feed the beast\u2019 with high frequency and produce a constant stream of visually attractive mobile-only content.<\/p>\n<h2>What is AMP?<\/h2>\n<p>AMP started in 2015, and it\u2019s an acronym that stands for \u201cAccelerated Mobile Pages\u201d. After a lot of meandering and false starts it now has morphed into \u201cAMP \u2013 a web component framework to easily create user-first web sites, stories, ads and emails\u201d. In other words, an open-source initiative by Google and other organizations with the goal to optimise web content to load instantly in users\u2019 mobile devices, and improve the user viewing experience. There is a lot of technology behind this goal, and you can read up about it on the <a href=\"http:\/\/amp.dev\">AMP Project\u2019s website<\/a>.<\/p>\n<p><a href=\"https:\/\/wordpress.org\/\">WordPress<\/a> partnered with Google early on. In 2017 several WordPress core committers started working for Google to build the AMP Plugin for WordPress. With this commitment to WordPress Google is supporting site owners using open-source software available in 100+ languages and powers over <a href=\"https:\/\/w3techs.com\/\">34% of the internet<\/a>. The AMP Plugin for WordPress allows site builders to adopt a user-first experience without leaving the ecosystem of WordPress. The adjustments to qualify as an AMP site are not small but the plugin helps WordPress theme builders and web consultants to level up their service offering.<\/p>\n<p>You don\u2019t have to use the AMP components in order to take advantage of AMP Stories that come with the AMP plugin.<\/p>\n<h2>What are Stories exactly?<\/h2>\n<p>For those of us not frequenting the mentioned social networks, Stories constitutes visually attractive portrait size content with multiple pages that viewers swipe through on their mobile phones. The content can include images, animation, video and text, if only minimal. For this article, I have put together three examples. If you are reading this on a mobile phone, you\u2019ll have the intended user experience. For those of you reading on your desktop, it\u2019s going to be slightly different.<\/p>\n<p>The <a href=\"https:\/\/amp.dev\/about\/stories\/\">documentation of the AMP Project<\/a> at amp.dev writes about Stories:<\/p>\n<p>\u201cAMP stories immerse your readers in fast-loading full-screen experiences. Easily create visual narratives, with engaging animations and tappable interactions. The AMP story format is free and part of the open web and are available for everyone to try on their websites. They can be shared and embedded across the web without being confined to a closed ecosystem or platform.\u201d<\/p>\n<p>If you landed on this article and are not necessarily a WordPress users, the site will provide you with some alternative tools and information on <a href=\"https:\/\/amp.dev\/documentation\/guides-and-tutorials\/start\/visual_story\/\">how best to publish AMP Stories<\/a>.<\/p>\n<h2>Examples for Visual Storytelling<\/h2>\n<p>Following the success of Snapchat, Instagram and Facebook stories, a couple of years after Google first released <a href=\"http:\/\/amp.dev\">AMP<\/a> in 2015, AMP Stories have been embraced by large publishers, like the BBC, Washington Post, and National Geographic.<\/p>\n<p>Here are two examples:<\/p>\n<p>The photo story about the traffic famine in Yemen earned photographer Lorenzo Tugnoli from the Washington Post a Pulitzer Prize. <a href=\"https:\/\/www.washingtonpost.com\/graphics\/2018\/world\/amp-stories\/photos-of-war-in-yemen\/\">Take a look at the full story here<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/TWUUtVibbQo\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>Or <a href=\"https:\/\/www.nationalgeographic.com\/amp-stories\/stonewall-riots-50th-anniversary-lgbt-gay-pride-stories-resistance-resilience\/\">National Geographic\u2019s Stonewall at 50<\/a> photo essay.<\/p>\n<p>&nbsp;<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/FvtBz_OBtpQ\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>All these publishers have designated front-end developers to create AMP Stories for mobile and desktop consumption.<\/p>\n<p>For further examples, visit this <a href=\"https:\/\/omoiwords.com\/ampstories\/\">list of the latest AMP Stories<\/a>.<\/p>\n<h2>Why care about AMP Stories?<\/h2>\n<p>In 2017, Neil Patel had a few thoughts on <a href=\"https:\/\/neilpatel.com\/blog\/google-amp-stories\/\">\u201cwhy businesses can\u2019t ignore Google AMP Stories<\/a>. \u201cBeyond loading at lightning fast speeds, AMP Stories can also be shared in the same way news articles are shared.\u201d Patel explains. The most compelling reason why you should start using AMP and AMP Stories in particular, he says is this: \u201cIf you start using AMP protocols before your competitors, you\u2019ll differentiate yourself as a frontrunner in your industry.\u201d<\/p>\n<p>Earlier this year, <a href=\"https:\/\/venturebeat.com\/2019\/05\/09\/google-creates-dedicated-placement-in-search-results-for-amp-stories-starting-with-travel-category\/\">Google announced<\/a> at its developers conference that they will create \u2018dedicated placement\u2019 in search results for AMP Stories, starting with the travel category. Kyle Wiggers from VentureBeat further wrote: \u201cThe dedicated placement \u2014 a carousel of visual covers from Stories that Google first demoed at AMP Conf in Tokyo earlier this year \u2014 will appear beneath the Search bar on mobile for queries like \u2018Things to do in Tokyo\u2019 and \u2018The top 10 places to go in Tokyo Tapping on any of the covers will launch the corresponding AMP Story, which you\u2019ll be able to navigate using swipe and scroll gestures. Swiping far enough to the left will open the next Story on the list.\u201d<\/p>\n<p><strong>What if you could create stories like this, publish them on your own website and get additional search engine visibility at the same time?\u00a0<\/strong><\/p>\n<p>The newest version of the <a href=\"https:\/\/wordpress.org\/plugins\/amp\/\">AMP plugin for WordPress<\/a> provides the capabilities to create AMP Stories on a WordPress site with the new block editor. The only additional requirement is the newest Gutenberg plugin version as the AMP plugin uses features that have not yet been added to the default editor in core. They will arrive with the WordPress 5.3 release that is scheduled for late autumn this year. Without any additional programming necessary, AMP Stories are now available to small businesses, bloggers and local publishers to woe their visitors and keep their attention.<\/p>\n<h2>Best practices for visual storytelling<\/h2>\n<p>The AMP team published a few <a href=\"https:\/\/blog.amp.dev\/2018\/10\/25\/amp-story-learnings-and-best-practices\/\">best practices for visual storytelling<\/a> that also apply to AMP Stories. Here are the top three:<\/p>\n<ul>\n<li><strong>Don\u2019t make just image slideshows<\/strong>, add content and context.<\/li>\n<li><strong>Use quality assets shot in portrait format.<\/strong> This applies to both videos and photos. <em>For the last five years, I have sniggered at people who would shoot portrait video, as it looks ridiculous on YouTube. I make an exception for AMP Stories on your website.\u00a0<\/em><\/li>\n<li><strong>Go beyond images.<\/strong> Use video. Make sure you don\u2019t overload the network, though. It\u2019s recommended to use 720p, which at a 3:4 aspect ratio is 720px width by 960px height.<\/li>\n<\/ul>\n<p>For more recommendations on monetisation, indexing and promoting stories, check out the <a href=\"https:\/\/blog.amp.dev\/2018\/10\/25\/amp-story-learnings-and-best-practices\/\">AMP Team\u2019s article<\/a>.<\/p>\n<p>How to create your first AMP Story<\/p>\n<p>In short:<\/p>\n<ol>\n<li>Log in to your site<\/li>\n<li>Install the Gutenberg plugin<\/li>\n<li>Install the AMP plugin<\/li>\n<li>Configure the APM plugin and enable Stories<\/li>\n<li>Stories &gt; Create new<\/li>\n<li>Give it a title and add the pages for your story<\/li>\n<li>Hit Publish<\/li>\n<\/ol>\n<h2>Configure the AMP plugin:<\/h2>\n<p>Once the AMP Plugin is installed, you can access the settings under \u201cGeneral\u201d.<\/p>\n<p>Here is an example of the screen:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-21494\" src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/amp-plugin-settings.png\" alt=\"\" width=\"1292\" height=\"769\" \/><\/p>\n<p>For the purpose of this post, we are only interested in using it for the Stories and not to AMPlify the rest of the website.<\/p>\n<p>Uncheck \u201cWebsite\u201d in the \u201cExperiences\u201d section, and all the other sections will disappear from the screen. Don\u2019t forget to click on the \u201cSave Changes\u201d button at the bottom of the screen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-21496\" src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/amp-stories-setting.png\" alt=\"\" width=\"1220\" height=\"260\" \/><\/p>\n<p>Now you\u2019ll see an additional menu item in your left navigation, labelled \u201cStories\u201d. The plugin created a new Custom Post Type for the Stories.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-21499\" src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/wordpress-stories-nav.png\" alt=\"\" width=\"324\" height=\"314\" \/><\/p>\n<p>The menu items will feel familiar with these options:<\/p>\n<ul>\n<li>\u201cAll Stories\u201d:See and manage a list of all Stories<\/li>\n<li>\u201cNew\u201d: Create a new Story<\/li>\n<li>\u201cCategories\u201d: anage the categories for your Stories<\/li>\n<li>\u201cTags\u201d: Manage the tags for your Stories<\/li>\n<\/ul>\n<p>Before you click on \u201cNew\u201d, make sure you have installed the <a href=\"https:\/\/wordpress.org\/plugins\/gutenberg\/\">latest version of the Gutenberg plugin<\/a> (6.1.1 at the time of writing).<\/p>\n<h2>Prepare the Story to be told<\/h2>\n<p>The story we will create in this tutorial is using a set of street photographs I took while walking in Merida, Mexico earlier this year.<\/p>\n<p>Not every story needs a storyboard, but it helps to have a plan. Especially at the beginning of your storybuilding journey, separating the concerns will make it easier to focus on the building part of it, once all the other decisions are out of the way. Here is my preparation process:<\/p>\n<ul>\n<li>I resized the photos to make them web-ready and also changed their file names from IMG_3425.jpg to a more descriptive one like \u201cCalle-59-Walking-in Merida-MX-by-Birgit-Pauli-Haack.jpg\u201d.<\/li>\n<li>Then I uploaded all images to the \u201cMedia Library\u201d and added titles and alt texts.<\/li>\n<li>I also created a plain text file with the titles of the photos and decided on the order.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-21502\" src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/merida-story-example-1.png\" alt=\"\" width=\"1080\" height=\"488\" \/><\/p>\n<p><strong>Text File:<\/strong><\/p>\n<blockquote><p>Arch<\/p>\n<p>People aiming for the &#8220;<em>Pasaje Revolucions<\/em>&#8220;, the pathway between the cathedral and the adjacent buildings. It is covered with a white roof. The space housed the exhibition by &#8220;Fragmentos by Patricia Baez&#8221; arranged by the<a href=\"https:\/\/goo.gl\/maps\/skhMpUeV9Gk\"> Museum Fernando Garcia Ponce.<\/a><\/p>\n<p>Calle 59<\/p>\n<p>The street is empty with a car approaching from the distance. On the right, the branches of a tree spill into street, giving the total lifeless picture an idea of virility and growth.<\/p>\n<p>Connecting<\/p>\n<p>Parque de la Mejorada<\/p>\n<p>The plaza near the<a href=\"https:\/\/goo.gl\/maps\/ZBhnpDefquL2\"> Museum of Yucatan Folk Art<\/a> provides free Wifi and power for merchants and their stands. There are plenty of power outlets in the wall around the stage. They can also be used to charge the phone while catching up with friends and family.<\/p><\/blockquote>\n<p>We will see if this text is adequate or maybe too long for the story panes and might need to be shortened.<\/p>\n<h2>Stories &gt; Add New<\/h2>\n<p>When ready, access the WordPress dashboard and select \u201cAdd New\u201d from the \u201cStories\u201d menu\u00a0 and a blank page opens up.<\/p>\n<p>Let\u2019s talk a bit about the screen. It\u2019s way more populated than your ordinary edit post screen.<\/p>\n<p>At the top, the \u201cAdd Title\u201d is familiar. That\u2019s the title of the Story that shows up in the Archive pages, embeds and in the URL.<\/p>\n<p>Then from left to right you\u2019ll see an outline or list of elements section.<\/p>\n<p>Then you have the Story\u2019s first page in view, inviting you to \u201cWrite text\u2026\u201d Underneath you see in light grey the page navigation. As we are on the first page, there is only one. Before you get to the sidebar, there are two more round buttons: the blue plus sign lets you add another page, either from a blank page or from a template. The round button with the three stripes and an arrow helps you with the order of the page. When active you can drag &amp; drop the pages and reorder of their sequence.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-21503\" src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/amp-story-first-page.jpg\" alt=\"\" width=\"927\" height=\"546\" \/><\/p>\n<h2>Add content to your AMP Story<\/h2>\n<p>So let\u2019s add some content. I already added the title: \u201cWalking in Merida, Mexico\u201d.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-21505\" src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/merida-story-example-2.png\" alt=\"\" width=\"1415\" height=\"769\" \/><\/p>\n<h3>Lesson 1: Background media<\/h3>\n<p>In this 30-second video, you learn how to add to a story\u2019s page. Use the focal point tool in the sidebar to bring the right composition into the frame and add a background colour with opacity, to fit the other design.<\/p>\n<p>&nbsp;<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/atqSfh0nqjo\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h3>Lesson 2: Add text<\/h3>\n<p>In this video, you see how to add a new page to the story, add text to it and rotate that text, add a background to the text and change its opacity.<\/p>\n<p>&nbsp;<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/PpfCvG4ERwk\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h3>Lesson 3: Add more text and find a pattern<\/h3>\n<p>We started a pattern: First the image with a dark background, its title and some description text on top of it. The next page is the image in the original colours, and only its title. We repeat that for the following two photos.<\/p>\n<p>The video shows how to add a background image, add a background colour and opacity to it.<\/p>\n<p>Then place on text block on it and format the text with a light colour.<\/p>\n<p>Then we add another Text block to add the title of the image in a headline.<\/p>\n<p>The headline is placed on a light background with a light opacity and dark letters on it.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/hm6e91cv9Zk\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h3>Lesson 4: Automatically fit text to container<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-21506\" src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/amp-story-text-settings.png\" alt=\"\" width=\"554\" height=\"540\" \/><\/p>\n<p>The last page contains another image as the background and by giving it a gray background colour we made the background light enough to place dark text on it. We add a headline, a text box with three links and a button.<\/p>\n<p>In that video, we also see how the feature \u201cAutomatically fit text to container\u201d works and how to use the various handles. It needs a bit getting used to, so give yourself some time to master it. It took me a couple of attempts to get it right.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/98SvuN6Mf54\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h3>Lesson 5: Make the Story work on your desktop in landscape<\/h3>\n<p>The last video ended showing the view of the whole story, optimised for mobile viewing.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-21508\" src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/amp-story-mobile-example.png\" alt=\"\" width=\"1278\" height=\"602\" \/><\/p>\n<p>Everything is in portrait format, and when viewed on the desktop the page panels focus only in the middle section. The early examples from the Washington Post or the San Francisco Chronicle felt different on desktop as the pages would cover the full screen. In the first version of the AMP Stories feature, a landscape view for desktops is not yet integrated.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-21509\" src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/amp-story-landscape-tag.png\" alt=\"\" width=\"246\" height=\"257\" \/><\/p>\n<p>Weston Ruter, developer with the AMP Plugin for WordPress, shared a small plugin with me to try out a landscape version for my stories. You would need to download the zip from GitHub and upload it to your plugin section on your website and activate it.<\/p>\n<p>Then you go to the document settings of your story and add a \u201clandscape\u201d tag to your story. Now when you preview your story on your desktop, you\u2019ll see the page extended over the full window edge to edge and provide a superior user experience for your visitors coming to you page from their desktops.<\/p>\n<h3>Lesson 6: How to fix the text for landscape view<\/h3>\n<p>At first when I tried it in landscape, I noticed that the text is cut off and way too big on the picture.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-21512\" src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/amp-story-text-too-large.png\" alt=\"\" width=\"1600\" height=\"816\" \/><\/p>\n<p>When I created the last page with the links to \u201cArt Museums in Merida, Mexico\u201d, I used the feature. Now I needed to make sure that we use it also on the other text boxes. After I fixed it for the \u201cArch\u201d page, it looked much better.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-21515\" src=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/amp-story-text-fixed.png\" alt=\"\" width=\"1600\" height=\"813\" \/><\/p>\n<p>Let\u2019s fix the text for \u201cCalle 59\u201d and \u201cConnecting\u201d as well.<\/p>\n<p>In this video we go back to our text pages and apply the setting \u201cAutomatically fit text to container\u201d to the text. With the blue handle dots we are able to adjust the length and the width of the container.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/Hd136Zn-348\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h2>Embed your Stories in posts and pages<\/h2>\n<p>You can add stories to any other post by embedding them. The use case could be that you create an in-depth look into a theory or a process at your company or a production process in your plant. As an intro you create an AMP Story with the salient points for the mobile viewers and passers-by. Those interested in the details and depth of it will read your article or white paper and might even part with their email address to get even more insights in your expertise.<\/p>\n<p>If you take your story\u2019s URL and add it to a page, WordPress will automatically create an embed version of it and displays it with the featured image and the author by default.<\/p>\n<p>You can see the example used in this tutorial <a href=\"https:\/\/pauli-haack.com\/stories\">live on my personal website<\/a>.<\/p>\n<h2>Some use cases for AMP Stories<\/h2>\n<ul>\n<li>Make a photo\/video series of a production process<\/li>\n<li>10 Things to Do on a Rainy Day in Naples, and make every page a link page to attractions around Southwest Florida<\/li>\n<li>Take pictures (best work Candids) at your business social event and introduce your team members on your website<\/li>\n<li>Show off the best of your photos from your last trip<\/li>\n<li>Tell the transformation stories of your beneficiaries in your apprenticeship program<\/li>\n<li>Share events impressions with your donors.<\/li>\n<\/ul>\n<h2>Resources about AMP and AMP Stories<\/h2>\n<h3>Presentations and Talks<\/h3>\n<ul>\n<li>Gutenberg Times hosted the AMP plugin lead developer, Weston Ruter, the lead of the CMS devRel team, Alberto Media, the AMP Stories lead developer Pascal Birchler and Cathy Bosco, designer and AMP Stories advocate on the <a href=\"https:\/\/www.youtube.com\/watch?v=CiQ0Uyvem_c\">Live Q&amp;A on YouTube.<\/a><\/li>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=4mavA1xow1M&amp;feature=youtu.be&amp;t=1813\">Alberto Medina presented at the AMP Conf in Tokyo<\/a> and talked at the end of it about bringing AMP Stories to WordPress.<\/li>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=L_waSaTNlqM\">AMP Stories: Visual Stories for the Web (Google I\/O&#8217;19)<\/a><\/li>\n<\/ul>\n<h3>Plugins for WordPress<\/h3>\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/amp\/\">AMP Plugin for WordPress<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/gutenberg\/\">Gutenberg Plugin<\/a><\/li>\n<li><a href=\"https:\/\/gist.github.com\/westonruter\/4e4ee2b5790c6218fab40a7b3f90331f\">AMP Story Supports Landscape <\/a>(Weston Ruter\u2019s GitHub Gist)<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Find out how you can make websites standout through the use of AMP stories.<\/p>\n","protected":false},"author":2,"featured_media":21523,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,24],"tags":[],"class_list":{"0":"post-21491","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-guest-posts","8":"category-web-design"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How small businesses can use AMP Stories on WordPress - Heart Internet<\/title>\n<meta name=\"description\" content=\"Find out how you can make websites standout through the use of AMP stories.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.heartinternet.uk\/blog\/how-small-businesses-can-use-amp-stories-on-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How small businesses can use AMP Stories on WordPress - Heart Internet\" \/>\n<meta property=\"og:description\" content=\"Find out how you can make websites standout through the use of AMP stories.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.heartinternet.uk\/blog\/how-small-businesses-can-use-amp-stories-on-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Heart Internet\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/heartinternet\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-09-03T11:58:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/08\/stories-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"733\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Eliot Chambers-Ostler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@heartinternet\" \/>\n<meta name=\"twitter:site\" content=\"@heartinternet\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Eliot Chambers-Ostler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/how-small-businesses-can-use-amp-stories-on-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/how-small-businesses-can-use-amp-stories-on-wordpress\/\"},\"author\":{\"name\":\"Eliot Chambers-Ostler\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28\"},\"headline\":\"How small businesses can use AMP Stories on WordPress\",\"datePublished\":\"2019-09-03T11:58:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/how-small-businesses-can-use-amp-stories-on-wordpress\/\"},\"wordCount\":2718,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/how-small-businesses-can-use-amp-stories-on-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/08\/stories-1.jpg\",\"articleSection\":[\"Guest Posts\",\"Web Design\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.heartinternet.uk\/blog\/how-small-businesses-can-use-amp-stories-on-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/how-small-businesses-can-use-amp-stories-on-wordpress\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/how-small-businesses-can-use-amp-stories-on-wordpress\/\",\"name\":\"How small businesses can use AMP Stories on WordPress - Heart Internet\",\"isPartOf\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/how-small-businesses-can-use-amp-stories-on-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/how-small-businesses-can-use-amp-stories-on-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/08\/stories-1.jpg\",\"datePublished\":\"2019-09-03T11:58:30+00:00\",\"description\":\"Find out how you can make websites standout through the use of AMP stories.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/how-small-businesses-can-use-amp-stories-on-wordpress\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.heartinternet.uk\/blog\/how-small-businesses-can-use-amp-stories-on-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/how-small-businesses-can-use-amp-stories-on-wordpress\/#primaryimage\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/08\/stories-1.jpg\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/08\/stories-1.jpg\",\"width\":1100,\"height\":733},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/how-small-businesses-can-use-amp-stories-on-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.heartinternet.uk\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How small businesses can use AMP Stories on WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/heartblog.victory.digital\/#website\",\"url\":\"https:\/\/heartblog.victory.digital\/\",\"name\":\"Heart Internet\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/heartblog.victory.digital\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\",\"name\":\"Heart Internet\",\"url\":\"https:\/\/heartblog.victory.digital\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp\",\"width\":992,\"height\":252,\"caption\":\"Heart Internet\"},\"image\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/heartinternet\/\",\"https:\/\/x.com\/heartinternet\",\"https:\/\/www.linkedin.com\/company\/heart-internet-ltd\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28\",\"name\":\"Eliot Chambers-Ostler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg\",\"caption\":\"Eliot Chambers-Ostler\"},\"url\":\"https:\/\/www.heartinternet.uk\/blog\/author\/eliot-chambers-ostler\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How small businesses can use AMP Stories on WordPress - Heart Internet","description":"Find out how you can make websites standout through the use of AMP stories.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.heartinternet.uk\/blog\/how-small-businesses-can-use-amp-stories-on-wordpress\/","og_locale":"en_GB","og_type":"article","og_title":"How small businesses can use AMP Stories on WordPress - Heart Internet","og_description":"Find out how you can make websites standout through the use of AMP stories.","og_url":"https:\/\/www.heartinternet.uk\/blog\/how-small-businesses-can-use-amp-stories-on-wordpress\/","og_site_name":"Heart Internet","article_publisher":"https:\/\/www.facebook.com\/heartinternet\/","article_published_time":"2019-09-03T11:58:30+00:00","og_image":[{"width":1100,"height":733,"url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/08\/stories-1.jpg","type":"image\/jpeg"}],"author":"Eliot Chambers-Ostler","twitter_card":"summary_large_image","twitter_creator":"@heartinternet","twitter_site":"@heartinternet","twitter_misc":{"Written by":"Eliot Chambers-Ostler","Estimated reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.heartinternet.uk\/blog\/how-small-businesses-can-use-amp-stories-on-wordpress\/#article","isPartOf":{"@id":"https:\/\/www.heartinternet.uk\/blog\/how-small-businesses-can-use-amp-stories-on-wordpress\/"},"author":{"name":"Eliot Chambers-Ostler","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28"},"headline":"How small businesses can use AMP Stories on WordPress","datePublished":"2019-09-03T11:58:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.heartinternet.uk\/blog\/how-small-businesses-can-use-amp-stories-on-wordpress\/"},"wordCount":2718,"commentCount":0,"publisher":{"@id":"https:\/\/heartblog.victory.digital\/#organization"},"image":{"@id":"https:\/\/www.heartinternet.uk\/blog\/how-small-businesses-can-use-amp-stories-on-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/08\/stories-1.jpg","articleSection":["Guest Posts","Web Design"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.heartinternet.uk\/blog\/how-small-businesses-can-use-amp-stories-on-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.heartinternet.uk\/blog\/how-small-businesses-can-use-amp-stories-on-wordpress\/","url":"https:\/\/www.heartinternet.uk\/blog\/how-small-businesses-can-use-amp-stories-on-wordpress\/","name":"How small businesses can use AMP Stories on WordPress - Heart Internet","isPartOf":{"@id":"https:\/\/heartblog.victory.digital\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.heartinternet.uk\/blog\/how-small-businesses-can-use-amp-stories-on-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/www.heartinternet.uk\/blog\/how-small-businesses-can-use-amp-stories-on-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/08\/stories-1.jpg","datePublished":"2019-09-03T11:58:30+00:00","description":"Find out how you can make websites standout through the use of AMP stories.","breadcrumb":{"@id":"https:\/\/www.heartinternet.uk\/blog\/how-small-businesses-can-use-amp-stories-on-wordpress\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.heartinternet.uk\/blog\/how-small-businesses-can-use-amp-stories-on-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.heartinternet.uk\/blog\/how-small-businesses-can-use-amp-stories-on-wordpress\/#primaryimage","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/08\/stories-1.jpg","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/08\/stories-1.jpg","width":1100,"height":733},{"@type":"BreadcrumbList","@id":"https:\/\/www.heartinternet.uk\/blog\/how-small-businesses-can-use-amp-stories-on-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.heartinternet.uk\/blog\/"},{"@type":"ListItem","position":2,"name":"How small businesses can use AMP Stories on WordPress"}]},{"@type":"WebSite","@id":"https:\/\/heartblog.victory.digital\/#website","url":"https:\/\/heartblog.victory.digital\/","name":"Heart Internet","description":"","publisher":{"@id":"https:\/\/heartblog.victory.digital\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/heartblog.victory.digital\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/heartblog.victory.digital\/#organization","name":"Heart Internet","url":"https:\/\/heartblog.victory.digital\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp","width":992,"height":252,"caption":"Heart Internet"},"image":{"@id":"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/heartinternet\/","https:\/\/x.com\/heartinternet","https:\/\/www.linkedin.com\/company\/heart-internet-ltd"]},{"@type":"Person","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28","name":"Eliot Chambers-Ostler","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/image\/","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg","caption":"Eliot Chambers-Ostler"},"url":"https:\/\/www.heartinternet.uk\/blog\/author\/eliot-chambers-ostler\/"}]}},"_links":{"self":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/21491","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/comments?post=21491"}],"version-history":[{"count":0,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/21491\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media\/21523"}],"wp:attachment":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media?parent=21491"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/categories?post=21491"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/tags?post=21491"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}