News Article Schema Markup For Blogger Blog

News Article Schema Markup For Blogger BlogStructured data is the definition of content in search engines to bring an up a situation. In news articles, schema markup is used widely to show the news in the carousel view. News article schema markup is a necessity for any News blogger blog. Blogger environment blogs are hard to implement schema but widely encourages the use of schema markup. The main aim of News Schema News Article is understanding news excerpts from post content. You can use blogger News Article Schema Markup for both bloggers AMP a Non-AMP theme. The news schema markup includes some aspects that are needed by Search Engines. What they actually do is to group up your work for the crawlers to know that the bost, topic and the content is all about. Google displays the News article schema as a carousel view in search engines. If you want to try, write the World News in Google search and see what will happen next. You will see this. The News Schema markup is used with more than 50,000 domains.


News Article Schema Markup For Blogger Blog


News Article Schema Markup

The Schema Markup include some of the best articles search categories so as to locate important content within a post. It's good to take note of what it is made up of. The news article Schema Markup include:-

Dateline: Locates where the News Article was produced.
PrintPage: The field indicates the name of the posted news article page. 
Article Body: The whole News article page 
Article Section: The category, Label or Snippet
Page start: the start point of the news article page 
Page end: the end of a page 

These are the main Fields used by the News article schema markup to group out news article contents.

How To Add News Article Schema Markup For Blogger Blog

I had earlier mentioned that Google always acknowledges the js+load version of rich results from the schema and vocabulary because they are google based. In this case, we are going to use the ld+json of news article schema markup data in our blogger blog which I am going to instruct you nice and easy.

First, before we integrate the rich schema, I have to ask if you use the amp version of posts in your blogger blog. Mostly AMP is not part of Google plan to be used in blogger since labels will always show errors but if you have AMP in your blogger blog then well and good because the news article schema markup of the ld+json will very well both work for AMP and Non-AMP websites.

JSON-LD: widely used on AMP and Non-AMP Blogs.
MICRODATA: Only Amp versions of AMP pages are sported

In that case, that's why I choose the Json-ld news article schema markup over the micro-data one when sharing with you. Without wasting so much time, I think now your blogger blog is fit to have the schema markup. Let's jump into the tutorial.


JSLOD-LD News Article Schema Markup For Blogger Blog.

Google recommends the use of the following version, so use this one instead of the one below. It will change your blogger blog rich results. 


