Implementing structured data with JavaScript

Key Takeaways

[Music] [Applause] [Music] hi everyone I'm excited to show you in the next 15 minutes how you can use structured data to make your website stand out more in Google search and how that can be done with JavaScript when the static implementation is infeasible we will start by looking at what structured data is and why it is a good idea for your website then we will look at ways to implement it using javascript and last but not least we'll take a look at how to test and debug your implementation all right now what a structured data and why is it useful structured data is a standardized set of additional markup that you can put on your pages to tell machines like Googlebot more about the content on your page on the right side here you can see the information for a specific product being highlighted in both the image search as well as the search results including additional information like ratings and price we call such results rich results to implement structured data you can use json-ld microdata or rdf a but we recommend using json-ld here is an example of what a json-ld block on your page might look like besides products there are many verticals that can benefit from structured data and become Milledgeville for which results here are some examples but you should check the link for the full gallery of supported verticals note that implementing structured data makes the page eligible for rich results but does not mean that we will always show them for every page that implements it so now we talked about what structured data is and how it benefits your website let's walk through a few possible implementations we've seen that the easiest way is to include a script tag the json-ld data in the page this can of course be done in the backend or straightening the HTML of a page but what are the options if you are using client-side oner JavaScript first of all it is fine to implement it dynamically with client-side JavaScript we recommend to use server-side rendering to make your website as robust as possible but there is no issue with implementing it with JavaScript per se in this session we will look at three possible implementation approaches of course you can use JavaScript without libraries or frameworks to inject structured data into your pages here is an example of a vanilla JavaScript implementation for a client-side rendering single page application it fetches the json-ld data from an api and injects it into the head of the page as Googlebot renders this page it will execute the JavaScript and the structured data will be rendered just make sure that the API is available to Googlebot and not blocked by robots.txt when you are using frameworks such as react angular or view J's you very likely have helpers or built-in functionality available to insert structured data into your pages here is an example of a react component using the schema helper utility to create typed json-ld for a person's profile page should you not have access to the code of your pages that have Google tag manager on these pages you may use a custom tag in custom variables to create structured data from the information that is on the page to do that create a custom HTML tag in your container and insert the relevant json-ld as well as the variables for the values of each field in the json-ld block then create the necessary custom JavaScript variables to extract information from the page so it can be inserted into the custom HTML tag automatically we advise not to copy and paste information from the page directly into Google tag manager as that will likely cause a mismatch between page content and structured data generated by Google tag manager to rise in the future right so we've seen three ways of generating structured data with JavaScript let's find out if our implementation works as expected there are two main tools for testing the implementations the first one is the rich results test you can paste a URL into the tool and see what structured data is recognized as well as if there are any issues with the structured data on the page when using javascript to generate structured data we recommend testing a URL instead of pasting code directly into the tool the other great tool for testing this is the Google search console in the URL inspection tool you can see the structured data that is detected and if it is valid but you can also see which pages of your site were eligible for which results and which ones have arrows or warnings to look into if you want to learn more about Google search in structured data check out our documentation at developers.google.com slash search or use this short link to read more on how to use javascript to generate structured data for your pages thanks a lot for joining and have a great day bye [Music] [Applause] [Music] you