Let's add a dynamic sitemap.xml file to our Next.js blog, built using the new Next.js App Router. We'll also add some helpful metadata tags including the canonical url tag, the Open Graph protocol og tags, and twitter cards.
Key Takeaways:
1:02 - A sitemap.xml file is essential to any website's SEO. It signals to search engines, like Google, that your site and pages exist.
3:34 - You can create a sitemap.ts page under the /app directory to generate a sitemap with Next.js
5:41 - To make a sitemap that is dynamic, you'll need to add or re-use code that loops through all of your blog posts or website pages, and get the url for each post or page.
9:44 - Once your sitemap.xml is created, you'll want to submit this to Google Search Console so that it can start crawling and indexing your website's pages and blog posts.
11:32 - We take a look at how metadata and meta tags work with the Next.js App Router. We also start to add other meta tags
14:09 - The canonical url will help search engines know which url you want to be the "source of truth" for a particular page. This is the url that Google will want to index in the case of duplicate or near duplicate pages or links.
15:36 - The Open Graph protocol tags will help show a nice picture and title when sharing your website with social media platforms such as Facebook and LinkedIn.
17:56 - Twitter, or X, has specific meta tags it will look for when displaying your website on its platform. The twitter card metadata will make sure things look the way you want. You can preview these by going to any open graph preview site, such as https://www.opengraph.xyz/
19:37 - We add semi-dynamic metadata tags to our blog posts, and create a helpful function to generate the Next.js Metadata object.
Here are some code gists for the code seen in the video:
Sitemap.ts - https://gist.github.com/ChangoMan/824daa0b4fbd6f824d2e8a2ab1532006
Layout.tsx with Metadata - https://gist.github.com/ChangoMan/a0754b24464cace64126d684bb45a812
Top comments (0)