<script type="application/ld+json"> { "@context": "http://schema.org", "@type": "NewsArticle", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://google.com/article" }, "headline": "Article headline", "image": { "@type": "ImageObject", "url": "https://google.com/thumbnail1.jpg", "height": 800, "width": 800 }, "datePublished": "2017-02-05T08:00:00+08:00", "dateModified": "2017-02-05T09:20:00+08:00", "author": { "@type": "Person", "name": "John Doe" }, "publisher": { "@type": "Organization", "name": "Google", "logo": { "@type": "ImageObject", "url": "https://google.com/logo.jpg", "width": 600, "height": 60 } }, "description": "A most wonderful article" } </script> ]

MICRODATA  News Article Schema Markup For News Blogger Blog.

Point to note!
Please only use this markup if you use amp version of the blogger blog. This can only be implemented by the highlighter version web platform on google where you have to submit each for every article. In case you don't want to have so much in implementing the news schema markup then only use the JSLOD-LD news article schema instead.


 <div itemscope itemtype="http://schema.org/NewsArticle"> <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://google.com/article"/> <h2 itemprop="headline">Article headline</h2> <h3 itemprop="author" itemscope itemtype="https://schema.org/Person"> By <span itemprop="name">John Doe</span> </h3> <span itemprop="description">A most wonderful article</span> <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject"> <img src="https://google.com/thumbnail1.jpg"/> <meta itemprop="url" content="https://google.com/thumbnail1.jpg"> <meta itemprop="width" content="800"> <meta itemprop="height" content="800"> </div> <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization"> <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"> <img src="https://google.com/logo.jpg"/> <meta itemprop="url" content="https://google.com/logo.jpg"> <meta itemprop="width" content="600"> <meta itemprop="height" content="60"> </div> <meta itemprop="name" content="Google"> </div> <meta itemprop="datePublished" content="2017-02-05T08:00:00+08:00"/> <meta itemprop="dateModified" content="2017-02-05T09:20:00+08:00"/> </div> ]

How To Implement News Article Schema Markup In Blogger Template Theme.

Follow the steps bellow closely to use the schema markup in your code. It's as easy as placing the code above in the highlighted area. 
Considering you have selected the schema markup for the news article that you want to use then follow my steps.


How to add jslod-ld version of news article schema markup.

Step By Step Integration.
Step 1. Log In to your Blogger Blog in the blogger panel
Step 2. Navigate to the left side column selection of commands.
Step 3. Click on Theme command.
Step 4. Navigate to Edit HTML and click on it.
Step 5. Click anywhere within the code and click on Ctrl+F or CMD+F on mac.
Step 6. Locate for the below by pasting it in the search box.


[ <b:includable id='post' var='post'><article class='post hentry' itemscope='itemscope' itemtype='http://schema.org/Blog'> ]
Step 7. After getting the above code, just below it, you will paste the below jslod code the same as highlighted above.


[ <script type='application/ld+json'> { "@context": "http://schema.org", "@type": "NewsArticle", "mainEntityOfPage": { "@type": "WebPage", "@id": "<data:post.title/>" }, "headline": "Article headline", "image": { "@type": "ImageObject", "url": "<data:post.firstImageUrl/>", "height": 800, "width": 800 }, "datePublished": "<data:post.timestampISO8601/>", "dateModified": "<data:post.timestampISO8601/>", "author": { "@type": "Person", "name": "<data:post.author/>" }, "publisher": { "@type": "Organization", "name": "<data:blog.title/>", "logo": { "@type": "ImageObject", "url": "https://google.com/logo.jpg", "width": 600, "height": 60 } }, "description": "<data:post.snippet/>" } </script>  ]

Step 8. Finally, Click on Save Theme.

That's all for today. Now wait for a while and search one of your blog pages in structured data testing tool to see if you will get a News Article Schema Markup in your blog post.


How To Use MICRODATA News Article Schema Markup on Blogger.

This will be a lot of work for you to set up every time you post on your blogger you have to fill in the structured data, test it and then go to the highlighter by google and paste there for it to work. Mostly the markup is only used in WordPress but now Google made it easy. Let me take you on how to go about it.

Step 1. Change the following fields in Green with your articles.


<div itemscope itemtype="http://schema.org/NewsArticle"> <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://google.com/article"/> <h2 itemprop="headline">Article headline</h2> <h3 itemprop="author" itemscope itemtype="https://schema.org/Person"> By <span itemprop="name">John Doe</span> </h3> <span itemprop="description">A most wonderful article</span> <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject"> <img src="https://google.com/thumbnail1.jpg"/> <meta itemprop="url" content="https://google.com/thumbnail1.jpg"> <meta itemprop="width" content="800"> <meta itemprop="height" content="800"> </div> <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization"> <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"> <img src="https://google.com/logo.jpg"/> <meta itemprop="url" content="https://google.com/logo.jpg"> <meta itemprop="width" content="600"> <meta itemprop="height" content="60"> </div> <meta itemprop="name" content="Google"> </div> <meta itemprop="datePublished" content="2017-02-05T08:00:00+08:00"/> <meta itemprop="dateModified" content="2017-02-05T09:20:00+08:00"/> </div> ] 

 Step Last. Import it into google highlighter.


News Article Schema Markup For Blogger Blog
5/ 5 stars - "News Article Schema Markup For Blogger Blog"

Post a Comment

0 Comments