In part 2 of our series Headless WordPress + React, we will talk about SEO and how we make sure that our website is ready for social media sharing. To checkout part 1 go here:

In this blog we will talk about the following items.

1. Introduction to SEO
2. Introduction to our problem
3. Install repo
4. Set up port forwarding with Ngrok
5. Lighthouse + MobileFriendly testing
6. Add React Helmet
7. Meta tags explanation
8. Explanation to YOAST and Yoast REST API
9. Configure meta tags trough WordPress
10. React-snap for publishing
11. Other tools

The repo’s we will be using is here:
https://github.com/HarisSpahija/hybrit-wordpress-frontend

The end result is shown here:
https://github.com/HarisSpahija/hybrit-wordpress-frontend/tree/seo-blogpost-2

What is SEO? SEO stands for Search Engine Optimization. Search engines will collect websites from the web and index them in a registry. All these websites are graded based off your website’s performance, content and traffic. Search engines such as Google, Bing and Duck Duck Go all require a lot of work to look through all the websites and understand what is being displayed. Based on that information Search Engines create a ranking. The ranking will decide what site will show up first when searching the web through the engine. Logically the higher you show up in this index, the more traffic you are more likely to get. The more traffic you get, the higher you will climb in this index. So you can understand why SEO will be a key requirement for a lot of websites.

These bots that check your website are optimized to run through a website as quick as possible. Usually they will ignore javascript and look at only static html and css. The reason they do this is to make the bots very efficient. Running every single website on the internet is quite a lot of work.

Google has already started indexing websites that are created with a frontend framework but lack the capacity to run a lot of javascript. Also the more javascript there is on a website, the slower the bots tend to be, thus resulting in a more negative score for performance.
React is one of these frontend “frameworks” that runs javascript on the client. This makes some bots to completely ignore your website because they simply cannot run the javascript required to load your website. The solution to this problem is to make sure you output static html and css for the bots, so your website will be indexed properly.

The repo we will be using can be found here:
https://github.com/HarisSpahija/hybrit-wordpress-frontend

Set up the backend with WordPress like explained in part 1 here:
https://werkenbijhybrit.nl/blog/combine-headless-wordpress-with-a-react-spa-part-1

Run both the backend en frontend and make a couple of posts in order to create some content.

To run the backend run:  docker-compose up 
To run the frontend run:  npm i && npm start 

So like we described in the introduction, we have this issue where search engines will have trouble looking through our website. We can check how our website is being read by tunneling our local host of the frontend with ngrok. We will also make use of lighthouse. In this example we run everything on Chrome.

Ngrok is a tool that will help us forward our setup so we use some tools like Twitter Card validator and Mobile Friendly Test.

To install Ngrok we can visit this website

https://dashboard.ngrok.com/get-started

I already created a Ngrok setup for you, we will run both the frontend and backend on Ngrok.

Replace the auth token with your unique auth token from Ngrok in the `Ngrok.yml`
If you followed the steps we can forward our frontend like so

 ./ngrok start -config ngrok.yml react wordpress 

This should result in a dynamic link that allows you to visit your localhost from any website. Copy the backend url from werkenbijhybrit.nl to the routes link

In my case I change the localhost to something like this

If you visit https://search.google.com/test/mobile-friendly and enter your frontend url you can see how google will see your website. As you can see all of our content from WordPress will show up. Amazing right?

If you are using chrome, you can also test your website by going into your developer tools.
Go to audits and click “generate report”. You will find an overview on how your website is performing according to google’s standards. Disclaimer: This is how Google will rate your website, your website can still perform well according to your or your company’s standard and does not reflect on the general experience of your users.

We can see underneath the report all the frames that are displayed when a user visits your website. These frames are rated based on 3 things:

• Response time
• First Meaningful Paint
• Time to Interactive

Response time
Google will give you a score based on how long it takes for the Google bot to connect to your website and start fetching data. Also latency between you as a user and the website is calculated.

First Meaningful Paint (FMP)
FMP is the time it takes for a page’s primary content to appear on the screen. This is perceived as the start of a loading experience for a user. Your website does not have as to be fast as you might think. As long as the experience for the user feels like the website performs fast is important to Google. This starts by how fast a user can see a loading animation or the skeleton of your website. In general this reflex also on the UX of your website.

Time to Interactive (TTI)
TTI is the time it takes for your website to be actually functional. Can a user click buttons or can the user see meaningful content where the user can interact with? TTI importance is very sbujective. If you have a news website you want the user to see the news as fast as possible in order to scroll to your website. If you have a tool that is used for internal time administration it might not be as important.

You can use these tools to check for best practises and make sure that the changes you make to your website will not affect SEO according to Google’s standards.

Now to make sure we can display some nice information on our indexation at Google such as a title and description. We can add meta tags. Meta tags are usually added to the HTML of a website outside of the <body /> tag. React injects itself in the body tag using the Virtual DOM, this limits us to only change content in the body tag. Luckily there is a tool that will help us set the required meta tags. We will use React-helmet for this.

