Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Next JS producing invalid canonical meta tags in Next JS (according to Lighthouse)

See original GitHub issue

Bug report

Describe the bug

Using AMP in next seems to be producing invalid canonical meta tags (at least, according to Google Lighthouse).

I’ve been working on an AMP app using Next JS, and have been improving performance and SEO with Google Lighthouse. Tonight I noticed a new alert (or maybe it was an old alert and I just now noticed it) at this URL: https://anything-grown-beta.nelsonwebdev.com/market/hibbing-farmers-market

If you go to that URL and run an audit, you’ll see I get dinged for SEO:

I tried putting my own metatag on the page, with an absolute path (I don’t know exactly that that’s what Google wants but I just wanted to see, and based it off this doc: https://developers.google.com/web/tools/lighthouse/audits/canonical).

However, as you can probably guess, when I tried to put my own metatag on the page, Next JS got grumpy, albeit it did point me to this doc:

https://github.com/zeit/next.js/blob/master/errors/conflicting-amp-tag.md

What’s the solution here? I really want to use AMP in Next JS (because it’s awesome), but SEO is obviously a very high concern of mine.

Oh – I’m on the latest canary, too. 8.1.1-canary.24

Issue Analytics

State:
Created 4 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

ijjkcommented, May 6, 2019

For others, this issue is only related to AMP mode and when not using AMP we don’t add a canonical link

1reaction

ijjkcommented, May 6, 2019

It looks like Google no longer accepts relative canonical links as this does appear to be the reason in lighthouse as seen here, good catch! I submitted a PR here that will allow configuring the canonical to have an absolute URL.

Top Results From Across the Web

Next JS producing invalid canonical meta tags in ... - GitHub

Bug report Describe the bug Using AMP in next seems to be producing invalid canonical meta tags (at least, according to Google Lighthouse)....

next/head - Next.js

meta tags with duplicate key attributes are automatically handled. The contents of head get cleared upon unmounting the component, so make sure each...

Facebook debugger does not pick up Next js next-seo meta tags

It puzzles me that Next.js isn't rendering them. According to the docs: By default, Next.js pre-renders every page. This means that Next ...

5 common mistakes with rel=canonical - Google Developers

Verify the rel=canonical target doesn't contain a noindex robots meta tag. Make sure you'd prefer the rel=canonical URL to be displayed in search...

SEO Issues On Next.js Websites (50 Site Study) - SALT.agency®

Core web vitals; Status code returns (e.g. 404s); Use of canonical tags. As these are all covered in the Next.js SEO reading/learning ...