Different ways to add Metadata in Next.js 13
Next.js 13 introduced new metadata APIs that makes it really easy and intuitive to add metadata to webpages. There are two ways to add metadata:
- Config-based: Export a static [Tex]metadata[/Tex] object or a dynamic [Tex]generateMetadata[/Tex] function from layout.(jsx | tsx) or page.(jsx | tsx).
- File-based: Next.js has special files that is used to generate meta data.
We are only going to discuss about file based method in this article.
Next.js offers special files to define metadata for webpage:
- favicon.ico, apple-icon.jpg and icon.jpg: Utilised for favicons and icons
- opengraph-image.jpg and twitter-image.jpg: Utilised for social media images.
- robot.txt: Provides instructions for search engine crowling.
- sitemap.xml: Offers informatipn about website’s structure. we can programmatically generate using javascript.
- manifest.json: Used for meta data in every website extension.
Metadata Files Next.js
Metadata helps search engines index the content of a web page and helps users to find what they are looking for. Next.js 13 introduced new APIs which help developers to improve SEO in very simple ways. In this article, we are going to learn to define metadata in Next.js applications using meta files.
Table of Content
- What is Metadata?
- Why Metadata Matters?
- Different ways to add Metadata in Next.js 13
- Managing Metadata in Next.js
- Favicon
- Opengraph-image and twitter-image
- robot.txt
- Sitemap
- Static metadata
- Dynamic metadata
- Conclusion