garmeeh/next-seo

Next SEO is a plug in that makes managing your SEO easier in Next.js projects.

next-seo's Issues

Add SameAs and openingHoursSpecification to LocalBusiness

Do we need open graph prefix in header?

Do you have any insight on if prefix="og: http://ogp.me/ns#" is required in the markup to specify a page using open graph? It shows this on http://ogp.me/ (it includes it in the tag but from some research it has the same effect as assuming all of the meta data is within the head).

I struggle to find a clear answer, I am basically referring to this question: https://stackoverflow.com/questions/48933419/opengraph-prefix-in-header-necessary and if next-seo needs to include this prefix, also depending on the type specified it would include article: http://ogp.me/ns/article# , or profile, book, etc.

I couldn't really find a clear answer if it's required or just suggested, and i looked through several news websites for example that do seem to include this prefix markup. If you have any insight I'd be interested to know, or if you think this should be implemented, appreciate it.

Import both _defaultSEO2 and _blog2

Hi There,

We are using the standard js style and I can't seem to make it happy when importing both the default _defaultSEO2 and _blog2 in the same page without linter errors.

For example:
import { default as NextSeo, BlogJsonLd } from 'next-seo'
gives this lint error:
Use default import syntax to import 'NextSeo'.

Also trying:

import { default as NextSeo } from 'next-seo'
import { BlogJsonLd } from 'next-seo'

or

import NextSeo from 'next-seo'
import { BlogJsonLd } from 'next-seo'

both give
'next-seo' imported multiple times.

Do you know if there is a better way I could import these and still keep the linter free of errors?

Thank You!

Render a default canonical tag

It would be convenient to have the canonical tag be rendered with the current page url by default if none is passed into the config. This would save having to manually specify it for every page, (which is essentially duplicating the pages/ structure). I can create a PR if this would be an acceptable idea

Variable scoping causing issues between renders

For example, in our case page A has a titleTemplate defined and page B doesn’t. If page B would be rendered after page A, the page title would still follow the template because it was served from memory. The root cause is the defaults object inside buildTags.jsx defined in global scope.

I created a PR to address this issue #64

The wrong behaviour is also visible in your own snapshots, where the title of "Article SEO" would contain the template defined in an earlier test when it shouldn’t, see fee129e. Let me know if this is enough for a reproduction, otherwise I can also create a sandbox or so ✌️

Full Twitter options

Does next-seo have the ability to set the twitter description and image inside the Twitter object? I can't see anything documented in the readme.

Thanks

code-splitting

With the latest Next.js canary with webpack 4, it should be possible to publish .mjs files where import and export are not transpiled. This will allow webpack to code-split next-seo.

extra attributes

I came across this component that seems to attempt similar concept:
https://github.com/cereallarceny/cra-ssr/blob/master/src/app/components/page/index.js

Just posting it here for your consideration about some things that next-seo may not support but could be common needs.

incorrect peer dependency

After upgrading to V8 I have this one pestering me about.

One suggestion might be to have a renovate integration, I have no allegiance but I happen to know it would solve this particular problem based on the PR seen on next-nprogress

Module not found: Can't resolve 'react

Hi!

I got this error Module not found: Can't resolve 'react when trying to use the library as follows:

import * as React from 'react'
import NextSeo from 'next-seo'

export default () => (
  <NextSeo
    config={{
      title: 'Simple Usage Example',
      description: 'A short description goes here.',
    }}
  />
)

Do I miss something :)?

Defaults not being overridden on initial page rendering

Hi,

I'm using your library in my project and it seems that the default values I have set up only get overridden when I navigate from one page to another; when a certain page is the first page I visit, it uses the default values and ignores its own config object.

Here's my page (this is the actual page code—I've stripped it down to just Next Seo for testing purposes):

import NextSeo from 'next-seo'

export default class Post extends React.Component {
	render() {
		return(
			<div>
				<p>Booh!</p>
			        <NextSeo config={{
					description: "This is my description",
					title: "This is my title"
			        }} />
			</div>
		)
	}		
}

