Structured data is the definition of content in search engines to bring 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 to understand 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 what the bost, topic, and the content are 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. The Shema Markup includes some of the best article 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
How To Add News Article Schema 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’s 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 supported
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.
1. JSLOD-LD News Article Schema
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.
<!-- wp:quote {"canvasClassName":"cnvs-block-core-quote-1612882415912"} -->
<blockquote class="wp-block-quote"><p>[<code><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> ]</code></p></blockquote>
<!-- /wp:quote -->2. MICRODATA News Article Schema
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.
<!-- wp:quote {"canvasClassName":"cnvs-block-core-quote-1612882416170"} -->
<blockquote class="wp-block-quote"><p>[ <code><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> ]</code></p></blockquote>
<!-- /wp:quote -->How To Add News Article Schema In Blogger.
Follow the steps below 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 the 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.
<!-- wp:quote {"canvasClassName":"cnvs-block-core-quote-1612882416706"} -->
<blockquote class="wp-block-quote"><p>[ <code><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></code></p></blockquote>
<!-- /wp:quote -->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.
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. In case you face any difficulty while implementing the following fields please reach me by Commenting below Or Contact Me.