Whether you run a news site or a blog article, Schema.org Markup is a powerful way to tell search engines more about your content. In this video, I’ll walk you through the available Article Search Features and the Schema.org markup you’ll need to earn those features.
Using our structured data generator, I will help you create your markup and then show you four different ways you can implement it on your site:
- Using WordPress Page Editor
- Using the SEOPress Plugin
- Using Advanced Custom Fields
- Using Google Tag Manager
Sign up for our structured data course here.
JSON – LD Wrap for Google Tag Manager
Table of Contents
Video Transcript:
In this video, we’re going to be looking at article markup. We’re going to talk about what it is and how we can implement it into our site to help earn those rich features in search results.
Article Rich Feature
What is the article rich feature? Adding articles structured data to your site, so your new site, your blogs, maybe sports article, can enhance the appearance of your listings within the Google search results. Your page also may be eligible for different features depending on how you code your page. Here are a few examples of an article rich feature. Typically, you see these in news articles, weather events, things of that nature, or you can see some top stories in here as well, like HubSpot or PandaDoc has, where your article really stands out a little bit more in the search results.
Now, let’s go over to Google’s gallery to learn a little bit more about this type of markup. The article markup is something that we can use with both AMP pages or non-AMP pages. When you have a page that’s running on AMP, so it has accelerated mobile page coding behind it, it can appear in the top stories’ carousel as well as a number of carousel and rich results, visual stories, and other features there. Now, non-AMP pages can also get some more visible improvement with the article markup, but it’s not going to be as great as pages with AMP. Make sure that you do leverage AMP when it comes to your blog. I still think it’s really important. Google wants our pages to be much faster and AMP will help our pages load faster, especially in a mobile environment, which is obviously extremely important to Google.
Now, here’s an example of the markup and an AMP. As you can see, we’ve got JSON-LD application and it’s your normal JSON-LD structure. They’ve got the title of the article, the images with the article, when it was published and modified, and who created the article, and a little bit more about the publisher. The article markup is very similar to what you’d see in the non-AMP pages here. Again, we’ve got the headlines and images, date published and modified. As you can see, the difference here between the AMP article and the non-AMP article, the AMP one, they went here and added publisher. You can do that in a non-AMP page as well.
What to Include In Article Markup
What types of markup features, or what types of things should we include in our article markup? For this, we want to take a look at Schema.org. This is a really helpful resource. If you haven’t used it before, the search feature is pretty good here. Let me go ahead and hit article, and now it will give us the article type. Now, article is the top type. There are some subtypes like we will see here in a minute, like news article. But this will allow us to see everything that we can mark up, everything from article body, the backstory, the page end and start, pagination, speakable, which this is actually how you tell the search engines, “Hey, you can use this as far as Google Assistant or Amazon Alexa,” things of that nature. Going in a little bit more detail, so we can describe the about us. We can describe a rating of our article of our company realistically, is what we’d be doing the aggregate rating on, and also call all the different types of media.
There are a lot of different things here that we can pull out and it can seem overwhelming. But the goal is to pull out everything that is important to let the search engines know exactly what your article is about and who you are when it comes to creating this article. Now, if we scroll down the bottom, we’ll see some more specific types of article. We’ve got advertiser content article. We’ve got news article. We’ve got reports, a satirical article. Notice that these are in blue. These are some newer article types. So they can help the search engines know that, “Hey, this is satirical. It’s not actual news,” or this is an advertiser’s content. This is not something that we’re doing organically on our pages, but somebody paid for this piece of content.
Marking Up Your Pages
Down here, we’ve got some examples like we normally see with Schema.org. You can go ahead and look at the JSON code. Now, one way to create this would be to copy and paste this into a text editor and change it out with your own code.
We do have a tool that you can use. It’s our structured data generator, and it can walk you through the article type. Here, we’ve got news article and also blog posting. You can mark this as a blog posting as well. If we go over here to Schema.org, we can type blog, and you will see we’ve got blog here. This is a type of creative work, so if you’re creating a blog, you should be using blog posting in that article, your news site, you should be using article. That’s a very important distinction because they are two different types of content.
Now, when you’re marking up your pages, like I said, you can either walk through to your Schema.org or use our generator. You type in your URL here, so the actual post of that article. We’re going to use this here as an example. You would give the headline of your article. This would be the title of your article. Then you want to add images here. Now, right now, we have space for one image, but you can add more images if you need to, by modifying the code a little bit. I’ll show you how you can do that as well.
In this case, we’ve got this image here. We can copy the image address, paste it in. Here, you want to have a short description of the article, what is the article about. Typically, maybe you would use a meta-description or write an abstract of it so the search engines can better understand what it’s about. The author can be either a person or an organization. It’s a person in this case. Publisher is included in search, and then we can do the logo URL here, copy image address.
You right-click on that and that’ll pop up, if you haven’t used the copy image address before. Then this article was posted on August 9th, so we can do our date picker here. August 9th, and it was last modified that same day, and there we go. We’ve pulled out the basic things that we need to build out our structured data.
Now, we want to validate this code and make sure that it works correctly. We can click validate, and this is going to open the structured data testing tool. Now, this tool is going out, but it’s still one of the best tools out there to validate your structured data. As you can see, we’ve got no warnings, we’ve got no issues. Again, we can test this in rich results. Test the code over here. Always important to test your code before you put it on your site, make sure that it’s working correctly. If it’s eligible, we’ve got an article here, and here’s all of the different types of information you want.
I said that you could add more images in, right? If you want to do that, it’s pretty simple. In your code here, let’s copy it, and we’ll bring it over to a text editor here. Now open up a new one now paste the code in. What I like … This is Sublime Text. I like it because it makes it really easy to read. Then you can select the different types of code you’re using, and it will help you really see it better. No affiliation with them, but definitely check them out if you’re interested. If you want to add more than one image, you need to create this bracket here. You’ll see once I add this in, I can now add another image. In my article, I have a few images that I would like to mark up and tell the search engines about. Maybe it’s a product feature image right here, so I can copy this image address and I can paste that in here. We always need quotation marks around our images or any of the inputs that we’re putting in here.
The next thing I want to do is maybe find another image, so I’ll go ahead and copy. Copy this image address again, and you can put as many images in here as you want. There’s no set rule. Now, in between each one of these, you’re going to want or need a comma, except on the last one. You don’t put a comma right here. You put it on the outside of that square bracket that we added. This allows us to have multiple images. Notice here, when I didn’t have that comma in, I had this little pink warning sign right here. That’s letting me know, “Hey, this code is broken. Not correct.” So you need to put the comma right here, because that comma tells the crawler to keep looking at the code. If we didn’t have that comma there, it would stop. It wouldn’t look at any of this code down here, so that’s an important thing to do. If you want to add different images, you can definitely do it straight here in the JSON-LD.
Get Markup on the Website
The next step is how do we get this on our website? Well, there’s a number of ways. We can put it directly into the code of our site. We can use some plugins. We can also use Google Tag Manager. I’m going to show you three different ways that you can now install this script specifically onto your website. Then I’m going to show you a way that you can use a plugin to automate the article schema so that you don’t have to do this every time you publish a blog.
Let’s say you’re new to WordPress. You’re just getting started, and you want to drop this JSON-LD code in here. You go to your article. You can scroll anywhere here on the page that you want to, and then you can add some HTML, custom HTML. Then we go back to our code here and we are going to grab this script, we’re going to copy it. Then we are going to paste it right here in the HTML, and we’re going to hit update. You go to this page and then we’re going to hit refresh.
Now, we’re going to hit our structured data testing tool plugin right here. There’s a number of pieces of markup here, but here is our blog posting markup. It is now on the page and it is working the way that it should. So that’s step one.
If you want to drop it right into the page, JSON-LD will sit underneath the code in the HTML and the crawlers will be able to read it very easily, so that is one option to achieve this. Now again, if you want to stay in WordPress, and I’m specifically talking about WordPress here when it comes to some of the widgets, we can also use some plugins to achieve this. The first plugin we were talking about is SEOPress.
SEOPress
In order to use the structured data tools within SEOPress, you have to have a pro license. It’s not a super expensive plugin, but it is my favorite SEO plugin for WordPress. On the side down here, we’ll see something called schemas, and in this, you can create specific schema markups using dynamic field. In here, you can create schema markups, pulling fields directly from your content. I can click create schema. I could say the type of data that we want to use, like an article or a webpage.
In this specific case, we’re talking about an article. Now you can fill out all these forms. You can say, this is a generic. I know this is a blog posting, and then that would be maybe the post title. The image would be the featured image. Coverage start date would be the publish date, time, same thing.
You work through these and you fill out all of the fields that it pulls in, and it auto-generates this for you. Every time you post a blog on your site, it’s going to inject this into the page. Now, you’ll notice one thing, you don’t have to set up a publisher logo, it’s required. If we go now to the dashboard of this tool, or the pro settings, excuse me, it will walk us through setting up that publisher. This is really important. We need to go here and select the logo because all blog posts need to have a publisher associated with them. All you would do is attach your logo image here, hit select, and now you’re ready to go.
One of the nice features though, with SEOPress is when you look at the SEO settings on a specific page, it allows you to install manual JSON-LD. You go over here and select your data type and it can even set you up like, hey, you want to do a generic article for this page, so it’ll give you some outlines, or if you want to do what we did before, we can do custom and drop our code right in here, so we can have our JSON read right by the page. There are some great options with this plugin, but again, this is one of the options.
Advanced Custom Fields
There’s another option that you can use, which would be using a plugin called Advanced Custom Fields. Now, Advanced Custom Fields is great because you can continue to build on your markups, and you can use data throughout multiple pieces of content and attach it all together. We’re going to do a quick demo of how you could at least build something like this with Advanced Custom Fields. The first thing you need to do is install Advanced Custom Fields. It is free for anyone to use. There is a paid version that you can also use, but Advanced Custom Fields itself is free. Once you’re done that, go to custom fields. Then you’re going to want to add a new. We’re going to call this JSON-LD because that’s what we’re going to do. We’re going to create something that we can input our JSON-LD into.
We want to create a field, so an area that we can dump this information into. Again, we’ll call the field label, JSON-LD. We don’t want it to be text. Let’s go ahead and make it a WYSIWYG editor, and then let’s just make it text only. That’s what we need here for post types. We can also equal to page. That way, we can install this on posts or pages, and everything else looks good here. Once we’re done, we’re going to hit publish. Now, if we go back to our posts here and we go to the back end and we hit refresh, you’re going to see something down here. It wasn’t there before. Once you get down to the end article, you’re going to see this field now that says JSON-LD. This is where we can take that code that we created here for our blog posting, copy, and paste it in.
If I hit upload and I checked this page, it wouldn’t show up. The reason why is we have to make one more modification to our template so that this shows up. In order to do that, you have to go into the template section here, the template editor of WordPress.
You need to find the page that controls the content of your site, or the posts for this one, its content single, and then we have to add in a small line of text in order to make it pop up. The way it works here in custom fields is you are going to use something called the field, and you’re going to use a PHP trigger to get that. Here you would use that custom field title, and for our case, it should be JSON-LD.
Make sure you have this in lowercase too. That does matter. Make sure that you take the specific name of the field and then use it exactly the way that it’s stated right here under name, otherwise it won’t work. Once you’ve added this in, you hit update. This will tell the theme to grab that custom field when you see this specific article. I’m going to load this article back up again, and then it hit our JSON here. I want to clear the cache and let it run again, and there we go. We have our blog posting once again, showing up. Now, this is just a way to, again, drop it in straight here using JSON-LD code. This isn’t doing anything dynamic. That is something that we will cover in more detail in a future video. The final way though, I do want to show you how you can again, use this JSON-LD code to put it directly into your site, is with Google Tag Manager.
Google Tag Manager
Let’s say, for instance, you don’t have a WordPress site or you don’t have access to a WordPress site, but you do have access to a tag manager container. Google Tag Manager can generate and push JSON-LD into your site page. In order to do this, you have to modify it slightly, but it still works nonetheless. What we need to start with is creating a new tag. I like to do custom. I’ll do Schema.org, and then blog hosting.
Now here, you would use a custom HTML and you would take that code we published on the other site and paste it in. There’s one thing to note here. In the past, it used to work like this. It would fire and it would trigger it with JSON-LD. This no longer works in tag manager. You have to use JavaScript and allow the JavaScript to convert it into JSON-LD. In order to do that, we need to wrap our text a little bit differently. This would be the wrapper, and I will make this available in the video as well. But do you want to take the top half here and right here where the curly brace starts, you want to get rid of that and replace it here with this function. Then again at the bottom, we need to do the exact same thing. You’re at the bottom curly brace and make that like that.
What we’ve done is we’ve turned this into a JavaScript function, which is then going to change this code into JSON-LD once it fires on our site. The last thing we need to do is some triggering here. Now, we don’t want to do all pages. We just want to do this specific blog. We’ll hit blog trigger for this case. We’ll get this URL, and we’ll say page view, some pages, page URL, equals this, and hit save. Once you’re done, you can save it, and then finally, you could submit this, blog test, publish, and now we can go back to our page one more time.
Now, I’m going to do something here really quick, so we don’t have to do the same ones and it gets confusing. I’m going to hit update. We’ve removed the JSON-LD from that box there, and we’ve gone over here and we’re going to refresh this view, go to preview mode. Now I’m going to hit this again, and there’s our blog posting. The only difference is this time, it’s firing from Google Tag Manager, as opposed to the Advanced Custom Fields.
In this video, we looked at article markup and how we can leverage it to help our sites stand out a little bit better in search so we can get some of these really cool listings here of either top stories or more related stories within the search results. We also have the four ways that we can add to our site. We can do so directly on the page itself. We can add it through SEOPress, which is a cool plugin. We can create a field using Advanced Custom Fields, or we can use Google Tag Manager to make this happen. Let me know if you have any questions on any of the topics we’ve covered in this video.
