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.
• 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
• 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.

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);
});

3. How to verify the structure data we added?

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

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

That's it!

Articles

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

• My blog-posts for software developing: https://medium.com/a-layman
• My web resume: https://jenhsuan.github.io/ALayman/cover.html
• Facebook page: https://www.facebook.com/imalayman