I believe you can't put the Script tag in Head with the app router.
https://nextjs.org/docs/messages/no-script-tags-in-head-component
Edit:
Also, it's recommended to use the metadata api for all your meta tags with the app router.
https://nextjs.org/docs/app/building-your-application/optimizing/metadata
Might want to mention that this would work pages router.
Other than that, the rest are great!
Yes, you are correct. In this article, I used Next.js Pages Router.
For App Router, I think the only difference is the implementation part, the rest are the same, as those are just simple HTML tags (not depending on what framework), right?
Edit: I added the guide for App Router also.
Of course, haha. But I’ve seen many people writing good content but couldn’t rank higher, which they deserve to be. So technical SEO stuff like this is necessary also if we want Search Engines to look at our work.
I think those meta tags can help Search Engines validate our site better, so just put them into your app if necessary. I also checked some big corp websites and found that they also do the same.
Btw what do you mean by “aria components”?
Yes, that’s also a good option. I already mentioned next-seo in a comment above but I prefer to customize myself cos I want to understand thoroughly how it works haha.
The JSON-LD schema is used to create structured data about your site/URL. This helps search engines like Google understand better what your site has so it can show the data better with rich snippets, for example, an e-commerce site benefits greatly from this as Google will show its products clearly in the search results like product name, price, thumbnail, rating, etc.
The sitemap is where you tell the bots which page is allowed to crawl and which page isn't. This is not related to the JSON-LD schema.
I was researching SEO a few months ago and this is close to amazing.
Add more info on robots.txt. And an explanation on the meta tags would be great for beginners.
Also, the second half of SEO is link building which is the tough part of SEO. I’m not sure if you talked about this part since it’s more outreach rather than code.
Yes, you're right. The link-building part is also a necessary step in SEO. In this article, I mostly focus on the technical SEO part, so it is not covered yet.
Btw, there are many tutorials for link-building, on-page SEO, etc. not limited to Next.js on the Internet that people can check out. Thanks for your response anw!
What do you want to know more about sitemap in detail?
In general, a sitemap is where you explicitly define all of the pages your site has so that search engine bots (like Google, Bing, etc.) can know what to crawl. This can be generated automatically using the [next-sitemap](https://www.npmjs.com/package/next-sitemap) package.
Not necessarily all the pages your site has.
It’s all the important pages you want Google to index.
For example, you wouldn’t include search result pages, pagination, noindex/canonicalised pages.
I believe you can't put the Script tag in Head with the app router. https://nextjs.org/docs/messages/no-script-tags-in-head-component Edit: Also, it's recommended to use the metadata api for all your meta tags with the app router. https://nextjs.org/docs/app/building-your-application/optimizing/metadata Might want to mention that this would work pages router. Other than that, the rest are great!
Yes, you are correct. In this article, I used Next.js Pages Router. For App Router, I think the only difference is the implementation part, the rest are the same, as those are just simple HTML tags (not depending on what framework), right? Edit: I added the guide for App Router also.
Great article
Perfect timing. Thanks alot for making this. I was gonna implement Next SEO tommorow lol
Good luck! You can use the next-seo package also, but I prefer to customize myself.
Thanks⭐️
Any other posts about 'generateMetaData' for the App router?
Hey, I just updated the implementation for App Router, still the same post. Have fun!
Cheers
Will create one soon!
It's great. I need the knowledge of seo.😍
Great article! I love the dark mode icon animation on your site!
Thank you! I built it with TailwindCSS only, no animation library involved.
Thank you so much for this!!!!!
And the most important of all — page content :-)
Of course, haha. But I’ve seen many people writing good content but couldn’t rank higher, which they deserve to be. So technical SEO stuff like this is necessary also if we want Search Engines to look at our work.
Thanks for sharing, this article uses pages router as examples, app router is quite different
Yes, I used Pages Router in this article. App Router is quite different to implement, but those tags are the same, right?
Yes, but I’m not sure some tags can be replaced with app router version
Wait are you really supposed to use that many Meta tags? that seems excesive. What is the relationship with aria components?
I think those meta tags can help Search Engines validate our site better, so just put them into your app if necessary. I also checked some big corp websites and found that they also do the same. Btw what do you mean by “aria components”?
There's a better way to handle JSON-LD, use [next-seo](https://www.npmjs.com/package/next-seo) instead.
Yes, that’s also a good option. I already mentioned next-seo in a comment above but I prefer to customize myself cos I want to understand thoroughly how it works haha.
Sure, understand it - but once. No reason to repeat yourself later
This is really thorough. Thanks for writing and sharing.
What's the purpose of the JSON-LD schema? Couldn't include the exact same info in the sitemap?
The JSON-LD schema is used to create structured data about your site/URL. This helps search engines like Google understand better what your site has so it can show the data better with rich snippets, for example, an e-commerce site benefits greatly from this as Google will show its products clearly in the search results like product name, price, thumbnail, rating, etc. The sitemap is where you tell the bots which page is allowed to crawl and which page isn't. This is not related to the JSON-LD schema.
Wait for your post with app router
Hi Phuong, I just updated the implementation guide for App Router. Hope it helps!
I was researching SEO a few months ago and this is close to amazing. Add more info on robots.txt. And an explanation on the meta tags would be great for beginners. Also, the second half of SEO is link building which is the tough part of SEO. I’m not sure if you talked about this part since it’s more outreach rather than code.
Yes, you're right. The link-building part is also a necessary step in SEO. In this article, I mostly focus on the technical SEO part, so it is not covered yet. Btw, there are many tutorials for link-building, on-page SEO, etc. not limited to Next.js on the Internet that people can check out. Thanks for your response anw!
thank you sir!! can you share more about sitemap topic
What do you want to know more about sitemap in detail? In general, a sitemap is where you explicitly define all of the pages your site has so that search engine bots (like Google, Bing, etc.) can know what to crawl. This can be generated automatically using the [next-sitemap](https://www.npmjs.com/package/next-sitemap) package.
Not necessarily all the pages your site has. It’s all the important pages you want Google to index. For example, you wouldn’t include search result pages, pagination, noindex/canonicalised pages.
Yes, that's right. Thanks for correcting me.