JSON-LD or JavaScript Object Notation for Linked Data, is a lightweight Linked Data format. It is easy for humans to read and write. It is based on the already successful JSON format and provides a way to help JSON data inter-operate at Web-scale.
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.tonghop.ksvadl.com/logo.png",
</b:if>"height": 1200,
"width": 630
},
<b:if cond='data:post.thumbnailUrl'>"thumbnailUrl":"<data:post.thumbnailUrl/>",
<b:else/>"thumbnailUrl":"https://tonghop.ksvadl.com/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.tonghop.ksvadl.com/logo.png",
"width": 99,
"height": 58
}
},
"description": "<data:view.description.escaped/>"
}
</script>
How to implement LD-JSON data Structure
1. Login to your blogger dashboard.
2. Click on Theme > Edit HTML.
3. Click on HTML Code text area then hit CTRL+F in our Keyboard.
4. 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.
<b:includable id='post' var='post'>
5. Once found, insert ld+json script above, right under the text.
6. Our Code structure might look alike:
<b:includable id='post' var='post'>
<script type='application/ld+json'>
<-- content -->
</script>
<-- other code -->
7. Make edit for every orange text with yours, then save theme.
8. 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.
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.
Blogger , Tips and Tricks
