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

#100daysofcode #seo #marketing #webdev

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