Part 38: Enhancing Your Next.js App with Custom Icons and Metadata Files
[App] Metadata
Creating a visually appealing and SEO-friendly website is essential for providing a good user experience and attracting more visitors. In this blog post, we will discuss how to set a custom icon for your Next.js app and explore the various metadata files you can add to further enhance your website.
Setting a Custom Icon
The Problem
By default, browsers look for a favicon.ico file to display as the tab icon. If this file is missing, you’ll see a generic icon, and a "Not Found" error will appear in the console. This is not the best first impression for your website.
Adding the Custom Icon
To set a custom icon in your Next.js app, follow these steps:
Download the Icon Image: Use a small image, preferably 32x32 pixels. For this example, we'll use icon.png.
Save the Image in Your Project: Place the icon.png file directly inside the app folder of your Next.js project.
my-nextjs-app/├── app/│ ├── icon.png│ └── ... (other files)
3. Automatic Detection by Next.js: Next.js will automatically detect the icon.png file and generate the necessary HTML tags. If you inspect the document head, you’ll see a link tag with icon.png as the href.
<link rel="icon" href="/icon.png" />After placing the image in the app folder, reload your website, and you should see your custom icon in the browser tab.
Understanding Metadata Files
Next.js provides a way to include various metadata files that improve the functionality and SEO of your website. Let’s explore some of these files:
Apple Touch Icon
You can add an apple-icon.png to provide a custom icon for iPhones. Simply place the image inside the app folder, and Next.js will automatically generate the appropriate tags.
robots.txt
The robots.txt file gives instructions to search engine crawlers about which pages to index. Instead of placing this file in the public folder, you can dynamically generate its content in the app folder by creating a robots.js file.
// app/robots.js
export default function Robots() {
return `
User-agent: *
Disallow: /private
`;
}sitemap.xml
For better SEO, you can provide a sitemap.xml file that lists all the available pages on your website. Like robots.txt, this can also be dynamically generated.
// app/sitemap.js
import { getAllPages } from '@/lib/pages'; // Example function to get all pages
export default async function Sitemap() {
const pages = await getAllPages();
return `
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${pages.map(page => `
<url>
<loc>${`https://yourwebsite.com/${page.slug}`}</loc>
</url>
`).join('')}
</urlset>
`;
}OpenGraph and Twitter Cards
These metadata files are used to show a preview of your pages when shared on social networks. You can either place static images directly inside each route folder or dynamically generate them.
For example, to provide an OpenGraph image for each review page:
// app/reviews/[slug]/opengraph-image.js
import { getReviewImage } from '@/lib/reviews';
export default async function OpenGraphImage({ params: { slug } }) {
const image = await getReviewImage(slug);
return `
<meta property="og:image" content="${image.url}" />
`;
}Conclusion
By setting a custom icon and utilizing various metadata files, you can significantly enhance the user experience and SEO of your Next.js application. Here’s a recap of what we covered:
Custom Icon: Place an icon.png file in the app folder to set a custom tab icon.
Metadata Files: Include files like robots.txt, sitemap.xml, and OpenGraph images to improve search engine indexing and social media sharing.
While we focused on adding a custom icon in this post, keep in mind that Next.js provides many other options to enhance your website with metadata files. Feel free to explore and implement these features to make your site even more impressive.
Happy coding!
Last updated