If it's the first page I visit, I don't get "This is my title" and "This is my description" in the meta tags (I get default values instead); if for example I visit the home page first and then navigate to this page, then I do see "This is my title" and "This is my description" in the meta tags.

Here is my config file where I set up the default values:

export const pageSEO = ( page, noindex ) => {
	return {
		title: stripHTML( page.title ),
		description: stripHTML( page.description ), 
		noindex: noindex, 
		openGraph: {		
			description: stripHTML( page.description ), 
			title: stripHTML( page.title ),
			images: [
				{
					url: page.image
				}
			]		
		}
	}
}

Then I add the defaults to all pages in _app.js

import NextSeo from 'next-seo'
import { pageSEO } from '../config/SEO'

render() {
        const { Component, pageProps, myPage } = this.props
        return(
            <Container>
                <Provider store={ this.appData }>
                    <AppInterface.Provider value={{ state: this.state, actions: this.actions }}>
                        <Component { ...pageProps } />
                        <NextSeo config={ pageSEO( myPage ) } />
                    </AppInterface.Provider>
                </Provider>
            </Container>                          
        )
}

OG:Video

Hello,

I am currently using your package and love it, however I noticed the og:video tag is left empty. Is it possible to allow duplicate image url (og:image) to og:video , as I have read that having it identical is fine. I can't figure out how to get a variable copied to og:video at the moment. (server rendering React).

Best regards,

trouble implementing seo correctly in next.js app using next-seo

hi guys...
I am using next-seo to implement seo in my next.js app. This app uses feather.js in the backend api ...

I have implemented a default seo config in _app.js file as per the instruction ... I need to override this in the users' dashboard with user info ... but this info comes from the feathers.js backend api .... so it's fetched asynchronously ...
I fetched the info in ComponentDidMount ...

What baffles me is that much as the overrides are reflected when I go to the users dashboard, when I view page source on the page in the dashboard, the override is not reflected ... the metatags and title in that html remain the same as they were in pages like the landing page which never overrode the seo...

Kindly advise what I should do to fix this. Thanks ....

Here is the gist with my code snippets .....
https://gist.github.com/jermsam/673380b2cf8451d88362c9c1c473e3a1

Thanks so much.

Move to Typescript

Currently in the process of moving to Typescript.

Title not changed using NextSeo in a nextjs page.

I'm currently implementing Next-SEO as follows.
in m _app.js I have the next defaults. this

import { DefaultSeo } from 'next-seo';
import SEO from '../next-seo.config';

class MyApp extends App {
        return (
            <SidebarContext.Provider value={this.state}>
                <DefaultSeo {...SEO} />
                <Provider store={store}>
                ...........
           </SidebarContext.Provider>
}

This next-seo.config contains title, open graph data and some other defaults.

Then on a specific page, I implemented NextSeo component overwriting the normal title and open graph title just as an example.
But when I just normally implement this it's not working.

const Partners = ({ posts = [] }) => (
    <Page theme="dark">
        <NextSeo
            title="My test title"
            description="A short description goes here."
            openGraph={{
                title: 'my title',
                description: 'my description',
            }}
        />
        <ContentPage>
            <div className="projecten">{posts ? posts.map(Item => <PartnerTile data={Item} />) : ''}</div>
        </ContentPage>
    </Page>
);

but when i add a dummy component from next/head my title gets nicely changed to "my test title" Why?

const Partners = ({ posts = [] }) => (
    <Page theme="dark">
        <NextSeo
            title="My test title"
            description="A short description goes here."
            openGraph={{
                title: 'my title',
                description: 'my description',
            }}
        />
       <Head>
          <title>aaaa</title>
       </Head>
        <ContentPage>
            <div className="projecten">{posts ? posts.map(Item => <PartnerTile data={Item} />) : ''}</div>
        </ContentPage>
    </Page>
);

implementation of JSON-LD social profiles

As the same you did with article, blog, course and product, the social profile (as the follow link), will be a good implementation

https://developers.google.com/search/docs/data-types/social-profile

noindex defaultConfig always indexes pages

Hi,

First, thank you for this nice lib :)
I've been having trouble understanding the default config setup.
I used several default settings and of course the noindex properties.