Lets install react-helmet
 npm install react-helmet

React-helmet allows us to set the meta tags in the HTML. For example we can add a general title to our React website like so. Social tags like twitter and facebook cards will also be able to be set here. So let’s set up the title of every page trough react-helmet.

On our ExamplePage.js we can add the title of every page like so

If everything works you should be able to see the title being changed in your browser tab

Obviously we don’t want every page to have the same tag. Every page should be a unique experience and have unique titles right? We want to have meta tags that are dynamic to our WordPress content, even better we can adjust the content of our meta tags on WordPress and validate them there. There are some tools that will help us set up the right meta tags and check the content of our pages. We will install Yoast and Toast REST API. You can install these plugins through your WordPress plugins tab.

There are a ton of meta tags you can add to your website to make all the content more shareable and allow Search Engines to index your website properly. Even twitter is making use of meta tags for when you share a website. Heck it goes as far that even websites can be linked with cool cards trough video games.

Yoast SEO is a plugin designed to help SEO on wordpress websites. We can check the general usage of the right wording, check for broken links and set up meta tags.

Once we installed Yoast SEO we can set up our first meta tags. If you edit your page on wordpress and scroll down, you will see something like this.

Let’s change the meta description to something more meaningful. Also lets add a more meaning for our user when they see our website in the google index.

Amazing! Feels more like a real website doesn’t it? So lets make sure this data is added to our website. Lets visit the rest API and check this page out at https://werkenbijhybrit.nl/?rest_route=/wp/v2/pages. As you can see none of our Yoast data is displayed here. Yoast SEO has a limitation that doesn’t allow the meta tags to be exposed to the REST API. For that we can install WP REST Yoast Meta (WRYM). WRYM allows the Yoast meta data to be exposed so we can combine it with our react-helmet. Let’s go back to our react app and add the Yoast meta tags to our ExamplePage.js

If you visit the contact page we will now be able to see all of the extra meta tags we got.

As you can see Yoast also automatically adds meta tags for social media platforms such as twitter and facebook.
If you browse through the pages you can see that there are proper meta tags set up on every page where you add content to the yoast plugin. When they are not available they will default to the default Yoast Meta tags.

Great, lets test our website here: https://metatags.io/

As you can see none of our meta tags are working for our `/contact-page`.

This is where we come to the limit how much we can serve for SEO en Social Media Sharing. Both Twitter and Facebook only look at the initial HTML of our app. Client Side Rendering a React Apps are simply not accessible to these crawlers.

Second reason why your meta tags might not work is because the usage of localhost solution that we put together. There are a ton of hosting solutions that will allow us to host our API and make it more accessible for bots and remote crawlers.

React-Snap is a tool that will not only make our website faster, it will also allow us to prefetch all of our pages and serve it as static HTML/CSS.

Even though React-snap will make our content static, what we maybe don’t want to have because reasons, it is the best option we have for our project right now. React-snap will run through all our pages and routes and change them to static HTML and refs. It will also set all of the required meta tags in the HTML pages created by React Snap This will allow us to reach those search engines that have trouble going through our javascript.

Install react-snap with

 npm install --save-dev react-snap 

add this code to your scripts in your package.json
“postbuild”: “react-snap”

Now when you run a build you will be able to prefetch all the routes and write them to static html pages.

This will result in a couple of files that we can then bundle and host on our CDN. There is one major downside to this solution. Every time we add another page on our WordPress, it will not show up on our website. There really isn’t any solution apart from using a framework or tool that is designed for this problem. The creation of these snapshots is something that has to happen continuously on preferably a server. What we created here is a child form of how server side rendering in NextJS works.

NextJS
NextJS is a great tool to create Server Side Rendering solutions like setting up a Headless WordPress with React. I would recommend to start with the starting boilerplate created by Postlight https://github.com/postlight/headless-wp-starter

Frontity
Frontity has a ton of built in tools that allows us to optimize not only the displaying of our WordPress content, but also the amount of time it takes to have our first FMP and TTI. There is a video I used as a reference to everything I told you in these 2 blog posts. https://www.youtube.com/watch?v=fjgmjyXT1kQ

Prerender.io
If there is no other way I would recommend using something like prerender.io to prerender all of the pages to static html/css. Tools like Netlify allows us to make use of their built in prerendering methods. If you have the time I would definitely check it out!

If you have any question to how we can help you setup your wordpress frontend theme or boost your SEO. Feel free to contact HybrIT.
For any questions and help regarding these blog posts, feel free to contact me here:

harisspahija@hybrit.org
https://github.com/HarisSpahija
DM me on @spahija_haris on twitter.

+31 (0)30 227 31 97
Ma t/m vr 9:00 – 17:00

Or fill in the contact form