Handling metadata
Correctly handling metadata is a crucial part of modern web development. To keep it simple, let's think about when we share a link on Facebook or Twitter. If we share the React website (https://reactjs.org) on Facebook, we will see the following card appear inside our post:
Figure 3.5 – Open Graph data of
To know which data should be displayed inside the card, Facebook uses a protocol called Open Graph (https://ogp.me). In order to give that information to any social network or website, we need to add some metadata to our pages.
So far, we haven't yet talked about how to set open graph data, HTML titles, or HTML meta tags dynamically. While a website could technically work even without that data, search engines would penalize your pages, as they would miss important information. The user experience could also be negatively affected as these meta tags would help the browser create an optimized experience for our users.
...
