DEV Community

Cover image for Day 17 of #100DaysOfCode: apply structured data for AJAX data to improve SEO
Jen-Hsuan Hsieh
Jen-Hsuan Hsieh

Posted on

Day 17 of #100DaysOfCode: apply structured data for AJAX data to improve SEO

Introduction

Add structure data to the website is a way to improve SEO. This article is a note for applying structured data for AJAX.

1. How to add structure to your website?

  • First, visit webmasters makeup helper (https://www.google.com/webmasters/markup-helper/). Choose the type of the website and put the URL of the website. Alt Text
  • Then you can label fields like name, date, tile, etc on the website manually. This tool can convert labels to MicroData or JSON-LD format Alt Text
  • For AJAX, I thought using JSON-LD is a good choice. Google robot won't miss the structured data even though we have to retrieve data from the server. Alt Text

2. How to add JSON-JD in JavaScript?

  • You can append a Script node in $(document).ready
$(document).ready(function(){
   var el = document.createElement('script');
   el.type = 'application/ld+json';
   ...
   list = []
   data.forEach(ele => {
            var t = { 
                "@context": "http://schema.org",  
                "@type": "Article", 
                "name": ele.title,
                "mainEntityOfPage": {
                    "@type": "WebPage",
                    "@id": 
                 },
                "author": {
                    "@type": "Person",
                    "name": ele.name
                },
                "datePublished": ele.time,
                "dateModified": ele.date,
                "url": ele.url,
                "image": ele.image,
                "publisher": {
                    "@type": "Organization",
                    "name": ele.name,
                    "logo": {
                        "@type": "ImageObject",
                        "url":
                    }
                },
                "headline": ele.title
            }
            list.push(t)
        });
        el.text = JSON.stringify(list);
        document.querySelector('head').appendChild(el);
});
Enter fullscreen mode Exit fullscreen mode

3. How to verify the structure data we added?

  • Visit Structured Data Testing Tool () and put the URL
    Alt Text

  • This tool will show you if there are any warnings or errors
    Alt Text

That's it!

Articles

There are some of my articles. Feel free to check if you like!

Discussion (0)