I don't want to be indexed so I put : noindex: true

On pages I only overrides title AND/OR description

<NextSeo
      config={{
        title: 'My Title Page'
      }}
    />

But in the end the noindex seems to be used as false and therefore the website is indexed.
Any idea ?

Thanks

Can't implement NextSeo due to other library

I'm encountering this issue on my nextjs app Unhandled Rejection (Invariant Violation): React.Children.only expected to receive a single React element child. , looks like <IntlProvider> only accepts a single child component. If that's the case where can I put the <NextSeo /> component.

Here's the content of my _app.js

Added LocalBusinessJsonLd to render

Structured Data Review in Chrome Extension sees item but the Google Structured Data Testing Tool does not see it.

Sees it: https://chrome.google.com/webstore/detail/structured-data-testing-t/kfdjeigpgagildmolfanniafmplnplpl

Doesn't see it.

https://search.google.com/structured-data/testing-tool#

Not sure if Google supports it. I also tried rendering straight in the Head Component as a script before using next-seo.

Dynamic og:url

It would be convenient to have a function that defines og:url as the current page

Meta Conflict using withAmp in Next 8.1

Found conflicting amp tag "meta" with conflicting prop name="viewport"

This happens during validation when using the new withAmp HOC in conjunction with NextSeo

Expected Behavior: No warning message during AMP validation

NextSeo is not overriden in each component when I use DefaultSeo.

Issue with overriding Defaultseo in next application. I have implemented DefaultSeo in _app.js and trying to override the DefaultSeo using NextSeo in the other components as mentioned by the documentation of Next js. But the meta tags are not getting overriden as mentioned in the docs when I view the page source and instead the changes are reflecting only in the elements when I inspect the site. I have shared the code. Can anyone please help me out with this issue?

View the code here

Work as a plugin

As it stands, it's a standalone component that you have to inject and manage the config object for. Would be nice if it worked as a plugin that injected itself and config could simply be dropped into next.config.js.

This would also allow people using next-compose-plugins for example to more easily change the configuration dynamically.

opengraph attributes inherit from main attributes

I feel like opengraph title/description/url attributes should default to the regular title/description/canonical if not set. Having to pass the same things in twice seems redundant for the avg use case....I suspect most people generally want title/description/url/canonical to be the same in both places. It would be more convenient if og attributes were more like overrides.

I am unable to use next-seo with typescript

Unable to use next-seo with typescript. Please help me

paths with query get escaped

Hi, i use a generated image containing query parameters as og image, but the path in the final output include escaped & making the path invalid:

path:

https://images.ctfassets.net/gz0sygvqczyz/1LlU2yNbXooedOqW3UeNA1/b1d427094354ac34cf9dc4f8a319957a/fieldset.png?fit=pad&f=top&w=1200&h=630&bg=rgb:F3F6F9

output:

https://images.ctfassets.net/gz0sygvqczyz/1LlU2yNbXooedOqW3UeNA1/b1d427094354ac34cf9dc4f8a319957a/fieldset.png?fit=pad&f=top&w=1200&h=630&bg=rgb:F3F6F9

The original path is working, while the second one nope, causing a wrong parsing by crawlers.

How to do noindex/follow? index/nofollow?

It seems there is no config for "follow", and just setting noindex to true sets the meta robots to 'noindex, nofollow'. On certain pages I want to set 'noindex,follow'. How can I achieve this?

Conversely, what about 'index,nofollow'.

These are rare in use, but I think still important to have the ability to do so.

Passing custom meta tags

Great package! I'm testing it as a Nextjs plugin and it works really good!

