Adding json-ld To My Blog

I have been working pretty hard on the SEO of this site for a while. I constantly use the Google Search Cental to improve my reach. And recently, I found another one of their tools to add to my skillset: JSON-LD.

What is JSON-LD?

Per Wikipedia JSON-LD is a method of encoding linked data using JSON. It is used heavily by Google in helping build a “Google Knowledge Graph” and can make your blog better linked within the Googlesphere. I have been using JSON-LD as my source of truth and implementing has been pretty easy!

What I Implemented

There are a lot of different schemas that you can you to help link your content properly, but for this blog I have only used three different ones. All the schemas I used and many more can be found on the JSON-LD site linked above. First, I implemented a WebSite schema that is on every page. This shares the main information about my blog; the title, main author, and description. There are a lot of fields you can add here, but first I wanted to build a simple implementation I can build off of in the future. Below is the script I have added:

<script type="application/ld+json">
  {
    "@context" : "https://schema.org",
    "@type" : "WebSite",
    "name" : "Josh Finnie's Blog",
    "url" : "https://www.joshfinnie.com/"
    "author": {
      "@type": "Person",
      "name": "Josh Finnie"
    },
  }
</script>

Next I added a BlogPosting schema schema to every page that’s a blog post. This is where you start seeing how Google is going to use this markup to link my blog together. Because I am using Astro, I can create a generic schema and have Astro populate the data. I do this in two steps; first build out the schema and then add it to a script tag on each post. You can see what I use below:

---
const {
  title,
  date,
  tags,
  slug,
  heroImage,
  unsplash,
  unsplashURL,
  description
} = Astro.props;
var imageURL = ""
if (heroImage) {
  const optimizedImage = await getImage({src: heroImage});
  imageURL = `https://www.joshfinnie.com${optimizedImage.src}`;
}
let schema = JSON.stringify({
  "@context": "https://schema.org/",
  "@type": "BlogPosting",
  "headline": title,
  "author": {
    "@type": "Person",
    "name": "Josh Finnie"
  },
  "datePublished": date,
  "dateCreated": date,
  "description": description,
  "url": `https://www.joshfinnie.com/${slug}`,
  "inLanguage ": "en-US",
  "image": imageURL,
  "keywords": tags,
});
---

...

<script type="application/ld+json" set:html={schema}></script>

This adds dynamically my title, description, publish date, url and more. Most importantly, it is now linked the the same Person schema as my main blog pages are. We are building the connections!

Lastly, I added the WebPage schema to every page I want to share. This is my list of talks I have given, my about page, etc. The WebPage schema looks very similar to the WebSite schema above, but tells more about the individual page. You can see my WebPage schema below:

<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "WebPage",
    "name": {title},
    "description": {description},
    "author": {
      "@type": "Person",
      "name": "Josh Finnie"
    },
  }
</script>

Again, this is being populated by the frontmatter of my pages within my Astro site. This is great! We have another link between these pages and me as a person. More connections!

Conclusion

I was very happy with finding JSON-LD. Hopefully it will continue to improve my SEO and the website’s reach. I am certainly not done optimizing, and will continue to expand on my own usage of it. I did want to share where I am with it currently, and hopefully help others on their own path of SEO.

Have you used JSON-LD before? Is this something you are going to be adding to your site? Let me know by connecting with me on threads! I would love to chat. And if you found this tutorial helpful, please share it. Thank you.