A Guide To NewsArticles Schema Markup for AMP and non-amp Blogger Theme

Structured data can help you to send the right signals to search engines about your News articles and content. But how to implement NewsArticle schema Markup on AMP and Non-AMP blogger theme?

Comments: 8
data:blog.title
A Guide To NewsArticles Schema Markup for AMP and non-amp Blogger Theme

If you are an owner of news Blog that hosted on Google Blogger and looking for a guide to implement news schema markup on your AMP and Non-AMP Blogger theme then this tutorial is handy for you. You can boost your SEO by using news articles Schema Markup.

Those who are already familiar with schema markup they are using schema markup for general content but if you are running a news blog site then you must use markup for News articles to send right signals to search engines and this will improve your site SEO. 

Generally to use schema markup in a news site we use some properties from NewsArticles. Those are as follows: 

PropertyDescription
datelineThis property use for the location where the NewsArticle was produced.
printColumn The total number of the news article’s column in which the NewsArticle appears in the print edition.
printEditionThe print edition of the product in which the NewsArticle appears.
printPageThis field indicates the name of the NewsArticle print page on which the article is found
printSection If the NewsArticle appears in print, then this field indicates the print section in which the article appeared.

But indeed we are unable to use these properties in blogger theme for our news site. So we have to find out a way to implement the schema markup for NewsArticles in Blogger theme. 

Why to use Schema Markup on News site?

Obviously you want to make your site highly SEO friendly. And to improve your SEO score you must validate your site by Google structure data testing tools, and for validation proper schema markup should present in your blogger theme.

Most of us use schema markup for content but if you are running a news blog then you must use schema markup for NewsArticles. And after using that markup it will send signal to search engine about your latest news. As a result search engine will understand your content and display as per search query. 

Currently there are 2 types of web site widely using by webmasters. Those are as follows:
  1. AMP – Accelerated Mobile Page
  2. Non-AMP – Non Accelerated Mobile Page

A Guide To NewsArticles Schema Markup for AMP and non-amp Blogger Theme
Search results with rich result features and Carousel
  • AMP website with structured data: If we use schema markup on AMP pages then in mobile search result page structured data can appear in a carousel with images, page logos, and other interesting search result features. And AMP website gets more priority over Non-AMP website in Smartphone. 
  • Non-AMP website with structured data: If your website designed without AMP also then you should use schema markup for your news Blog. Non-AMP website with Non-AMP article pages able to increase appearance in search results with rich result features. Often it appears in top stories with carousel.

NewsArticles Schema Markup for AMP and Non-AMP Blogger theme

I have mentioned before that Google’s latest project called AMP (Accelerated Mobile Page) and many website owners now using and switching to AMP web design. Your AMP valid site must comply with schema markup. And the markup can be used 2 different ways.
  1. JSON-LD – Widely used on AMP website but also compatible with Non-AMP website. 
  2. Microdata – Widely used on Non-AMP website but not compatible with AMP website.
Google’s recommendation is JSON-LD for AMP and Non-AMP web design. Have a look at below example of JSON-LD markup for NewsArticles schema markup. 

 
<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>

And now look at the below Microdata example for NewsArticles schema markup. Both works similarly but appear in different ways. 

<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>

You won’t able to add the above markup in your Blogger theme directly, because the whole script has presented in manually. But in blogger theme we have to use different way thus it can send signal to search engine for all WebPages. 

How to implement schema markup for NewsArticles in Blogger Theme?

You may wonder how to implement NewsArticles schema markup in Blogger Theme? Trust me it is very easy and it will take less than 5 minutes to integrate. I will show you how we can implement the NewsArticles schema markup for your news Blog easily. I am sharing the script in JSON-LD format, because this format can be use in both AMP and Non-AMP blogger theme. Please follow the step-by-step guideline. 

Step #1: Go to https://www.blogger.com and Sign in to your account

Step #2: From Blogger Dashboard click on ->Theme ->Edit HTML 

Step #3: And locate line like below by pressing Ctrl+F (Windows) or CMD+F (Mac)
<b:includable id='post' var='post'>
<article class='post hentry' itemscope='itemscope' itemtype='http://schema.org/Blog'>
Step #4: After gettign the above line please copy the below NewsArticle markup and paste it after the   <article class='post hentry' itemscope='itemscope' itemtype='http://schema.org/Blog'> line. 

 
<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 #5: Finally click Save theme button.

You have done the schema markup integration task. But how you will understand that your  NewsArticles schema markup is working perfectly? 

You have to test your site in Google Structured data testing tools. Just go through the below steps- 

Step #1: visit the below URL for testing your website. 
Step #2: In Test your structured data box Type your website URL and click RUN TEST button. 


Structured data of schema
Google Structured Sata Testing Tool

If everything working fine then it will display NewsArticles schema markup without any error.


A Guide To NewsArticles Schema Markup for AMP and non-amp Blogger Theme
NewsArticles Schema Markup for AMP and non-amp Blogger Theme

I hope this guide will help you to make your Blogger theme compatible with NewsArticle schema markup. And after successfully implementing this markup search engine will understand your content type and your news content will start display on search engine. If you are lucky then it will display in carousel under top stories. If you face any trouble then feel free to leave a comment below. I will try to help you to solve your problem. Thank you.

Speak Your Mind

I really love to read your blog as well as the examples that you’ve mention. Thank you so much for this helpful contents. I am looking forward to see more example contents like this.

If you have time you can also visit this site that I managed to surf in business startups.10 ways to get high Quality Backlinks in 2017 SEO

Hi Rabbi, Have tried to contact you on facebook and your contact form but it seems not working. Can I have your email address?

Regards,
Ann
anncoojournal@gmail.com

Hi Ann :)
I have send you an email...

Thank you.

Thanks for your comment on BloggerSpice :up

Thank you buddy for this clean codes.
Adding AMP to blogger is quite hard but it is really done too quickly.

Hi..
very happy to visit your site again.
i want to know that when we are going to fix the structure data problems.Is the sequence does matter.??
check this one:
http://www.pilottestinglab.ml/
and please also check a single post over data structure because my post structure data sequence( image , publisher then author) is different from the homepage(author ,image than publisher)...

Welcome Yasar :up
Thanks for dropping your comment here. I am very glade to hear that this tutorial has helped you.

Hi Usama :)
Sequences are not required. Googlebot only search specific items from your Blog and schema help to find it easily. So sequence is not necessary.

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *