Quick Fix: Sure. To add a <link> tag to the <head> of your Next.js project, you can use the generateMetadata function and the metadata object in /app/page.tsx. Here’s an example:
// in your app/page.tsx export metadata
export const metadata = {
manifest: 'https://nextjs.org/manifest.json',
icons: {
icon: '/icon.png',
shortcut: '/shortcut-icon.png',
apple: '/apple-icon.png',
other: {
rel: 'apple-touch-icon-precomposed',
url: '/apple-touch-icon-precomposed.png',
},
},
};
export default function Page() {
... // your code here
}
This will generate the following <link> tags in the <head> of your page:
Migrating to Next.js 13.4 with appDir enabled, the next/head component is replaced with the new built-in SEO support. However, the SEO support doesn’t seem to support link tags. How can we add <link> tags to the <head> in this setup, especially when some tags should only exist on specific pages (which is not supported by conditional rendering in the root layout when using SSG)?
The Solutions:
Solution 2: Directly Adding the Link Tag
In the default `layout.tsx` file, add the link tags directly to the `
The link tags will be rendered in the browser, and this method works alongside the new recommended metadata format for other SEO tags.
Solution 4: Custom “archives” metadata field
You can use the custom archives metadata field to add <link> tags to the <head> of your Next.js application with appDir enabled. To do this, you can use the following code in your getStaticProps or getServerSideProps function:
// getStaticProps or getServerSideProps function
export async function getStaticProps() {
return {
props: {
// Add a link tag to the head of the page
metadata: {
archives: [
{
href: 'https://example.com/assets',
rel: 'assets',
},
],
},
},
}
}
This will add a <link rel="assets" href="https://example.com/assets" /> tag to the <head> of your page.
Q&A
How does one add non-SEO link tags in Next.js 13.4 with appDir enabled?
—
Follow the Next.js documentation for appDir and use the predefined way to add link tags.
How to add link tags to Next.js 13 without appDir enabled?
—
Place the link tags in the layout file, and they will show up correctly in the browser.
What is file based metadata in Next.js?
—
File based metadata in Next.js allows you to add metadata to a file and Next.js will automatically serve the file and update the relevant head elements with the correct metadata.
Video Explanation:
The following video, titled "Adding a Giant Crab to my Game So Netflix doesn't Sue me - YouTube", provides additional insights and in-depth exploration related to the topics discussed in this post.
haha netflix please have mercy brrr ➤ Download Crab Game for free - https://store.steampowered.com/app/1782210/Crab_Game/ ➤ Wishlist ...
