Preparing your stories for publishing

Introduction to publishing web stories course

Hello, and welcome to lesson number one of the MakeStories 101 publishing your story course. In this course, we are going to take a look at how you will be publishing your first web story today.

Once we have built a story with MakeStories, Now it's time for us to publish the story. So the first thing that you will do whenever you want to, like publish a web story is you will hit this publish button at the top right corner.

There you have two options when it's called publish as a web story, another one is export for social media. This version is coming soon because we are optimizing our rendering engines.

When you, we'll be hitting this export for Social Media Option, you will get the videos and the image files of your slides, which you can straight forward, go and upload to Instagram.

For now, what we will do is we will click on publish as a web story. As soon as you do that, you will see that there are four steps, which you can, you will have to fill up. Now you can see that while we’re doing our first course, where we saw the general settings, we had the logo and the favicon coming up.

Now what we’re going to do is we will start filling up the details.

Set up Publisher details

So the first thing is to set up your publisher data. The first thing that they will ask is the title. Just add the title of your Story.

In the video we have written, take a quiz about New York in this web story. This can be anything. Your SEO person will be the best guide for this. In the Name, we will write the publisher name as MakeStories. Select the MakeStories logo for logo option Select choice of your language for the story.

For us, it is English since our story contents are written in English.

What are web story posters?

Now you have the option of setting your posters. First, let's try to understand what are poster images. For this pull up the documentation from the official AMP website. Where you can see the poster guidelines.

They have certain guidelines where you need to upload three poster images, which is like three, which has the aspect ratio of three by four, four by three, and one by one.

They have also mentioned the minimum size for your poster images. Now you really do not need to worry about cropping three different images and uploading them into MakeStories because we have taken care of it.

Where we ask you to upload just one image, and then we will provide you with a Cropper, but let's try to understand why you need these poster images.

For this, You have to go to the AMP validator on the search console and put in your story preview link to understand how it will look in the actual search results.

How you can set up poster images for your stories in MakeStories

To set up your poster images, You have to search for a specific category. Let’s say, New York. Click on poster images and it will take you to the media library where you will see so many images related to New York.

Let's pull up the particular image and click on just the poster image. Now, when you do this, it will say verifying the image, and then It did show us a popup saying image ready frame. What is this image verification thing?

“So since your poster images are the entry point to your web stories, you need to make sure that you use high-quality images. We recommend uploading a minimum of a thousand by thousand-pixel image for your web story”

There are three sizes available for poster images. One is a portrait, another one is landscape, and one is square. These poster images are, as per the guidelines set by the amp.dev

Once you select an image for your poster, you can crop and adjust it according to your needs to highlight a particular section.

As you can see, creating poster images with MakeStories is extremely simple.

Meta tags and SEO set up in MakeStories

It is really important for all of you to make sure that your AMP story or web story is optimized for Google search.

Since these web stories are created using HTML and CSS, you really do not need to, You know like to think of this as a completely different thing than your websites. These web stories are basically just HTML documents for Google search.

All the SEO settings that apply to a normal HTML webpage, or your blog or anything, same applies to your web stories. So Now your web story can be about an article, It can be an event or it can be a recipe.

Let's say you're writing a small article, so click on an article and then the title, which You have write over there in the first step where you’ve filled up publisher details, it is automatically pulled in here over the part of SEO and Meta tags.

You can add keywords and short descriptions, images, and author types.

We have seen that if you set up your author type in your general settings, that will be pulled up over here in the SEO and meta tags part. Now, what happens after you write all of these details.

In the Description part, You can write this is a web story about New York City and then set up the image, and use the image for New York. Then the author type is a person. Yes If you’re authoring this, write down your name and the publisher is MakeStories. In The publisher logo part, use the MakeStories logo.

In the remaining details, you can add your Twitter handle and Twitter Handle of the MakeStories.

Now write the publishing date and then in the updated date, you can add the current date.

So now everything is filled up. What happens is that now when you fill this entire form, our rendering engine will automatically take all of this data and create a Jason LD for this particular web story.

If you want to see that Click on let's save this and proceed, and click on back and, save this story, and hit the preview.

Now when we do the view page source, search for Jason LD. Unminified this because all the code that we actually render is always minified.

Now here in the page source, You can see that it says that this is basically a Jason LD and this is the schema.org. This is an article, and this is the image and this is the headline description and all those things.

So This will help Google understand what exactly is the web story all about. If you want to know more about Jason LD or schema.org, you can go to the schema.org website, and you will have a detailed understanding of how search engines use schema.org for better indexing and providing better research to the users.

Still, if you have any questions, as always said, please feel free to reach out to us over live chat. Now we will click on the publish as a web story, and then over here, there is an option called add meta-tags. Now, what are these Meta-tags all about?

What are the Meta-tags

Before the Jason LD and schema.org, people used to have meta tags. So let's say, if you write keywords and you want to add some keywords, then it creates the keyword meta tag.

Since you have already entered your keywords here in the SEO and meta tags part, and the title, which is necessary for your SEO.

