loading...
Cover image for Day 17 of #100DaysOfCode: apply structured data for AJAX data to improve SEO

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

jenhsuan profile image Jen-Hsuan Hsieh ・2 min read

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

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!

Posted on by:

jenhsuan profile

Jen-Hsuan Hsieh

@jenhsuan

6+ year work experience in the software engineering field. 2+ year work experience with front-end JavaScript framework like React.js, Knockout.js. and Microsoft solution.

Discussion

markdown guide