Now, I understand REACT is a Single Page Application and apparently as a SPA (has or) might had some challenges on adding meta tag information for Search Engines information.
Right now I have a website built on REACT, with a bunch individual addresses, or individual extensions, or browser pages (I don’t know what is the proper terminology of it).
The point is that I need to include meta tags, Open Graph tags, Google / Facebook tracking for each one of the extensions.
Some examples I use this tracking / tags are for:
Proper search Engine information to index pages with relevant information for each page.
OpenGraph tags to share individual pages on social sites and show individual pictures and information relevant to each page.
Facebook / Google tracking to track visitors to site, and get information such as Google Analytics.
Questions:
What would be the best way to include meta tags / tracking for a SPA like REACT?
Doesn’t REACT also have an indexing feature to use? If so, where can I get more information for that?
Yeah, you’re going to need to either use a server which can dynamically generate HTML with the meta tags updated (SSR), or generate all your pages beforehand and host them statically (SSG).
It’s a single HTML page, hence Single Page App, so you just write the tags yourself in the head of that single HTML page.
Nope, because it’s primarily for single page apps. Which only have one page to index, by definition.
Is that actually correct (ie you have multiple HTML pages, each with some React application attached), or are you using something like React Router? If it’s the latter you don’t have discrete pages, you are just allowing a user to mount/unmount different React components in your application by adjusting the text in their browser’s URL bar.
You need to serve web pages (plural) to be able to index web pages (plural). React is designed for adding functionality to a single web page. For example, if you built a calculator web application then the web page it lived on you may want indexed. But you wouldn’t index the result screen for 1, 1 +, 1 + 1, 1 + 1 =, 1 + 1 = 2, 2, etc etc., that would be ridiculous.
There are tools & frameworks that generate actual web pages but can be developed using React as one of the tools: React, in the end, just generates HTML, and ReactDOM contains the functions to make that happen, out of the box. Next.js is the leader here in terms of frameworks. But if you are creating a web site you just need something that creates HTML, be it static generation or a web application that lives on a server, and those things can be any language
/ the homepage, where users can see a list of posts
/post?id=, which leads to a specific blog post
You can’t include meta tags in the first route, but in the second one, you can achieve this. Create the project by running npx create-react-app dynamic-meta-tags. Before you move to the backend code, you should add the tag placeholders on the index.html page. Properly created metatags accompanied by manual link building service will impact positively the overall website’s reputation.