Just wondering if it is possible to pass into the next-seo.config.js file some "custom" meta tag like author, keywords, ... (some of https://gist.github.com/lancejpollard/1978404) to handle all the head tags in one place?
Like export default { title: "My website", description: "Describing my website", canonical: "https://www.canonical.ie/b", keywords: "keywords stuffing", author: "A cool guy", openGraph: {...

Or is it out of the scope of next-seo package?

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

My project has products so I have a subfolder in pages for example:

/pages/produkte/myproduct.js

I am using an HOC - Produkte.js. This is the root component of every product and I am passing values via props to render it.

• Trying to set <NextSeo/> to myproduct.js changes will not apply and the title is left default.

• Trying to set <NextSeo/> in Produkte.jsand passing props from myproduct.js will throw an error.

Invariant Violation: Element type is invalid: 
expected a string (for built-in components) or a class/function 
(for composite components) but got: undefined. 
You likely forgot to export your component from the file it's defined in, 
or you might have mixed up default and named imports.

myproduct.js

  render() {
    return (
      <Produkt
        images={ImgArray}
        headline={"TestProduct TestProduct"}
        subHeadline={"TestProduct TestProduct | TestProduct"}
        bulletPoints={BulletPoints}
        reviews={Reviews}
        price={"11,90"}
        sales={"4623"}
      >
        <NextSeo config={SeoConfig} />
        <ProductJsonLd
          productName="TestProduct"
          description={"TestProduct - TestProduct | TestProduct"}
          brand="TestProduct"
          aggregateRating={{
            ratingValue: "4.7",
            reviewCount: "215"
          }}
        />
      </Produkt>
    );
  }

EDIT:
Removed <ProductJsonLd/> and can verify that the error is coming from <NextSeo/>

issue with localBusiness JSON-LD

next-seo/src/jsonld/localBusiness.jsx

Line 8 in 1c9ed66

images.length ? `"image": [${images.map(image => `"${image}"`)}],` : '';

While in the process of converting localBusiness to typescript, I realized that this check is not efficient because both string and array have a length property. If someone passes a string it will throw an error, even though string value is considered a valid value as well.

Maybe check if it's a string or an array

Array.isArray(images) ? `"image": [${images.map(image => `"${image}"`)}],` : images;

next-seo & serverless

I'm using next seo with target: serverless
On dev, I can see this working correctly, but on serverless, I've got nothing related to seo (title, description, ect).

I have no demo repo, but you can check : https://github.com/CuistotduCoin/front

Thanks.

mobileAlternate & languageAlternate doesn't work with <NextSeo>

For ver 2.1.0, the following code snippet doesn't work:
<NextSeo mobileAlternate={{ media: "only screen and (max-width: 640px)", href: "https://m.canonical.ie" }} />

But it works with <DefaultSeo>:
<DefaultSeo mobileAlternate={{ media: "only screen and (max-width: 640px)", href: "https://m.canonical.ie" }} />

The same thing happens with languageAlternate.
Please help check, thanks.

Using nextSeo to manage opengraph I receive a warning from Facebook in Debugger

Using this configuration

 <NextSeo
          config={{
            title: 'my title',
            description: 'A short description goes here.',
            openGraph: {
              url: 'my url',
              title: 'my og title',
              description: 'my og description',
              images: [
                {
                  url: 'https://cdn.hasselblad.com/c81e7ee74fdc106a965f51b35c8dd87503a16f0e_tom-oldham-h6d-50c-sample1.jpg',
                  alt: 'Og Image Alt',
                }
              ],
              site_name: 'my site name',
            }
          }}
        />

I receive these warning

Extraneous Property | Objects of this type do not allow properties named 'og:title'.
Extraneous Property | Objects of this type do not allow properties named 'og:description'.
Extraneous Property | Objects of this type do not allow properties named 'og:image'.
Extraneous Property | Objects of this type do not allow properties named 'og:image:alt'.
Extraneous Property | Objects of this type do not allow properties named 'og:site_name'.

[Question] TreeShaking the modules, exclude Jsonld package.

I am analysing the bundle size of my project. I realised the jsonld is around 17.3 KB parsed while i am using it at all.

Is it possible to import only the NextSeo component?

I tried import NextSeo from "next-seo/meta/defaultSEO.jsx"; and import NextSeo from "next-seo/meta/defaultSEO";, but it doesn't work.

Add metatag author

Could you please add metatag author
https://www.metatags.org/meta_name_author

How to deal with HTML entities in page titles?

My page titles are coming from Wordpress and some contain HTML entities (like –).

How can I convert this inside NextSEO config? Normally I would use dangerouslySetInnerHtml, but I don't think that syntax would work inside the config.

Issue with productjsonld

Not sure if something is wrong with the example or the way I am configuring it. When I put in

<ProductJsonLd productName="Executive Anvil" images={[ 'https://example.com/photos/1x1/photo.jpg', 'https://example.com/photos/4x3/photo.jpg', 'https://example.com/photos/16x9/photo.jpg', ]} description="Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height." brand="ACME" reviews={[ { author: 'Jim', datePublished: '2017-01-06T03:37:40Z', reviewBody: 'This is my favorite product yet! Thanks Nate for the example products and reviews.', name: 'So awesome!!!', reviewRating: { bestRating: '5', ratingValue: '5', worstRating: '1', }, }, ]} aggregateRating={{ ratingValue: '4.4', reviewCount: '89', }} offers={{ price: '119.99', priceCurrency: 'USD', priceValidUntil: '2020-11-05', itemCondition: 'http://schema.org/UsedCondition', availability: 'http://schema.org/InStock', seller: { name: 'Executive Objects', }, }} mpn="925872" />
It does not work and I get an error "Error: [next-seo] You must supply an SEO configuration".
However when I insert config it works. example:
<ProductJsonLd **config={{ title: 'About us', description: 'Updated description as well' }}** productName="Executive Anvil" images={[ 'https://example.com/photos/1x1/photo.jpg', 'https://example.com/photos/4x3/photo.jpg', 'https://example.com/photos/16x9/photo.jpg', ]} description="Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height." brand="ACME" reviews={[ { author: 'Jim', datePublished: '2017-01-06T03:37:40Z', reviewBody: 'This is my favorite product yet! Thanks Nate for the example products and reviews.', name: 'So awesome!!!', reviewRating: { bestRating: '5', ratingValue: '5', worstRating: '1', }, }, ]} aggregateRating={{ ratingValue: '4.4', reviewCount: '89', }} offers={{ price: '119.99', priceCurrency: 'USD', priceValidUntil: '2020-11-05', itemCondition: 'http://schema.org/UsedCondition', availability: 'http://schema.org/InStock', seller: { name: 'Executive Objects', }, }} mpn="925872" />

What is going on here, am I configuring it wrong or was the given example incorrect? The next.js configuration object is located in my _app.js file and it works as intended.

Twitter not picking up OG tags

Super grateful for the package @garmeeh!

I see you mention in a few issues (#14) that Twitter uses the OG tags but it's not.

Would be good if next-seo allowed setting of any OG tag provided so we can provide tags as necessary.

mutiple data in ProductJsonLd

how can loop the productjsonld if i have mutiple products in same page. map function is overriding.if i do loop.

i want display like this.
[ { "@context":"https://schema.org/", "image":[ "https://lssdsdsdsds" ], "@type":"Product", "name":"Product name" }, { "@context":"https://schema.org/", "image":[ "https://lssdsdsdsds" ], "@type":"Product", "name":"Product name 2" }, { "@context":"https://schema.org/", "image":[ "https://lssdsdsdsds" ], "@type":"Product", "name":"Product name 3" }, ]

Sitemap still matters

Hi, please consider supporting sitemap.xml and robots.txt in your lovely package. It's neccessary for SEO.

Meta keywords - how do I add them?

The docs seem silent on that...

Adding table of contents

The documentation is growing bigger by the day, do you think having a table of contents at the top of the documentation going to make it easy to navigate? If so I can submit a PR.

Add extra json-ld fields outside of google's structured data spec

From schema.org there are a lot more properties supported in the json-ld spec, however most are ignored by Google when constructing structured search snippets.

I guess the intention of the library is specifically for SEO but it would be nice to add custom fields into the json-ld components for other use cases. In particular I have a case where I need to add json-ld for analytics with parse.ly https://www.parse.ly/help/integration/jsonld/ and some of their required fields are not included

Missing twitter tags

Please add missing twitter tags to improve SEO score.

Thanks for next-seo is amazing and simple to use.

fb:app_id - Tag specified as 'name' instead of 'property'

According to Facebook debug tool

we should use
<meta property="fb:app_id" content="xxx" class="next-head">
instead of
<meta name="fb:app_id" content="xxx" class="next-head">

ProductJsonLd is not working

ProductJsonLd is not working I get this error: 'Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of ProductDetails.'

I tried ArticleJsonLd and it does work.

Include title Template

Feature Request

Include title template which can be appended before or after every title if defined.
example config

{
  title: "This is a test title.",
  titleTemplate: "Next SEO | %s"
}

and the output will be

<title>Next SEO | This is a test title.</title>

%s will be replaced by the title, so depending on the position, that's where the title will be appended.

Some Head Elements from Document Get Rendered Twice

pages/_app.js:

class MyApp extends App {
    /* ... */

    render() {
        return (
            <Container>
                <DefaultSeo config={seoConfig} />
                /* ... */
            </Container>
        );
    }
}

pages/_document.js:

class MyDocument extends Document {
    render() {
        return (
            <html lang="de">
                <Head>
                    <meta charSet="utf-8" />
                    <meta
                        name="viewport"
                        content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
                    />
                    <meta name="theme-color" content={theme.palette.primary.main} />
                    <link
                        rel="stylesheet"
                        href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
                    />
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </html>
        );
    }
}

Results in the following HTML document structure:

Is there a way to fix this?

Breadcrumb JSON-LD missing 'id' field

Google Search Console is reporting that the breadcrumb data is missing the 'id' field. Apparently the schema has changed a bit.

Instead of:

        {
          position: 1,
          name: 'Books',
          item: 'https://example.com/books',
        },
        {
          position: 2,
          name: 'Authors',
          item: 'https://example.com/books/authors',
        }, ...

It should now be:

        {
          position: 1,
          item:
                  {
                   '@id': 'https://example.com/books',
                    name: "Books"
                   }
        },
        {
          position: 2,
          item:
                  {
                   '@id': 'https://example.com/authors',
                    name: "Authors"
                   }
        }, ...

Documentation:
https://schema.org/item
https://jsonld.com/breadcrumb/

Thanks for the great package!

Additional Properties for SocialProfile

Although not well documented the markup for social profile is normally used with other related properties like description, telephone, address and logo (org only) show in the valid JsonLd below;

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Organization",
  "name": "your name",
  "description": "Some description", 
  "telephone": "[phone]",
  "url": "http://www.your-site.com",
  "sameAs": [
    "http://www.facebook.com/your-profile",
    "http://instagram.com/yourProfile",
    "http://www.linkedin.com/in/yourprofile",
    "http://plus.google.com/your_profile"
  ],
    "address" :{
    "@type": "PostalAddress",
    "streetAddress": "123 William St",
    "addressLocality": "New York",
    "addressRegion": "NY",
    "postalCode": "10038",
    "addressCountry": "US"
  },
  "logo": "http://www.example.com/images/logo.png"
}
</script>

I'm happy to add support for these additional properties to social profile or I could as new structured data types as Logo and Local Business which is how the google documentation refers to them, although technically they're supported in the same block as social information.

@garmeeh I'm planning to do this work as I need it either locally or as a PR if you can provide some guidance on how you'd prefer this done.

If any of this isn't clear please let me know.