How to customize Next.js metadata

Improperly configured website metadata can cause drastic issues in user experience and website discoverability.

It’s important to not only understand what metadata is, but how it’s used by the greater internet, and how to configure it in your as "data that provides information about other data".

In the context of websites, metadata refers to the invisible data that describes the content of a website. This metadata is used by search engines, social media platforms, and other web services to understand the structure, content, and meaning of your website.

Depending on the configuration, missing or incorrect metadata can actively hurt the performance of your website. Here are some ways metadata is used:

• 
  Search engine optimization (SEO): Search engines use metadata to determine the relevance of your webpage for specific searches, as well as how those search engines rank a specific web page. The more accurate and defined the metadata is, the better a search engine will know to serve it when it matches a query.


• 
  Social media sharing: Social media platforms use Open Graph metadata to display your website's content in their feeds, such as Facebook, Twitter, and LinkedIn. This is the information that's used to show stylized cards when a link is pasted in.


• 
  Content discovery: Metadata helps users discover content that matches their interests and preferences.


• 
  Rich snippets: Search engines can extract structured data from your website to display rich snippets in search results. Below is an example of rich snippets that are displayed with a movie to show ratings: