What is Metadata?
Metadata provides information about web pages. It is not visible to the user but works behind the scenes, embedded in HTML usually within [Tex]<head>[/Tex] element. This hidden information is crucial for search engines to index the content of the web page. Proper metadata increases the chances of higher ranking.
Some common metadata types include
- Title: Title of the webpage displayed in a browser tab.
<title>Title</title>
- Description: Brief overview of webpage content.
<meta name="description" content="This is a brief description of my webpage.">
- Author: Author of the webpage generally used to give credit to the author.
<meta name="author" content="Sarthak Roy">
- Date: Specified when webpage was last modified.
<meta name="date" content="2024-11-05T14:30:00+02:00">
- Keywords: Comma seperated keywords related to webpage that search engines to index the content.
<meta name="keywords" content="Next.js, React, w3wiki">
- Favicon: Small image displayed in browser tab.
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
Contact Us