In terms of SEO, JSON-LD is implemented by leveraging the Schema.org vocabulary, which is a collaboration by Google, Bing, Yahoo!, and Yandex in 2011 to create a unified structured data vocabulary for web.
The LD-JSON Script for Blogger BlogPosting type
This is the minimal ld+json script generated for the blog post.<script type='application/ld+json'> { "@context": "http://schema.org", "@type": "BlogPosting", "mainEntityOfPage":{ "@type":"WebPage", "@id":"<data:blog.url.canonical/>" }, "headline": "<data:view.title.escaped/>", "image": { "@type": "ImageObject", <b:if cond='data:view.featuredImage'>"url": "<b:eval expr='resizeImage(data:view.featuredImage, 1200, "1200:630")'/>", <b:elseif cond='data:blog.postImageUrl'/>"url": "<b:eval expr='resizeImage(data:blog.postImageUrl, 1200, "1200:630")'/>", <b:else/>"url": "https://cdn.blakbin.com/online-bloggerbook.png", </b:if>"height": 1200, "width": 630 }, <b:if cond='data:post.thumbnailUrl'>"thumbnailUrl":"<data:post.thumbnailUrl/>", <b:else/>"thumbnailUrl":"https://cdn.blakbin.com/bloggerbook-thumbnail.png", </b:if>"datePublished": "<data:post.timestampISO8601/>", "dateModified": "<data:post.lastUpdatedISO8601/>", "author": { "@type": "Person", "name": "<data:post.author/>" }, "publisher": { "@type": "Organization", "name": "<data:title/>", "logo": { "@type": "ImageObject", "url": "https://cdn.blakbin.com/bloggerbook-logo.png", "width": 99, "height": 58 } }, "description": "<data:view.description.escaped/>" } </script>
How to implement LD-JSON data Structure
- Login to your blogger dashboard.
- Click on Theme > Edit HTML.
- Click on HTML Code text area then hit CTRL+F in our Keyboard.
- On small input area appear at the top right of our HTML Code area, fill with below text and then hit Enter on the keyboard.
- Once found, insert ld+json script above, right under the text.
- Our Code structure might look alike:
<b:includable id='post' var='post'> <script type='application/ld+json'> <-- content --> </script> <-- other code -->
- Make edit for every orange text with yours, then save theme.
- Go to Google Structure Data Testing Tools, pick one random blog post URL, then run a new test by inserting one of the blog post URLs, if the result shows no error, this means our json+ld structure data is valid.
<b:includable id='post' var='post'>
Explanation
The first URL in "ImageObject " part is a default replaceable image if the post does not have Featured Images Image or any Images. Make and upload within blog post editor with 1200px width and 600px height and grab the URL of that image, we must take URL with /s1600/ inside it to get full image size, example https://4.bp.blogspot.com/.../s1600/sample.jpg then replace to the first 'Orange text'.Second orange part is for thumbnaiURL, its 50px minimum width, and height. Will be fired when no thumbnail image is present inside a post.
The third URL is our logo image, make one and upload then grab and replace to the second 'Orange text' like we do on the first URL. Right after it is the width and height of our logo, it does have rules to make our json-ld valid by making a logo height smaller than 60px height.
In blogger newer themes, json-ld structure has included by default with inclusion call <b:include name='postMetadataJSON'/>w which is managed by the blogger server. If you wanna use it on a newer version of blog variants, then you must find and delete that inclusion.
hi blak, thanks for the great info,
ReplyDeletei see you homepage bloggerbook.blakbin.com use json-ld with "WebSite" type, can you tell me how do that at default Contempo template ?? thx, i wait your help
how to delete the old one? Please guide me
ReplyDeletethanks a lot for this
ReplyDeletethanks.. working for me
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteCan't that code need past below Id=post
ReplyDeleteAnybody tell what wrong
This post brought me to your web, and it worked.
ReplyDeletefrom gngjobs.com.ng
this article is the best have seen
ReplyDeletegreat post... like it
ReplyDeletefor more like this visit cobietech.com
This comment has been removed by the author.
ReplyDeleteThanks It Worked on one of my websites and Now I am Applying it on pinoytvtambayanreplay.com
ReplyDeleteThanks for sharing. I need help. I have a job website which provides latest govt jobs. I upload a third party theme to my website. I just want to know is there a way to check scheme markup in my website. I do not know what is schema markup and what function did this performs in website. Take a look my website to better understand my problem. (https://pkjob.site/)
ReplyDeleteThis blog has very distinct features. Thanks
ReplyDeletedesign agencies san francisco
Святой Лонгин является интересным персонажем не только с точки зрения истории, но также с точки зрения религии, но что если он был сотворен руками человека, по ощибке не правильно переведшего Евангелие?
ReplyDeleteА существовал ли в реальности Лонгин и его копье?
My search for adding a JSON-LD to Bloggers end here. Thank You for the detailed article on how to add Schema
ReplyDelete