{"id":804,"date":"2022-11-13T17:38:10","date_gmt":"2022-11-13T17:38:10","guid":{"rendered":"https:\/\/bandittracker.com\/?p=804"},"modified":"2022-11-13T17:38:12","modified_gmt":"2022-11-13T17:38:12","slug":"first-google-web-story-on-wordpress","status":"publish","type":"post","link":"https:\/\/bandittracker.com\/first-google-web-story-on-wordpress\/","title":{"rendered":"Create Your First Google Web Story On WordPress"},"content":{"rendered":"\n<p>This tutorial isn\u2019t about how to make the best Google web stories. You\u2019ll find plenty of videos for that.<\/p>\n\n\n\n<p>When I first watched those videos, I was completely confused. The steps they took didn\u2019t seem to exist in the WordPress story editor. That\u2019s because the interface has greatly changed.<\/p>\n\n\n\n<p>This article is to get you started with a step-by-step guide to:<\/p>\n\n\n\n<ul>\n<li>Create a simple story with images, text, and animations<\/li>\n\n\n\n<li>Add links from story pages to your web posts<\/li>\n\n\n\n<li>Add the mandatory meta details to allow Google Discover pick up your story<\/li>\n\n\n\n<li>Post-publishing tasks to give the story a better chance of being indexed<\/li>\n\n\n\n<li>Making your Google Analytics work with stories<\/li>\n<\/ul>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_63 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6601c888caa74\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6601c888caa74\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/bandittracker.com\/first-google-web-story-on-wordpress\/#Main_Changes_to_The_Story_Editor\" title=\"Main Changes to The Story Editor.\">Main Changes to The Story Editor.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/bandittracker.com\/first-google-web-story-on-wordpress\/#Step_1_Install_the_Google_Web_Stories_Plugin_on_WordPress\" title=\"Step 1: Install the Google Web Stories Plugin on WordPress\">Step 1: Install the Google Web Stories Plugin on WordPress<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/bandittracker.com\/first-google-web-story-on-wordpress\/#Step_2_Start_Your_First_Story\" title=\"Step 2: Start Your First Story\">Step 2: Start Your First Story<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/bandittracker.com\/first-google-web-story-on-wordpress\/#Step_3_Insert_Your_First_Link_On_The_First_Page\" title=\"Step 3: Insert Your First Link On The First Page\">Step 3: Insert Your First Link On The First Page<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/bandittracker.com\/first-google-web-story-on-wordpress\/#Step_4_Duplicate_The_Page\" title=\"Step 4: Duplicate The Page\">Step 4: Duplicate The Page<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/bandittracker.com\/first-google-web-story-on-wordpress\/#Step_5_Set_A_Background_Color\" title=\"Step 5: Set A Background Color\">Step 5: Set A Background Color<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/bandittracker.com\/first-google-web-story-on-wordpress\/#Step_6_Add_An_Image_As_An_Element_On_The_Page\" title=\"Step 6: Add An Image As An Element On The Page\">Step 6: Add An Image As An Element On The Page<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/bandittracker.com\/first-google-web-story-on-wordpress\/#Step_7_Add_A_Text_Box_Filling_And_Animation\" title=\"Step 7: Add A Text Box, Filling, And Animation\">Step 7: Add A Text Box, Filling, And Animation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/bandittracker.com\/first-google-web-story-on-wordpress\/#Step_8_Cover_Page_And_Meta_Tags\" title=\"Step 8: Cover Page And Meta Tags\">Step 8: Cover Page And Meta Tags<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/bandittracker.com\/first-google-web-story-on-wordpress\/#Step_9_Work_Through_The_Editor_Checklist\" title=\"Step 9: Work Through The Editor Checklist\">Step 9: Work Through The Editor Checklist<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/bandittracker.com\/first-google-web-story-on-wordpress\/#Step_10_Publish_Validate_And_Add_Links_For_Indexing\" title=\"Step 10: Publish, Validate, And Add Links For Indexing\">Step 10: Publish, Validate, And Add Links For Indexing<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/bandittracker.com\/first-google-web-story-on-wordpress\/#Setting_Up_Google_Analytics_For_Web_Stories\" title=\"Setting Up Google Analytics For Web Stories\">Setting Up Google Analytics For Web Stories<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Main_Changes_to_The_Story_Editor\"><\/span>Main Changes to The Story Editor.<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Before you watch some YouTube tutorials, I suggest you follow the steps in this article to create a basic story.<\/p>\n\n\n\n<p>By doing so, you\u2019ll know how to find the main editing features in the story editor. <\/p>\n\n\n\n<p>As these features have moved drastically in recent changes, you won\u2019t get lost when you\u2019re following some more advanced tutorials elsewhere.<\/p>\n\n\n\n<p>The older editor had a right sidebar to access editing features for the page you\u2019re working on. That sidebar is gone.<\/p>\n\n\n\n<p>Most (but not all) of the editing features have been put under the \u201cStyles\u201d tab in the left sidebar.<\/p>\n\n\n\n<p>With that out of the way, let\u2019s get started\u2026<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_1_Install_the_Google_Web_Stories_Plugin_on_WordPress\"><\/span>Step 1: Install the Google Web Stories Plugin on WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Use the WordPress dashboard to add a new plugin. You&#8217;ll find it when you search for &#8220;google web stories.<\/p>\n\n\n\n<p>Add the official web stories plugin from Google. This picture shows what it looks like:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"542\" height=\"455\" src=\"https:\/\/bandittracker.com\/wp-content\/uploads\/2022\/11\/google-web-stories-plugin.jpg\" alt=\"\" class=\"wp-image-805\" srcset=\"https:\/\/bandittracker.com\/wp-content\/uploads\/2022\/11\/google-web-stories-plugin.jpg 542w, https:\/\/bandittracker.com\/wp-content\/uploads\/2022\/11\/google-web-stories-plugin-300x252.jpg 300w\" sizes=\"(max-width: 542px) 100vw, 542px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_2_Start_Your_First_Story\"><\/span>Step 2: Start Your First Story<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>If you don\u2019t use a template, you will create your first story with a blank canvas.<\/p>\n\n\n\n<p>When you click \u201cadd new story\u201d, you are placed in the editor with a single page. <\/p>\n\n\n\n<p>If you&#8217;re familiar with how web stories look on your phone, you may think this first page is the cover poster that shows up in Discover.  It isn&#8217;t.<\/p>\n\n\n\n<p>This is the first page that appears after users click into your story.<\/p>\n\n\n\n<p>To get going, click on the image icon and select the options to grab a stock image. Google will show you images from from Unsplash. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"375\" height=\"433\" src=\"https:\/\/bandittracker.com\/wp-content\/uploads\/2022\/11\/first-page-options.jpg\" alt=\"\" class=\"wp-image-806\" srcset=\"https:\/\/bandittracker.com\/wp-content\/uploads\/2022\/11\/first-page-options.jpg 375w, https:\/\/bandittracker.com\/wp-content\/uploads\/2022\/11\/first-page-options-260x300.jpg 260w\" sizes=\"(max-width: 375px) 100vw, 375px\" \/><\/figure><\/div>\n\n\n<p>When you select an image, it appears as an element on the page. <\/p>\n\n\n\n<p>Right-click the image and choose \u201cSet as Page Background\u201d from the bottom of the menu.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_3_Insert_Your_First_Link_On_The_First_Page\"><\/span>Step 3: Insert Your First Link On The First Page<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>You want every page to have a link to your website. If the web story is based on a single blog post, then every page will have the same link.<\/p>\n\n\n\n<p>The easiest way to make web stories is to get your first page looking good with a clearly visible link. Then keep duplicating that page to make the rest of your story.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Call to Action<\/h3>\n\n\n\n<p>To add a link, click on the styles tab in the left sidebar.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"414\" height=\"133\" src=\"https:\/\/bandittracker.com\/wp-content\/uploads\/2022\/11\/editor-style-tab.jpg\" alt=\"\" class=\"wp-image-807\" srcset=\"https:\/\/bandittracker.com\/wp-content\/uploads\/2022\/11\/editor-style-tab.jpg 414w, https:\/\/bandittracker.com\/wp-content\/uploads\/2022\/11\/editor-style-tab-300x96.jpg 300w\" sizes=\"(max-width: 414px) 100vw, 414px\" \/><\/figure><\/div>\n\n\n<p>Expand the \u201cCall to Action section and enter the link to your target blog post or page.<\/p>\n\n\n\n<p>You will immediately see a small \u201cLearn more\u201d box appear at the bottom of the page.<\/p>\n\n\n\n<p>The editing options let you change that text. I leave it at the default in the assumption that users know it\u2019s a jump link to a website.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"416\" height=\"406\" src=\"https:\/\/bandittracker.com\/wp-content\/uploads\/2022\/11\/editor-call-to-action-highlighted.jpg\" alt=\"\" class=\"wp-image-809\" srcset=\"https:\/\/bandittracker.com\/wp-content\/uploads\/2022\/11\/editor-call-to-action-highlighted.jpg 416w, https:\/\/bandittracker.com\/wp-content\/uploads\/2022\/11\/editor-call-to-action-highlighted-300x293.jpg 300w\" sizes=\"(max-width: 416px) 100vw, 416px\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">Light or dark theme?<\/h3>\n\n\n\n<p>It\u2019s more important to pay attention to the visibility of the box. You can change it from being a lightly-colored box to a dark theme.<\/p>\n\n\n\n<p>The key is what makes it stand out against the image or color scheme in that section of the page.<\/p>\n\n\n\n<p>It\u2019s worth toggling and checking this on every page.<\/p>\n\n\n\n<p>You should also pick background images that are least likely to obscure the box. Make sure that the bottom section of a background image is fairly muted.<\/p>\n\n\n\n<p>If your image is an infographic, you don\u2019t want any of the information to be in this bottom section.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tracking links in Google Analytics<\/h3>\n\n\n\n<p>If you just add a simple link as your call to action to your web posts, you won&#8217;t find it easy to track the traffic coming from your stories to your posts.<\/p>\n\n\n\n<p>The trick is to add UTM parameters to your links.<\/p>\n\n\n\n<p>Let&#8217;s say your link is: &#8220;<em>https:\/\/mywebsite.com\/cool-post\/<\/em>&#8220;<\/p>\n\n\n\n<p>Use this instead: &#8220;<em>https:\/\/mywebsite.com\/cool-post?<\/em><strong>utm_source=discover&amp;utm_medium=organic&amp;utm_campaign=web_story<\/strong>\/&#8221;<\/p>\n\n\n\n<p>This will let you drill down into the traffic in Google Analytics in fine detail.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_4_Duplicate_The_Page\"><\/span>Step 4: Duplicate The Page<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>All we have is an image and a link, but that\u2019s enough to get going. You can come back to page 1 and make it better.<\/p>\n\n\n\n<p>For now, duplicate the page using the \u201c+\u201d icon beside it.<\/p>\n\n\n\n<p>Remove the background image with these steps:<\/p>\n\n\n\n<ol type=\"1\">\n<li>right-click on the page<\/li>\n\n\n\n<li>choose \u201cdetach image from background\u201d.<\/li>\n\n\n\n<li>Click on the image and use your keyboard to delete it (yes, this is stupid, but I haven\u2019t found another way to do this)<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_5_Set_A_Background_Color\"><\/span>Step 5: Set A Background Color<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>You don\u2019t need a full image on every page. But you probably don\u2019t want the sparse white of the default page.<\/p>\n\n\n\n<p>The style tab lets you set the page background color.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"365\" height=\"211\" src=\"https:\/\/bandittracker.com\/wp-content\/uploads\/2022\/11\/editor-page-background.jpg\" alt=\"\" class=\"wp-image-810\" srcset=\"https:\/\/bandittracker.com\/wp-content\/uploads\/2022\/11\/editor-page-background.jpg 365w, https:\/\/bandittracker.com\/wp-content\/uploads\/2022\/11\/editor-page-background-300x173.jpg 300w\" sizes=\"(max-width: 365px) 100vw, 365px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_6_Add_An_Image_As_An_Element_On_The_Page\"><\/span>Step 6: Add An Image As An Element On The Page<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>I\u2019ve put this as a separate section because it took me an hour to figure out how to upload or select images from my own media library (instead of the third-party one).<\/p>\n\n\n\n<p>The reason is the awful interface that uses the same icon to do different things.<\/p>\n\n\n\n<p>To grab an image from your media library, use the \u201cInsert\u201d tab on the left sidebar.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"320\" src=\"https:\/\/bandittracker.com\/wp-content\/uploads\/2022\/11\/accessing-media-library.jpg\" alt=\"\" class=\"wp-image-811\" srcset=\"https:\/\/bandittracker.com\/wp-content\/uploads\/2022\/11\/accessing-media-library.jpg 400w, https:\/\/bandittracker.com\/wp-content\/uploads\/2022\/11\/accessing-media-library-300x240.jpg 300w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/figure><\/div>\n\n\n<p>The first upload icon represents your media library. This gives you an interface into the library, but you can only see a few images in the small panel.<\/p>\n\n\n\n<p>The second upload icon opens the standard media library interface. From here, you can upload an image from your local drive or grab one that\u2019s already in the library.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What is the safe zone?<\/h3>\n\n\n\n<p>If this is your first go at using the editor, a hint will pop up to tell you to keep your added elements in a \u201csafe zone\u201d.<\/p>\n\n\n\n<p>But the safe zone isn\u2019t always clear. You can see it if you click and move an image or text box on the page. That will show an oblong box that represents the zone.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_7_Add_A_Text_Box_Filling_And_Animation\"><\/span>Step 7: Add A Text Box, Filling, And Animation<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Use the Insert tab to add a text box to the page.<\/p>\n\n\n\n<p>When you\u2019ve selected the text box, use the Style tab to access the editing features.<\/p>\n\n\n\n<p>Most of the features are fairly self-explanatory. One of the less obvious options is that you can add a filled box around your text.<\/p>\n\n\n\n<p>That lets you ensure the text is easy to read if superimposed on an image.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Adding animation<\/h3>\n\n\n\n<p>Have you seen other web stories where the text drops down from the top? <\/p>\n\n\n\n<p>This movement is called an \u201canimation\u201d. To add animation to an element, click on it and look for the winged icon that is in several places in the editor.<\/p>\n\n\n\n<p>You\u2019ll see it beside the page when a text or image element is selected. We show it in the picture below.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"456\" src=\"https:\/\/bandittracker.com\/wp-content\/uploads\/2022\/11\/editor-add-animation.jpg\" alt=\"\" class=\"wp-image-812\" srcset=\"https:\/\/bandittracker.com\/wp-content\/uploads\/2022\/11\/editor-add-animation.jpg 720w, https:\/\/bandittracker.com\/wp-content\/uploads\/2022\/11\/editor-add-animation-300x190.jpg 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/figure><\/div>\n\n\n<p>You\u2019ll also see the icon at the top-right of the Style tab.<\/p>\n\n\n\n<p>This gives you access to plenty of different animations.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_8_Cover_Page_And_Meta_Tags\"><\/span>Step 8: Cover Page And Meta Tags<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>I\u2019ll assume now that you\u2019ve created a flowing story of multiple pages.<\/p>\n\n\n\n<p>Now we\u2019re going to add the mandatory features That Google requires of a web story:<\/p>\n\n\n\n<ul>\n<li>Title<\/li>\n\n\n\n<li>Poster image<\/li>\n\n\n\n<li>Logo<\/li>\n\n\n\n<li>Description<\/li>\n\n\n\n<li>URL<\/li>\n<\/ul>\n\n\n\n<p>You set the title at the top of the dashboard.<\/p>\n\n\n\n<p>The other details are set in the Document tab in the left panel.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Poster image<\/h3>\n\n\n\n<p>The title will be superimposed as white text on the image you choose as the poster. The text will appear in the bottom left corner of the image.<\/p>\n\n\n\n<p>This image should be 650 X 853 pixels. The editor will let you crop it if you have something bigger.<\/p>\n\n\n\n<p>One mistake to avoid is assuming that all other background images should be that size. In fact, they should be much bigger. Go for at least 1080 X 1920 for your other images.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Previewing the title page?<\/h3>\n\n\n\n<p>One annoying aspect of the editor is that the option to preview the title page seems to come and go. Hopefully, this feature will be fixed when you are creating your story.<\/p>\n\n\n\n<p>But if you have to publish the story without seeing a preview, be sure to check it somewhere after it\u2019s out. You want any words to be clearly visible.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_9_Work_Through_The_Editor_Checklist\"><\/span>Step 9: Work Through The Editor Checklist<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The editor provides a validation feature that points out where you may have violated best practices.<\/p>\n\n\n\n<p>You&#8217;ll find it on the bottom left of the editor.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"420\" height=\"240\" src=\"https:\/\/bandittracker.com\/wp-content\/uploads\/2022\/11\/editor-checklist.jpg\" alt=\"\" class=\"wp-image-813\" srcset=\"https:\/\/bandittracker.com\/wp-content\/uploads\/2022\/11\/editor-checklist.jpg 420w, https:\/\/bandittracker.com\/wp-content\/uploads\/2022\/11\/editor-checklist-300x171.jpg 300w\" sizes=\"(max-width: 420px) 100vw, 420px\" \/><\/figure><\/div>\n\n\n<p>It\u2019s important to work through these to give your stories the best chance of being picked up in Google Discover.<\/p>\n\n\n\n<p>However, some don\u2019t always make sense. <\/p>\n\n\n\n<p>I got a warning about text and background colors not contrasting enough when it was white text on black. When I changed from white to pale yellow, the warning went away.<\/p>\n\n\n\n<p>The recommended number of words also seems to be a lot higher than what Google has said elsewhere.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_10_Publish_Validate_And_Add_Links_For_Indexing\"><\/span>Step 10: Publish, Validate, And Add Links For Indexing<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>When you hit publish on your story, your tasks aren\u2019t finished.<\/p>\n\n\n\n<p>The first thing to do is to check that this is a valid web story. Google provides a validation tool to <a href=\"https:\/\/search.google.com\/test\/amp\" target=\"_blank\" rel=\"noreferrer noopener\">test the URL<\/a>.<\/p>\n\n\n\n<p>If you\u2019re wondering what the URL is, you will now have an archive that lists your stories at [domain]\/web-stories\/<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Problems?<\/h3>\n\n\n\n<p>I removed AMP from my website over a year ago, and I didn\u2019t have any problem with this check.<\/p>\n\n\n\n<p>I also didn\u2019t do anything special about canonical links.<\/p>\n\n\n\n<p>However, other people have reported plenty of problems being thrown up in the check. This may be down to conflicts with plugins.<\/p>\n\n\n\n<p>You\u2019re unlikely to be the first person to experience the problem, so hopefully, a search will throw up some advice.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Indexing And Links<\/h3>\n\n\n\n<p>You should give Google a bit of help to index your story. Here are some tasks to do now.<\/p>\n\n\n\n<p>Submit the URL of the story for indexing via Google Search Console.<\/p>\n\n\n\n<p>Add a link to the web story from any existing posts or pages that are associated with the information.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Setting_Up_Google_Analytics_For_Web_Stories\"><\/span>Setting Up Google Analytics For Web Stories<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Both Google and advertising networks advise that you separate your story traffic from the usual sources in Google Analytics.<\/p>\n\n\n\n<p>I simply followed these <a href=\"https:\/\/help.mediavine.com\/en\/articles\/4740035-how-to-make-a-new-google-analytics-profile-id-for-your-web-stories\" target=\"_blank\" rel=\"noreferrer noopener\">steps from Mediavine<\/a>.<\/p>\n\n\n\n<p>Yes, this is a purely UA property. What happens when the big switch to GA4 happens? These instructions will change.<\/p>\n\n\n\n<p>I wondered if it was enough just to add a property. Should I not have to add a filter to the view accessed by Mediavine?<\/p>\n\n\n\n<p>I sent them an email to ask about it, and they said I just needed the steps in the linked document above.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Further actions for Mediavine<\/h3>\n\n\n\n<p>If you\u2019re with Mediavine, then you have hooked up a view in Google Analytics to the network.<\/p>\n\n\n\n<p>Mediavine also advises that you <a href=\"https:\/\/help.mediavine.com\/en\/articles\/4681084-improve-the-quality-of-your-page-level-data\" target=\"_blank\" rel=\"noreferrer noopener\">take another step<\/a> to avoid web stories messing up your analytics.<\/p>\n\n\n\n<p>Basically, you\u2019ll be adding filters to exclude query parameters from web stories traffic.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial isn\u2019t about how to make the best Google web stories. You\u2019ll find plenty of videos for that. When I first watched those videos, I was completely confused. The steps they took didn\u2019t seem to exist in the WordPress story editor. That\u2019s because the interface has greatly changed. This article is to get you &#8230; <a title=\"Create Your First Google Web Story On WordPress\" class=\"read-more\" href=\"https:\/\/bandittracker.com\/first-google-web-story-on-wordpress\/\" aria-label=\"More on Create Your First Google Web Story On WordPress\">Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[21],"tags":[],"_links":{"self":[{"href":"https:\/\/bandittracker.com\/wp-json\/wp\/v2\/posts\/804"}],"collection":[{"href":"https:\/\/bandittracker.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bandittracker.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bandittracker.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bandittracker.com\/wp-json\/wp\/v2\/comments?post=804"}],"version-history":[{"count":2,"href":"https:\/\/bandittracker.com\/wp-json\/wp\/v2\/posts\/804\/revisions"}],"predecessor-version":[{"id":815,"href":"https:\/\/bandittracker.com\/wp-json\/wp\/v2\/posts\/804\/revisions\/815"}],"wp:attachment":[{"href":"https:\/\/bandittracker.com\/wp-json\/wp\/v2\/media?parent=804"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bandittracker.com\/wp-json\/wp\/v2\/categories?post=804"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bandittracker.com\/wp-json\/wp\/v2\/tags?post=804"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}