Next.js: 'next-head' class being added to all the items in the the <HEAD>

Created on 23 Dec 2017 · 18Comments · Source: vercel/next.js

I am using HEAD to populate the tags in the HTML document. Every tag though is being populated with a class added to it 'next-head'. Google SEO isn't liking it. How can i remove it?

screen shot 2017-12-23 at 9 31 59 pm

feature request

Source

krokhale

👍4

Most helpful comment

This is really a problem. It is very possible to remove the class.

iglv on 13 Dec 2018

👍5

All 18 comments

it's added by next internally and I don't think there is any SEO impact with the class.

liweinan0423 on 24 Dec 2017

Right i understand it's being added internally, even if i were to have a custom renderer i get those class names. Google seems to be fetching the tags along with the class names and mixing them both up.

This is what google is fetching(Notice that it is appending the class name to the title):

Enjoy pizza delivered to you in NYC. Order Now!! class=next-head

Is there a way to disable those classes?

krokhale on 24 Dec 2017

They are added to every element inside Head and I'm afraid there is no way of disabling this behaviour.
https://github.com/zeit/next.js/blob/29c4035eb5ef093e415e3723e0f3e9b883864953/lib/head.js#L29-L32

I don't think Google should include class name in title. It doesn't happen on ZEIT website or on LearnNextJS.com.

Can you show code you are using to populate head?

Sekhmet on 26 Dec 2017

Talked to rauchg about this and we could try using refs to no longer need next-head.

timneutkens on 16 Mar 2018

I installed ramen.is which has a snippet that you need to install before you can continue to the dashboard. It checks for the snippet exactly, and the next-head class throws it off. It would be nice if this was found to not be needed and could be removed.

benatkin on 17 Mar 2018

Can I remove the class attribute here? Our SEO team doesn't like it and wants it removed.

jcollum-nike on 14 Jun 2018

This is needed for us to rehydrate the head correctly on the client when navigating with next/link. Using refs wouldn't work as it is server rendered too.

The problem is that we can't clear the whole <head> as it will also contain anything provided from _document.

timneutkens on 14 Jun 2018

I guess I have to tell the SEO team "no" then? I legit have no idea whether this affects SEO.

jcollum-nike on 15 Jun 2018

We are also seeing strange SEO results (broken strings in google results) after re-launching with NextJS, and these weird tags in head seem suspicious.

Generally, it like a pretty awkward tactic to add class attributes to meta tags and title tags. It’s not specified that that’s OK to do (https://www.w3.org/TR/html52/document-metadata.html#the-title-element and https://www.w3.org/TR/html52/document-metadata.html#the-meta-element)

The end result is a big buzzkill because this is the kind of thing it’s hard to find out until you actually launch and watch your critical numbers drop in production, as Google reacts over time.

So — another vote from us — please consider trying to find another way to deal with this—

manzoid on 6 Nov 2018

launch and watch your critical numbers drop in production, as Google reacts over time

Same here

Please fix this or notice in the README

ifokeev on 12 Nov 2018

also I noticed a wrong Google index result because of nextjs changing title with a delay after the transition.
Do anybody know how to fix this? Temporary workaround is to change window.location.href instead of router push

ifokeev on 13 Nov 2018

This is really a problem. It is very possible to remove the class.

iglv on 13 Dec 2018

👍5

Is there any way to remove class="next-head" from head tags? Thanks for the answer in advance.

prothomsoft on 8 Feb 2019

This is needed for us to rehydrate the head correctly on the client when navigating with next/link. Using refs wouldn't work as it is server rendered too.

The problem is that we can't clear the whole <head> as it will also contain anything provided from _document.

@timneutkens just for clarification, if the class name is removed/modified from a link tag does it effect how next.js rehydrates?

A consultant did an SEO audit of our pages and noted that how our link tag renders can actually effect how Google reads the page.

This is how our link tag currently reads.
<link href="https://randomsite.org" rel="canonical" class="jsx-2891656962 next-head"/>

This is how the consultant recommended how our link tag should be written.
<link class="jsx-2891656962 next-head" rel=”canonical” href=”https://randomsite.org/” />

Now, I can manipulate the class name position in the link tag by adding a custom class as shown below, however, by doing so the auto-populated 'next-head' class does not show. Would this cause an issue in the rehydration process?

<link class="random-class" rel=”canonical” href=”https://randomsite.org/” />