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 best, 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
The Shema 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 To Blogger
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 suported
In that case, that's why I choose the Json-ld news article schema markup over the microdata 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
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
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 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 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 Shema 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 to google highlighter.
Thank You for being Part of this good article.I hope that i have impacted some good SEO information that can help you Design your Blogger Blog Best for ranking. Incase you face any difficulty while implementing the following fields please reach me by Commenting bellow Or Contact Me.