React-helmet is the industry standard for meta tags optimization. It allows every page to have its own custom meta tags, what we have seen is a major victory for React SEO. The library also allows for the addition of Open Graph, which directly impacts the shareability of your content on potentially highly viral spaces such as social networks.

Resource: React Helmet Documentation

Manage document head dynamically: Dynamically manage your app’s metadata (titles, descriptions, etc.). Ideal for boosting SEO and optimizing social media previews. 🛠️ 🔗github.com/nfl/react-helmet

In a React application, you can use the react-helmet library to manage meta tags dynamically:

Document Metadata is convenient and secure because it is built into React, whereas SEO libraries like React Helmet have security issues. React Helmet hasn't had a GitHub commit since 2020, though it still garners about 1 million weekly downloads on npm. Despite its popularity, the project was abandoned due to data integrity and leakage issues. Consequently, Scott Taylor, the developer of React Helmet, archived it and replaced it with react-helmet-async, which eliminates the security issues found in React Helmet by encapsulating changes within a server-side request to prevent memory leaks. Unlike Document Metadata, where you don't have to import any components, SEO libraries require you to import SEO library components:

React will enable the usage of the , , and tags anywhere in the App, improving SEO performance.
Previously, libraries like as react-helmet were used for this.

Summary

In my perspective, React v19 will deliver a lot of relevant and required enhancements, allowing developers to focus more on important features that matter!

Resources

https://react.dev/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024#react-compiler
https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-optimizing-compiler
https://www.youtube.com/watch?v=qOQClO3g8-Y
https://react.dev/reference/react/

React Helmet

To do that, create a PageWrapper.tsx component in the component folder. This component will act as a wrapper for each of the pages you will eventually create in our app. In there you will have a Header, children(the content of each page), a Footer, and additional head meta tags using react-helmet. But for this article, I will keep things simple and just use only the footer data there.

For context, the subject-predicate-object pattern is known as a semantic triple or Resource Description Framework (RDF) triple:

https://en.wikipedia.org/wiki/Semantic_triple

They're useful for storing social network graph data, for example, and can be expressed using standards like Open Graph and JSONAPI:

https://ogp.me

https://jsonapi.org

I've stored RDF triples in database tables and experimented with query concepts from neo4j:

https://neo4j.com/docs/getting-started/data-modeling/tutoria...

These are straightforward to translate to SQL but the syntax can get messy due to not always having foreign keys available and hitting limitations with polymorphic relationships. Some object-relational mapping (ORM) frameworks help with this:

https://laravel.com/docs/12.x/eloquent-relationships#polymor...

I feel that document-oriented databases like MongoDB jumped the gun a bit, and would have preferred to have had graph-oriented or key-value-oriented databases providing row/column/document oriented queries and views. Going the other way feels a bit kludgy to me:

https://www.mongodb.com/resources/basics/databases/mongodb-g...

Basically Set Theory internally with multiple query languages externally and indexed by default.

Oh and have all writes generate an event stream like Firebase does so we can easily build reactive apps.

These attributes are intentionally chosen because they are based on the Open Graph Protocol. You may have already noticed that when you paste a link on some social media, after a second or two, it expands displaying an image, a title and summary. This data comes from Open Graph tags that are contained in the source code of the page you posted. In order to add new articles to this website, every time we need to inspect its source code, find the Open Graph tags, copy and paste the contents to create a new object. And, finally, add it to the array on the JSON file. The JSON file looks like this:

You can also include more information about your website! Read here to know more: Twitter, OpenGraph

React-helmet is the industry standard for meta tags optimization. It allows every page to have its own custom meta tags, what we have seen is a major victory for React SEO. The library also allows for the addition of Open Graph, which directly impacts the shareability of your content on potentially highly viral spaces such as social networks.

Meta-Tags und OG Images? Ähm. Kommen später. Vielleicht.

Meta tags and OG images? Uh, maybe later.

The Open Graph Protocol

And, of course, we’re not limited by only the title tag - we can pre-render all the information in like this. This gives us a relatively easy and cheap way to solve the “no-JavaScript” problem for social media preview functionality. They usually don’t need more. Most of them rely on the Open Graph protocol, which is just a bunch of tags with information.

A minor nitpick, but it would be great if you put a description of the site in the meta/og description[0] so people get an explanation of what the site is when linking elsewhere, e.g. the same "This page is a free and open-source wiki about hardware hacking!" as is on the page itself. I just linked the site in Slack and it just says "hardbreak.wiki / Welcome to HardBreak | Hardbreak" which is pretty terse.

[0] https://ogp.me/

How would you render FRED charts with e.g. headless node to generate PNG (or SVG) images for og:image , schema:image , and schema.org/thumbnailUrl so that shared URLs to FRED charts have a PNG (or SVG) image in their social share cards?

OpenGraph: https://ogp.me/

schema:thumbnailUrl: https://schema.org/thumbnailUrl