we already have created the meta tag property and the description property, and the title is into the title tag. You really don't need to, you like again, add meta-tags, but still, if your SEO team wants to add any kind of meta tag, let's say for Google verification or anything, you can add the name and your value, and the same will be output or in your final web story.

Now we will click on page number three, which is the story validation.

Story Validation in MakeStories

These are the guidelines, which are set back by Google for your web story, and we have tried to make sure that we kind of help you guys to, you know like take the optimization of web story to the best.

If you really don't want to have this be seen on Google, you can just skip this by clicking on step number four, but we will strongly recommend you to do your story Validation.

Now In the video, the first thing that is saying to me, it's your story title is very long. To change the title, you have to click to edit and try to make it smaller between 10 to 40 characters.

So We will change our title to Take a quiz about New York in the web story to a quick quiz about New York City. Okay. And it turns out to be green. The second thing it does say is that Your story does not have enough text for search engine indexing.

Ideally, it should be greater than 500 characters. To change that, you have to click back to the editor, and it will take you to the editor.

All you can see is that in the entire story, the text that we had, the content, this is really not seen as content. The content is very little. So let’s do this. Let's get some quick, Info about New York City, which we can use about New York city in this web story.

Let’s try to pull some information from Wikipedia pretty quick. You don't really have to do this, because you have to create your own content but you can do some quick research about web stories and create the phrases that suit your story.

You can also change the font size in your web story and create a duplicate slide to get the exact format in the next slide. Just make sure you have enough characters for your story like 200 to 300.

In the video, we ended up doing a small mistake in that we had more than 200 characters on pages number two and three.

Ideally, Google really wants you to have your web stories, which are more visual. They don't want you to kind of, like have lots of content over it.

So It will ask you to have a character limit of 200 characters per slide.

We will go in and I'll try to reduce the content a little bit. Then just click on publish as a web story. It says that you have less than 500 characters, so we will duplicate this.

Now we have a character count of 600 now, which is good enough. Now let's do the final thing for story validation. Which says that the following image does not have alt text.

To do so, click back to the editor and check your images from the beginning. So click on the first image which is white. Let’s say white background in the Alt text and click next and then write At a New York city as Second image ALT text and whales for the third image ALT text.

So all your images should have ALT text, so if you don't have for some it will pop up, and then you can just add the ALT text for each image and you should be good. Now we will click on save and proceed.

How to Setup Analytics in MakeStories

After story validation, Here they ask you to set up analytics. The first thing that they're asking is setting up a Google Analytics tracking code.

So we have seen in lesson number one, that you can set up your GA tracking ID on your general settings and after saving this, the general settings if you create any story, Google analytics will automatically come up over them.

You can either set this up over there and If you have not set it up then you can just keen over here. Now, you can see that you can have your Google Analytics tracking ID.

Below that is the Facebook app ID and Twitter app ID. Facebook app ID and Twitter app Id are required if you have enabled Facebook and Twitter in your sharing settings.

If you have not enabled it, you really don't need to have this.

The fb pixel is basically the tracking pixel, which you can use. If you want to track your users, who visited your web story and then retarget them on Facebook.

Now, if you do not have Google analytics and you have some other kind of analytics, let's say it's Adobe analytics or a comScore or something like that.

If it is supported by amp, you can bring in your code, for that particular analytics software. And you can put it over here in the custom Analytics.

Remember it needs to be AMP compatible, without that it won't work. Also for Google analytics, please remember to use Google analytics version three, because version four is not yet supported. Now, the final thing that you will see over here is setting up your advertising.

It's great that you can finally have ads in your web stories. To do that, you guys either need to have an AdSense account or a Google ad manager.

Google ad manager is sometimes also referred to as DoubleClick. If you have an ad set up over there it's pretty simple to set up your advertisements in your web stories.

you would have to click on Google AdSense if you are using AdSense. If you want to have more documentation on this, on how to integrate AdSense, you can just click this link that says Find your AdSense publisher Google has explained this very nicely as to how you need to, like bring in your AdSense details and things like that.

You will need just two things, which are your slot ID and client ID, which you'll get from AdSense.

You can just put in these two things over here in the Publisher ID and Slot ID and your web series will start to have the Google ads or Google ads in your web stories. And then the same with DoubleClick.

You just have to enter your slot ID and you should be good.

Let's say, if you have another third-party advertisement on your DFP and they can provide you with their code, just click on custom, and then you can put in your ads.

These are the four steps that you need to go to whenever you publish a web story, it can be, you know like, kind of frustrating sometimes.

But, Believe me, it's going to be rewarding when you set up all these things because then your story will be eligible and it can rank on google. You can like have amazing traffic coming through your web stories.

This lesson was all about preparing your story for publishing. Now, once you go through these four steps and you hit publish story, you will see all these things.

We’re going to explain each one of them in our next chapter. We hope you enjoyed this. It was pretty long, but believe us, it was the most necessary part of your web story creation journey.

Thank you.