Now it is more critical than ever to truly understand JavaScript for SEOs.

Here is a horror story that Mark Williams-Cook shared on Linkedin.

“The developer insisted they knew what they were doing and that “Google can index the content”. The result is people have been laid-off with the subsequent damage it has done to the business.”

Now, imagine that you are the SEO at this company or similar ones making this transition to JavaScript.

After you are armed with deep JavaScript knowledge, you could provide them with experimental data that shows, without a doubt, that they will have big problems if they move forward without adjustments.

You’d be a big hero.

In this guide, we will learn modern JavaScript building blocks while we code a simple single-page app and optimize it with structured data.

Here’s the plan:

Create a single page app using an HTML5 template. Add dynamic behavior with ReactJs. Use the Chrome JavaScript Debugger to fix errors. Optimize the app for structured data. Use the structured data testing tool to validate the markup. Dynamically generate the JSON-LD markup using JavaScript.

Advertisement Continue Reading Below

I’ve been a strong advocate of SEOs learning developer skills.

Python is very useful if you spend a lot of time doing data analysis and automation.

JavaScript is crucial if you have to deal with a growing number of clients where the frontend is built in ReactJs, AngularJs, VueJs, etc.

Create a Single Page App Using an HTML5 Template

We are going to use Visual Studio Code to write and Chrome to test our JavaScript code.

We are going to leverage this Google codelab that shows how to implement structured data to a simple recipe page.

Here is what our final result looks like.

When going through the codelab we will find a single page app using an HTML5 template. We will borrow the code so we don’t have to write it from scratch.

Advertisement Continue Reading Below

This is what the page looks like.

This is what the code looks like.

It includes semantic HTML5 tags like <nav> and <button> to indicate which part of the page is the navigation or where to place buttons. We will review the code in more detail soon.

Now, scroll to the bottom of semantic HTML5 tags and try adding a review. You’ll get nothing.

There is not dynamic functionality. Let’s fix that with JavaScript, more specifically with ReactJs.

ReactJs is one of the most popular JavaScript frameworks that simplify the work of building modern web applications. Our goal is not to dive too deep into the framework or JavaScript language, but get familiar with the basic concepts so we can more easily debug SEO and performance issues.

We are going to follow the instructions here which are the easiest steps to get started with ReactJs.

“React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Perhaps you only want to add some “sprinkles of interactivity” to an existing page. React components are a great way to do that. The majority of websites aren’t, and don’t need to be, single-page apps. With a few lines of code and no build tooling, try React in a small part of your website. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets.”

Advertisement Continue Reading Below

We will use React to get the Submit Review button to work. Here is what the working button looks like.

First, let’s download the page and resources using this command.

!wget -E -k -p https://googlecodelabs-structured-data.glitch.me/index.html Step 1: We are going to leverage the unique id of the <div> element that contains the submit review button.

<div id="success"> <!-- For success/fail messages --> <!-- <button type="submit" class="btn btn-primary">Submit review</button> --> </div>

Step 2: We need to add the JavaScript tags to import ReactJs.

<!-- Load React. --> <!-- Note: when deploying, replace "development.js" with "production.min.js". --> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

The unpkg.com is a very cool CDN service that takes packages from the NPM registry and makes any file in the packages available to embed in websites and applications.

Advertisement Continue Reading Below

Step 3: We are going to create a React component to support the submit review feature. We will include it in the HEAD as instructed in the tutorial.

<!-- Load our React component. --> <script src="submit_review.js"></script>

Step 4: Now, let’s create the component.

In the tutorial, we are recommended to use some starter code. The code’s purpose is to add a Like button to a page. We are going to make some slight modifications to add a Submit Review button instead.

'use strict'; const e = React.createElement; class SubmitReview extends React.Component { constructor(props) { super(props); this.state = { submitted: false}; } render() { if (this.state.submitted) { return "You submitted a review"; } return e( 'button', { onClick: () => { this.setState({ submitted: true }); } }, 'Submit Review' ); } } This code defines the behavior of the button. It maintains the state of the button, submitted or not and when we click on it, it will display the text “You submitted a review”. Next, we need to connect it to the relevant HTML code and we are ready to test it.

const domContainer = document.querySelector("#success"); ReactDOM.render(e(SubmitReview), domContainer);

The first line selects the <div> element with id “success”. The second line displays the React control we are creating inside the <div> element.

Here is what it looks like.

Leveraging the React Component State

This work above is good for illustration purposes, but not particularly useful.

Advertisement Continue Reading Below

Let’s capture the user name and review. Then, display it back when you submit the button.

Here are the relevant changes to accomplish that.

constructor(props) { super(props); this.state = { submitted: false, name: "", review: ""}; }

Inside the constructor, we define two more variables to hold the name and review.