next-seo

v6.6.0

SEO plugin for Next.js projects

next.js seo react node ssr

Readme Versions Dependencies Scripts

Have you seen the new Next.js newsletter?

Useful Tools

dub recently launched a useful Free UTM builder! You can use it here

Next SEO

npm

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

Pull requests are very welcome. Also make sure to check out the issues for feature requests if you are looking for inspiration on what to add.

Feel like supporting this free plugin?

It takes a lot of time to maintain an open source project so any small contribution is greatly appreciated.

Coffee fuels coding ☕️

next-seo.wallet (ERC20 & SOL)

Note on app directory

This note is only relevant if using the app directory.

For standard meta data (e.g., , ) then it is highly recommended that you use the built-in <code>generateMetaData</code> method. You can check out the docs <a href="https://beta.nextjs.org/docs/guides/seo#usage">here</a> For JSON-LD then, the only change needed is to add <code>useAppDir={true}</code> to the JSON-LD component in use. You should add use this component in your <code>page.js</code> and NOT your <code>head.js</code>. <pre><code><ArticleJsonLd useAppDir={true} url="https://example.com/article" title="Article headline" <- required for app directory /> </code></pre>If you are using <code>pages</code> directory then <code>NextSeo</code> is exactly what you need for your SEO needs! <h3>Table of Contents</h3>   <ul> <li><a href="#usage">Usage</a><ul> <li><a href="#setup">Setup</a></li> <li><a href="#add-seo-to-page">Add SEO to Page</a></li> <li><a href="#default-seo-configuration">Default SEO Configuration</a></li> <li><a href="#nextseo-options">NextSeo Options</a><ul> <li><a href="#title-template">Title Template</a></li> <li><a href="#default-title">Default Title</a></li> <li><a href="#no-index">No Index</a></li> <li><a href="#dangerouslysetallpagestonoindex">dangerouslySetAllPagesToNoIndex</a></li> <li><a href="#no-follow">No Follow</a></li> <li><a href="#dangerouslysetallpagestonofollow">dangerouslySetAllPagesToNoFollow</a></li> <li><a href="#robotsprops">robotsProps</a></li> <li><a href="#twitter">Twitter</a></li> <li><a href="#facebook">Facebook</a></li> <li><a href="#canonical-url">Canonical URL</a></li> <li><a href="#alternate">Alternate</a></li> <li><a href="#additional-meta-tags">Additional Meta Tags</a></li> <li><a href="#additional-link-tags">Additional Link Tags</a></li> </ul> </li> </ul> </li> <li><a href="#open-graph">Open Graph</a><ul> <li><a href="#open-graph-examples">Open Graph Examples</a><ul> <li><a href="#basic">Basic</a></li> <li><a href="#video">Video</a></li> <li><a href="#audio">Audio</a></li> <li><a href="#article">Article</a></li> <li><a href="#book">Book</a></li> <li><a href="#profile">Profile</a></li> </ul> </li> </ul> </li> <li><a href="#json-ld">JSON-LD</a><ul> <li><a href="#json-ld-security">JSON-LD Security</a></li> <li><a href="#handling-multiple-instances">Handling multiple instances</a></li> <li><a href="#article-1">Article</a></li> <li><a href="#breadcrumb">Breadcrumb</a></li> <li><a href="#blog">Blog</a></li> <li><a href="#campground">Campground</a></li> <li><a href="#recipe">Recipe</a></li> <li><a href="#sitelinks-search-box">Sitelinks Search Box</a></li> <li><a href="#course">Course</a></li> <li><a href="#dataset">Dataset</a></li> <li><a href="#corporate-contact">Corporate Contact</a></li> <li><a href="#faq-page">FAQ Page</a></li> <li><a href="#how-to">How-to</a></li> <li><a href="#job-posting">Job Posting</a></li> <li><a href="#local-business">Local Business</a></li> <li><a href="#logo">Logo</a></li> <li><a href="#product">Product</a></li> <li><a href="#social-profile">Social Profile</a></li> <li><a href="#news-article">News Article</a></li> <li><a href="#park">Park</a></li> <li><a href="#video-1">Video</a></li> <li><a href="#videogame">VideoGame</a></li> <li><a href="#event">Event</a></li> <li><a href="#qa">Q&A</a></li> <li><a href="#collection-page">Collection Page</a></li> <li><a href="#profile-page">Profile page</a></li> <li><a href="#carousel">Carousel</a><ul> <li><a href="#default-summary-list">Default (Summary List)</a></li> <li><a href="#course-1">Course</a></li> <li><a href="#movie">Movie</a></li> <li><a href="#recipe-1">Recipe</a></li> <li><a href="#custom">Custom</a></li> </ul> </li> <li><a href="#software-app">Software App</a></li> <li><a href="#organization">Organization</a></li> <li><a href="#brand">Brand</a></li> <li><a href="#webpage">WebPage</a></li> <li><a href="#image-metadata">Image Metadata</a></li> </ul> </li> <li><a href="#contributors">Contributors</a></li> </ul>  <h2>Usage</h2> <code>NextSeo</code> works by including it on pages where you would like SEO attributes to be added. Once included on the page, you pass it a configuration object with the page's SEO properties. This can be dynamically generated at a page level, or in some cases, your API may return an SEO object. <h3>Setup</h3> First, install it: <pre><code class="hljs language-bash">npm install next-seo </code></pre>or <pre><code class="hljs language-bash">yarn add next-seo </code></pre><h3>Add SEO to Page</h3> <hr> Using Next.js app directory introduced in Next.js 13? If you are using the Next.js app directory, then it is highly recommended that you use the built-in <code>generateMetaData</code> method. You can check out the docs <a href="https://beta.nextjs.org/docs/guides/seo#usage">here</a> If you are using the <code>pages</code> directory, then <code>NextSeo</code> is exactly what you need for your SEO needs! <hr> Then, you need to import <code>NextSeo</code> and add the desired properties. This will render out the tags in the <code><head></code> for SEO. At a bare minimum, you should add a title and description. Example with just title and description: <pre><code class="hljs language-jsx">import { NextSeo } from 'next-seo'; const Page = () => ( <> <NextSeo title="Simple Usage Example" description="A short description goes here." /> <p>Simple Usage</p> </> ); export default Page; </code></pre>But <code>NextSeo</code> gives you many more options that you can add. See below for a typical example of a page. Typical page example: <pre><code class="hljs language-jsx">import { NextSeo } from 'next-seo'; const Page = () => ( <> <NextSeo title="Using More of Config" description="This example uses more of the available config options." canonical="https://www.canonical.ie/" openGraph={{ url: 'https://www.url.ie/a', title: 'Open Graph Title', description: 'Open Graph Description', images: [ { url: 'https://www.example.ie/og-image-01.jpg', width: 800, height: 600, alt: 'Og Image Alt', type: 'image/jpeg', }, { url: 'https://www.example.ie/og-image-02.jpg', width: 900, height: 800, alt: 'Og Image Alt Second', type: 'image/jpeg', }, { url: 'https://www.example.ie/og-image-03.jpg' }, { url: 'https://www.example.ie/og-image-04.jpg' }, ], siteName: 'SiteName', }} twitter={{ handle: '@handle', site: '@site', cardType: 'summary_large_image', }} /> <p>SEO Added to Page</p> </> ); export default Page; </code></pre>A note on Twitter Tags Props <code>cardType</code>, <code>site</code>, <code>handle</code> are equivalent to <code>twitter:card</code>, <code>twitter:site</code>, <code>twitter:creator</code>. Documentation can be found <a href="https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary">here</a>. Twitter will read the <code>og:title</code>, <code>og:image</code> and <code>og:description</code> tags for their card. <code>next-seo</code> omits <code>twitter:title</code>, <code>twitter:image</code> and <code>twitter:description</code> to avoid duplication. Some tools may report this as an error. See <a href="https://github.com/garmeeh/next-seo/issues/14">Issue #14</a> <h3>Default SEO Configuration</h3> <code>NextSeo</code> enables you to set some default SEO properties that will appear on all pages without needing to include anything on them. You can also override these on a page-by-page basis if needed. To achieve this, you will need to create a custom <code><App></code>. In your pages directory, create a new file, <code>_app.js</code>. See the Next.js docs <a href="https://nextjs.org/docs/advanced-features/custom-app">here</a> for more info on a custom <code><App></code>. Within this file you will need to import <code>DefaultSeo</code> from <code>next-seo</code> and pass it props. Here is a typical example: <pre><code class="hljs language-jsx">import App, { Container } from 'next/app'; import { DefaultSeo } from 'next-seo'; // import your default seo configuration import SEO from '../next-seo.config'; export default class MyApp extends App { render() { const { Component, pageProps } = this.props; return ( <Container> <DefaultSeo openGraph={{ type: 'website', locale: 'en_IE', url: 'https://www.url.ie/', siteName: 'SiteName', }} twitter={{ handle: '@handle', site: '@site', cardType: 'summary_large_image', }} /> <Component {...pageProps} /> </Container> ); } } </code></pre>To work properly, <code>DefaultSeo</code> should be placed above (before) <code>Component</code> due to the behavior of Next.js internals. Alternatively, you can also create a config file to store default values such as <code>next-seo.config.js</code> <pre><code class="hljs language-js">export default { openGraph: { type: 'website', locale: 'en_IE', url: 'https://www.url.ie/', siteName: 'SiteName', }, twitter: { handle: '@handle', site: '@site', cardType: 'summary_large_image', }, }; </code></pre><details><summary>or like this, if you are using TypeScript</summary> <pre><code class="hljs language-ts">import { DefaultSeoProps } from 'next-seo'; const config: DefaultSeoProps = { openGraph: { type: 'website', locale: 'en_IE', url: 'https://www.url.ie/', siteName: 'SiteName', }, twitter: { handle: '@handle', site: '@site', cardType: 'summary_large_image', }, }; export default config; </code></pre> </details> import at the top of <code>_app.js</code> <pre><code class="hljs language-jsx">import SEO from '../next-seo.config'; </code></pre>and the <code>DefaultSeo</code> component can be used like this instead <pre><code class="hljs language-jsx"><DefaultSeo {...SEO} /> </code></pre>From now on, all of your pages will have the defaults above applied. Note that <code>Container</code> is deprecated in Next.js v9.0.4 so you should replace that component here with <code>React.Fragment</code> on this version and later - see <a href="https://github.com/zeit/next.js/blob/master/errors/app-container-deprecated.md">here</a> <h3>NextSeo Options</h3> <table> <thead> <tr> <th>Property</th> <th>Type</th> <th>Description</th> </tr> </thead> <tbody><tr> <td><code>titleTemplate</code></td> <td>string</td> <td>Allows you to set default title template that will be added to your title <a href="#title-template">More Info</a></td> </tr> <tr> <td><code>title</code></td> <td>string</td> <td>Set the meta title of the page</td> </tr> <tr> <td><code>defaultTitle</code></td> <td>string</td> <td>If no title is set on a page, this string will be used instead of an empty <code>titleTemplate</code> <a href="#default-title">More Info</a></td> </tr> <tr> <td><code>noindex</code></td> <td>boolean (default false)</td> <td>Sets whether page should be indexed or not <a href="#no-index">More Info</a></td> </tr> <tr> <td><code>nofollow</code></td> <td>boolean (default false)</td> <td>Sets whether page should be followed or not <a href="#no-follow">More Info</a></td> </tr> <tr> <td><code>robotsProps</code></td> <td>Object</td> <td>Set the more meta information for the <code>X-Robots-Tag</code> <a href="#robotsprops">More Info</a></td> </tr> <tr> <td><code>description</code></td> <td>string</td> <td>Set the page meta description</td> </tr> <tr> <td><code>canonical</code></td> <td>string</td> <td>Set the page canonical url</td> </tr> <tr> <td><code>mobileAlternate.media</code></td> <td>string</td> <td>Set what screen size the mobile website should be served from</td> </tr> <tr> <td><code>mobileAlternate.href</code></td> <td>string</td> <td>Set the mobile page alternate url</td> </tr> <tr> <td><code>languageAlternates</code></td> <td>array</td> <td>Set the language of the alternate urls. Expects array of objects with the shape: <code>{ hrefLang: string, href: string }</code></td> </tr> <tr> <td><code>themeColor</code></td> <td>string</td> <td>Indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface. Must contain a valid CSS color</td> </tr> <tr> <td><code>additionalMetaTags</code></td> <td>array</td> <td>Allows you to add a meta tag that is not documented here. <a href="#additional-meta-tags">More Info</a></td> </tr> <tr> <td><code>additionalLinkTags</code></td> <td>array</td> <td>Allows you to add a link tag that is not documented here. <a href="#additional-link-tags">More Info</a></td> </tr> <tr> <td><code>twitter.cardType</code></td> <td>string</td> <td>The card type, which will be one of <code>summary</code>, <code>summary_large_image</code>, <code>app</code>, or <code>player</code></td> </tr> <tr> <td><code>twitter.site</code></td> <td>string</td> <td>@username for the website used in the card footer</td> </tr> <tr> <td><code>twitter.handle</code></td> <td>string</td> <td>@username for the content creator / author (outputs as <code>twitter:creator</code>)</td> </tr> <tr> <td><code>facebook.appId</code></td> <td>string</td> <td>Used for Facebook Insights, you must add a facebook app ID to your page to for it <a href="#facebook">More Info</a></td> </tr> <tr> <td><code>openGraph.url</code></td> <td>string</td> <td>The canonical URL of your object that will be used as its permanent ID in the graph</td> </tr> <tr> <td><code>openGraph.type</code></td> <td>string</td> <td>The type of your object. Depending on the type you specify, other properties may also be required <a href="#open-graph">More Info</a></td> </tr> <tr> <td><code>openGraph.title</code></td> <td>string</td> <td>The open graph title, this can be different than your meta title.</td> </tr> <tr> <td><code>openGraph.description</code></td> <td>string</td> <td>The open graph description, this can be different than your meta description.</td> </tr> <tr> <td><code>openGraph.images</code></td> <td>array</td> <td>An array of images (object) to be used by social media platforms, slack etc as a preview. If multiple supplied you can choose one when sharing. <a href="#open-graph-examples">See Examples</a></td> </tr> <tr> <td><code>openGraph.videos</code></td> <td>array</td> <td>An array of videos (object)</td> </tr> <tr> <td><code>openGraph.locale</code></td> <td>string</td> <td>The locale the open graph tags are marked up in. Of the format language_TERRITORY. Default is en_US.</td> </tr> <tr> <td><code>openGraph.siteName</code></td> <td>string</td> <td>If your object is part of a larger web site, the name which should be displayed for the overall site.</td> </tr> <tr> <td><code>openGraph.profile.firstName</code></td> <td>string</td> <td>Person's first name.</td> </tr> <tr> <td><code>openGraph.profile.lastName</code></td> <td>string</td> <td>Person's last name.</td> </tr> <tr> <td><code>openGraph.profile.username</code></td> <td>string</td> <td>Person's username.</td> </tr> <tr> <td><code>openGraph.profile.gender</code></td> <td>string</td> <td>Person's gender.</td> </tr> <tr> <td><code>openGraph.book.authors</code></td> <td>string[]</td> <td>Writers of the article. <a href="#open-graph-examples">See Examples</a></td> </tr> <tr> <td><code>openGraph.book.isbn</code></td> <td>string</td> <td>The <a href="https://en.wikipedia.org/wiki/International_Standard_Book_Number">ISBN</a></td> </tr> <tr> <td><code>openGraph.book.releaseDate</code></td> <td>datetime</td> <td>The date the book was released.</td> </tr> <tr> <td><code>openGraph.book.tags</code></td> <td>string[]</td> <td>Tag words associated with this book.</td> </tr> <tr> <td><code>openGraph.article.publishedTime</code></td> <td>datetime</td> <td>When the article was first published. <a href="#open-graph-examples">See Examples</a></td> </tr> <tr> <td><code>openGraph.article.modifiedTime</code></td> <td>datetime</td> <td>When the article was last changed.</td> </tr> <tr> <td><code>openGraph.article.expirationTime</code></td> <td>datetime</td> <td>When the article is out of date after.</td> </tr> <tr> <td><code>openGraph.article.authors</code></td> <td>string[]</td> <td>Writers of the article.</td> </tr> <tr> <td><code>openGraph.article.section</code></td> <td>string</td> <td>A high-level section name. E.g. Technology</td> </tr> <tr> <td><code>openGraph.article.tags</code></td> <td>string[]</td> <td>Tag words associated with this article.</td> </tr> </tbody></table> <h4>Title Template</h4> Replaces <code>%s</code> with your title string <pre><code class="hljs language-js">title = 'This is my title'; titleTemplate = 'Next SEO | %s'; // outputs: Next SEO | This is my title </code></pre><pre><code class="hljs language-js">title = 'This is my title'; titleTemplate = '%s | Next SEO'; // outputs: This is my title | Next SEO </code></pre><h4>Default Title</h4> <pre><code class="hljs language-js">title = undefined; titleTemplate = 'Next SEO | %s'; defaultTitle = 'Next SEO'; // outputs: Next SEO </code></pre><h4>No Index</h4> Setting this to <code>true</code> will set <code>noindex,follow</code> (to set <code>nofollow</code>, please refer to <a href="#no-follow"><code>nofollow</code></a>). This works on a page by page basis. This property works in tandem with the <code>nofollow</code> property and together they populate the <code>robots</code> meta tag. Note: The <code>noindex</code> and the <a href="#no-follow"><code>nofollow</code></a> properties are a little different than all the others in the sense that setting them as a default does not work as expected. This is due to the fact Next SEO already has a default of <code>index,follow</code> because <code>next-seo</code> is a SEO plugin after all. So if you want to globally these properties, please see <a href="#dangerouslySetAllPagesToNoIndex">dangerouslySetAllPagesToNoIndex</a> and <a href="#dangerouslySetAllPagesToNoFollow">dangerouslySetAllPagesToNoFollow</a>. Example No Index on a single page: If you have a single page that you want no indexed you can achieve this by: <pre><code class="hljs language-jsx">import { NextSeo } from 'next-seo'; const Page = () => ( <> <NextSeo noindex={true} /> <p>This page is no indexed</p> </> ); export default Page; /* <meta name="robots" content="noindex,follow"> */ </code></pre><h4>dangerouslySetAllPagesToNoIndex</h4> It has the prefix <code>dangerously</code> because it will <code>noindex</code> all pages. As this is an SEO plugin, that is kinda dangerous action. It is not bad to use this. Just please be sure you want to <code>noindex</code> EVERY page. You can still override this at a page level if you have a use case to <code>index</code> a page. This can be done by setting <code>noindex: false</code>. The only way to unset this is by removing the prop from the <code>DefaultSeo</code> in your custom <code><App></code>. <h4>No Follow</h4> Setting this to <code>true</code> will set <code>index,nofollow</code> (to set <code>noindex</code>, please refer to <a href="#no-index"><code>noindex</code></a>). This works on a page-by-page basis. This property works in tandem with the <code>noindex</code> property, and together, they populate the <code>robots</code> meta tag. Note: Unlike for the other properties, setting <code>noindex</code> and <code>nofollow</code> by default does not work as expected. This is because Next SEO has a default of <code>index,follow</code>, since <code>next-seo</code> is an SEO plugin after all. If you want to globally allow these properties, see <a href="#dangerouslySetAllPagesToNoIndex">dangerouslySetAllPagesToNoIndex</a> and <a href="#dangerouslySetAllPagesToNoFollow">dangerouslySetAllPagesToNoFollow</a>. Example No Follow on a single page: If you have a single page that you want no indexed you can achieve this by: <pre><code class="hljs language-jsx">import { NextSeo } from 'next-seo'; const Page = () => ( <> <NextSeo nofollow={true} /> <p>This page is not followed</p> </> ); export default Page; /* <meta name="robots" content="index,nofollow"> */ </code></pre><h4>dangerouslySetAllPagesToNoFollow</h4> It has the prefix of <code>dangerously</code> because it will <code>nofollow</code> all pages. As this is an SEO plugin, that is kinda dangerous action. It is not bad to use this. Just please be sure you want to <code>nofollow</code> EVERY page. You can still override this at a page level if you have a use case to <code>follow</code> a page. This can be done by setting <code>nofollow: false</code>. The only way to unset this, is by removing the prop from the <code>DefaultSeo</code> in your custom <code><App></code>. <table> <thead> <tr> <th><code>noindex</code></th> <th><code>nofollow</code></th> <th><code>meta</code> content of <code>robots</code></th> </tr> </thead> <tbody><tr> <td>--</td> <td>--</td> <td><code>index,follow</code> (default)</td> </tr> <tr> <td>false</td> <td>false</td> <td><code>index,follow</code></td> </tr> <tr> <td>true</td> <td>--</td> <td><code>noindex,follow</code></td> </tr> <tr> <td>true</td> <td>false</td> <td><code>noindex,follow</code></td> </tr> <tr> <td>--</td> <td>true</td> <td><code>index,nofollow</code></td> </tr> <tr> <td>false</td> <td>true</td> <td><code>index,nofollow</code></td> </tr> <tr> <td>true</td> <td>true</td> <td><code>noindex,nofollow</code></td> </tr> </tbody></table> <h4>robotsProps</h4> In addition to <code>index, follow</code> the <code>robots</code> meta tag accepts more properties to archive a more accurate crawling and serve better snippets for SEO bots that crawl your page. Example: <pre><code class="hljs language-jsx">import { NextSeo } from 'next-seo'; const Page = () => ( <> <NextSeo robotsProps={{ nosnippet: true, notranslate: true, noimageindex: true, noarchive: true, maxSnippet: -1, maxImagePreview: 'none', maxVideoPreview: -1, }} /> <p>Additional robots props in Next-SEO!!</p> </> ); export default Page; /* <meta name="robots" content="index,follow,nosnippet,max-snippet:-1,max-image-preview:none,noarchive,noimageindex,max-video-preview:-1,notranslate"> */ </code></pre>Available properties <table> <thead> <tr> <th>Property</th> <th>Type</th> <th>Description</th> </tr> </thead> <tbody><tr> <td><code>noarchive</code></td> <td>boolean</td> <td>Do not show a <a href="https://support.google.com/websearch/answer/1687222">cached link</a> in search results.</td> </tr> <tr> <td><code>nosnippet</code></td> <td>boolean</td> <td>Do not show a text snippet or video preview in the search results for this page.</td> </tr> <tr> <td><code>max-snippet</code></td> <td>number</td> <td>Use a maximum of [number] characters as a textual snippet for this search result. <a href="https://developers.google.com/search/reference/robots_meta_tag?hl=en-GB#directives">Read more</a></td> </tr> <tr> <td><code>max-image-preview</code></td> <td>'none','standard','large'</td> <td>Set the maximum size of an image preview for this page in a search results.</td> </tr> <tr> <td><code>max-video-preview</code></td> <td>number</td> <td>Use a maximum of [number] seconds as a video snippet for videos on this page in search results. <a href="https://developers.google.com/search/reference/robots_meta_tag?hl=en-GB#directives">Read more</a></td> </tr> <tr> <td><code>notranslate</code></td> <td>boolean</td> <td>Do not offer translation of this page in search results.</td> </tr> <tr> <td><code>noimageindex</code></td> <td>boolean</td> <td>Do not index images on this page.</td> </tr> <tr> <td><code>unavailable_after</code></td> <td>string</td> <td>Do not show this page in search results after the specified date/time. The date/time must be specified in a widely adopted format including, but not limited to RFC 822, RFC 850, and ISO 8601.</td> </tr> </tbody></table> For more reference about the <code>X-Robots-Tag</code> visit <a href="https://developers.google.com/search/reference/robots_meta_tag?hl=en-GB#directives">Google Search Central - Control Crawling and Indexing</a> <h4>Twitter</h4> Twitter will read the <code>og:title</code>, <code>og:image</code> and <code>og:description</code> tags for their card, this is why <code>next-seo</code> omits <code>twitter:title</code>, <code>twitter:image</code> and <code>twitter:description</code> so not to duplicate. Some tools may report this as an error. See <a href="https://github.com/garmeeh/next-seo/issues/14">Issue #14</a> <h4>Facebook</h4> <pre><code class="hljs language-jsx">facebook={{ appId: '1234567890', }} </code></pre>Add this to your SEO config to include the fb:app_id meta if you need to enable Facebook insights for your site. Information regarding this can be found in Facebook's <a href="https://developers.facebook.com/docs/sharing/webmasters/">documentation</a> <h4>Canonical URL</h4> Add this on a page-per-page basis when you want to consolidate duplicate URLs. <pre><code class="hljs language-js">canonical = 'https://www.canonical.ie/'; </code></pre><h4>Alternate</h4> This link relation is used to indicate a relation between a desktop and a mobile website to search engines. Example: <pre><code class="hljs language-jsx">mobileAlternate={{ media: 'only screen and (max-width: 640px)', href: 'https://m.canonical.ie', }} </code></pre><pre><code class="hljs language-jsx">languageAlternates={[{ hrefLang: 'de-AT', href: 'https://www.canonical.ie/de', }]} </code></pre><h4>Additional Meta Tags</h4> This allows you to add any other meta tags that are not covered in the <code>config</code> and should be used instead of <code>children</code> prop. <code>content</code> is required. Then either <code>name</code>, <code>property</code> or <code>httpEquiv</code>. (Only one on each) Example: <pre><code class="hljs language-js">additionalMetaTags={[{ property: 'dc:creator', content: 'Jane Doe' }, { name: 'application-name', content: 'NextSeo' }, { httpEquiv: 'x-ua-compatible', content: 'IE=edge; chrome=1' }]} </code></pre>Invalid Examples: These are invalid as they contain more than one of <code>name</code>, <code>property</code> and <code>httpEquiv</code> on the same entry. <pre><code class="hljs language-js">additionalMetaTags={[{ property: 'dc:creator', name: 'dc:creator', content: 'Jane Doe' }, { property: 'application-name', httpEquiv: 'application-name', content: 'NextSeo' }]} </code></pre>One thing to note on this is that it currently only supports unique tags unless you use the <code>keyOverride</code> prop to provide a unique <a href="https://reactjs.org/docs/lists-and-keys.html#keys">key</a> to each additional meta tag. The default behaviour (without a <code>keyOverride</code> prop) is to render one tag per unique <code>name</code> / <code>property</code> / <code>httpEquiv</code>. The last one defined will be rendered. For example, if you pass 2 tags with the same <code>property</code>: <pre><code class="hljs language-js">additionalMetaTags={[{ property: 'dc:creator', content: 'Joe Bloggs' }, { property: 'dc:creator', content: 'Jane Doe' }]} </code></pre>it will result in this being rendered: <pre><code class="hljs language-html"><meta property="dc:creator" content="Jane Doe" /> </code></pre>Providing an additional <code>keyOverride</code> property like this: <pre><code class="hljs language-js">additionalMetaTags={[{ property: 'dc:creator', content: 'Joe Bloggs', keyOverride: 'creator1', }, { property: 'dc:creator', content: 'Jane Doe', keyOverride: 'creator2', }]} </code></pre>results in the correct HTML being rendered: <pre><code class="hljs language-html"><meta property="dc:creator" content="Joe Bloggs" /> <meta property="dc:creator" content="Jane Doe" /> </code></pre><h4>Additional Link Tags</h4> This allows you to add any other link tags that are not covered in the <code>config</code>. <code>rel</code> and <code>href</code> is required. Example: <pre><code class="hljs language-js">additionalLinkTags={[ { rel: 'icon', href: 'https://www.test.ie/favicon.ico', }, { rel: 'apple-touch-icon', href: 'https://www.test.ie/touch-icon-ipad.jpg', sizes: '76x76' }, { rel: 'manifest', href: '/manifest.json' }, { rel: 'preload', href: 'https://www.test.ie/font/sample-font.woof2', as: 'font', type: 'font/woff2', crossOrigin: 'anonymous' } ]} </code></pre>it will result in this being rendered: <pre><code class="hljs language-html"><link rel="icon" href="https://www.test.ie/favicon.ico" /> <link rel="apple-touch-icon" href="https://www.test.ie/touch-icon-ipad.jpg" sizes="76x76" /> <link rel="manifest" href="/manifest.json" /> <link rel="preload" href="https://www.test.ie/font/sample-font.woof2" as="font" type="font/woff2" crossorigin="anonymous" /> </code></pre><h2>Open Graph</h2> For the full specification please check out <a href="http://ogp.me/">http://ogp.me/</a> Next SEO currently supports: <ul> <li><a href="#basic">basic</a></li> <li><a href="#video">video</a></li> <li><a href="#article">article</a></li> <li><a href="#book">book</a></li> <li><a href="#profile">profile</a></li> </ul> <h3>Open Graph Examples</h3> <h4>Basic</h4> <pre><code class="hljs language-jsx">import { NextSeo } from 'next-seo'; const Page = () => ( <> <NextSeo openGraph={{ type: 'website', url: 'https://www.example.com/page', title: 'Open Graph Title', description: 'Open Graph Description', images: [ { url: 'https://www.example.ie/og-image.jpg', width: 800, height: 600, alt: 'Og Image Alt', }, { url: 'https://www.example.ie/og-image-2.jpg', width: 800, height: 600, alt: 'Og Image Alt 2', }, ], }} /> <p>Basic</p> </> ); export default Page; </code></pre>Note Multiple images are available from next.js version <code>7.0.0-canary.0</code> For versions <code>6.0.0</code> - <code>7.0.0-canary.0</code> you just need to supply a single item array: <pre><code class="hljs language-js">images: [ { url: 'https://www.example.ie/og-image-01.jpg', width: 800, height: 600, alt: 'Og Image Alt', }, ], </code></pre>Supplying multiple images will not break anything, but only one will be added to the head. <h4>Video</h4> Full info on <a href="http://ogp.me/#type_video">http://ogp.me/</a> <pre><code class="hljs language-jsx">import { NextSeo } from 'next-seo'; const Page = () => ( <> <NextSeo title="Video Page Title" description="Description of video page" openGraph={{ title: 'Open Graph Video Title', description: 'Description of open graph video', url: 'https://www.example.com/videos/video-title', type: 'video.movie', video: { // Multiple Open Graph actors is only available in version `7.0.2-canary.35`+ of next actors: [ { profile: 'https://www.example.com/actors/@firstnameA-lastnameA', role: 'Protagonist', }, { profile: 'https://www.example.com/actors/@firstnameB-lastnameB', role: 'Antagonist', }, ], // Multiple Open Graph directors is only available in version `7.0.2-canary.35`+ of next directors: [ 'https://www.example.com/directors/@firstnameA-lastnameA', 'https://www.example.com/directors/@firstnameB-lastnameB', ], // Multiple Open Graph writers is only available in version `7.0.2-canary.35`+ of next writers: [ 'https://www.example.com/writers/@firstnameA-lastnameA', 'https://www.example.com/writers/@firstnameB-lastnameB', ], duration: 680000, releaseDate: '2022-12-21T22:04:11Z', // Multiple Open Graph tags is only available in version `7.0.2-canary.35`+ of next tags: ['Tag A', 'Tag B', 'Tag C'], }, siteName: 'SiteName', }} /> <h1>Video Page SEO</h1> </> ); export default Page; </code></pre>Note Multiple images are available from next.js version <code>7.0.0-canary.0</code> For versions <code>6.0.0</code> - <code>7.0.0-canary.0</code> you just need to supply a single item array: <pre><code class="hljs language-js">images: [ { url: 'https://www.example.ie/og-image-01.jpg', width: 800, height: 600, alt: 'Og Image Alt', }, ], </code></pre>Supplying multiple images will not break anything, but only one will be added to the head. <h4>Audio</h4> Full info on <a href="https://ogp.me/#structured">http://ogp.me/</a> <pre><code class="hljs language-jsx">import { NextSeo } from 'next-seo'; const Page = () => ( <> <NextSeo title="Audio Page Title" description="Description of audio page" openGraph={{ title: 'Open Graph Audio', description: 'Description of open graph audio', url: 'https://www.example.com/audio/audio', audio: [ { url: 'http://examples.opengraphprotocol.us/media/audio/1khz.mp3', secureUrl: 'https://d72cgtgi6hvvl.cloudfront.net/media/audio/1khz.mp3', type: "audio/mpeg" }, { url: 'http://examples.opengraphprotocol.us/media/audio/250hz.mp3', secureUrl: 'https://d72cgtgi6hvvl.cloudfront.net/media/audio/250hz.mp3', type: "audio/mpeg" }, ] site_name: 'SiteName', }} /> <h1>Audio Page SEO</h1> </> ); export default Page; </code></pre><h4>Article</h4> <pre><code class="hljs language-jsx">import { NextSeo } from 'next-seo'; const Page = () => ( <> <NextSeo openGraph={{ title: 'Open Graph Article Title', description: 'Description of open graph article', url: 'https://www.example.com/articles/article-title', type: 'article', article: { publishedTime: '2017-06-21T23:04:13Z', modifiedTime: '2018-01-21T18:04:43Z', expirationTime: '2022-12-21T22:04:11Z', section: 'Section II', authors: [ 'https://www.example.com/authors/@firstnameA-lastnameA', 'https://www.example.com/authors/@firstnameB-lastnameB', ], tags: ['Tag A', 'Tag B', 'Tag C'], }, images: [ { url: 'https://www.test.ie/images/cover.jpg', width: 850, height: 650, alt: 'Photo of text', }, ], }} /> <p>Article</p> </> ); export default Page; </code></pre>Note Multiple images, authors, and tags are available from next.js version <code>7.0.0-canary.0</code> For versions <code>6.0.0</code> - <code>7.0.0-canary.0</code> you just need to supply a single item array: <code>images:</code> <pre><code class="hljs language-js">images: [ { url: 'https://www.example.ie/og-image-01.jpg', width: 800, height: 600, alt: 'Og Image Alt', }, ], </code></pre><code>authors:</code> <pre><code class="hljs language-js">authors: [ 'https://www.example.com/authors/@firstnameA-lastnameA', ], </code></pre><code>tags:</code> <pre><code class="hljs language-js">tags: ['Tag A'], </code></pre>Supplying multiple of any of the above will not break anything, but only one will be added to the head. <h4>Book</h4> <pre><code class="hljs language-jsx">import { NextSeo } from 'next-seo'; const Page = () => ( <> <NextSeo openGraph={{ title: 'Open Graph Book Title', description: 'Description of open graph book', url: 'https://www.example.com/books/book-title', type: 'book', book: { releaseDate: '2018-09-17T11:08:13Z', isbn: '978-3-16-148410-0', authors: [ 'https://www.example.com/authors/@firstnameA-lastnameA', 'https://www.example.com/authors/@firstnameB-lastnameB', ], tags: ['Tag A', 'Tag B', 'Tag C'], }, images: [ { url: 'https://www.test.ie/images/book.jpg', width: 850, height: 650, alt: 'Cover of the book', }, ], }} /> <p>Book</p> </> ); export default Page; </code></pre>Note Multiple images, authors, and tags are available from next.js version <code>7.0.0-canary.0</code> For versions <code>6.0.0</code> - <code>7.0.0-canary.0</code> you just need to supply a single item array: <code>images:</code> <pre><code class="hljs language-js">images: [ { url: 'https://www.example.ie/og-image-01.jpg', width: 800, height: 600, alt: 'Og Image Alt', }, ], </code></pre><code>authors:</code> <pre><code class="hljs language-js">authors: [ 'https://www.example.com/authors/@firstnameA-lastnameA', ], </code></pre><code>tags:</code> <pre><code class="hljs language-js">tags: ['Tag A'], </code></pre>Supplying multiple of any of the above will not break anything, but only one will be added to the head. <h4>Profile</h4> <pre><code class="hljs language-jsx">import { NextSeo } from 'next-seo'; const Page = () => ( <> <NextSeo openGraph={{ title: 'Open Graph Profile Title', description: 'Description of open graph profile', url: 'https://www.example.com/@firstlast123', type: 'profile', profile: { firstName: 'First', lastName: 'Last', username: 'firstlast123', gender: 'female', }, images: [ { url: 'https://www.test.ie/images/profile.jpg', width: 850, height: 650, alt: 'Profile Photo', }, ], }} /> <p>Profile</p> </> ); export default Page; </code></pre>Note Multiple images are available from next.js version <code>7.0.0-canary.0</code> For versions <code>6.0.0</code> - <code>7.0.0-canary.0</code> you just need to supply a single item array: <pre><code class="hljs language-js">images: [ { url: 'https://www.example.ie/og-image-01.jpg', width: 800, height: 600, alt: 'Og Image Alt', }, ], </code></pre>Supplying multiple images will not break anything, but only one will be added to the head. <h2>JSON-LD</h2> Next SEO now has the ability to set JSON-LD a form of structured data. Structured data is a standardized format for providing information about a page and classifying the page content. Google has excellent content on JSON-LD -> <a href="https://developers.google.com/search/docs/data-types/article">HERE</a> If using the app directory then please ensure to add <code>useAppDir={true}</code> prop and that you are using the component in the <code>page.js</code> Below you will find a very basic page implementing each of the available JSON-LD types: <ul> <li><a href="#article-1">Article</a></li> <li><a href="#breadcrumb">Breadcrumb</a></li> <li><a href="#blog">Blog</a></li> <li><a href="#campground">Campground</a></li> <li><a href="#recipe">Recipe</a></li> <li><a href="#sitelinks-search-box">Sitelinks Search Box</a></li> <li><a href="#course">Course</a></li> <li><a href="#dataset">Dataset</a></li> <li><a href="#corporate-contact">Corporate Contact</a></li> <li><a href="#faq-page">FAQ Page</a></li> <li><a href="#how-to">How-to</a></li> <li><a href="#job-posting">Job Posting</a></li> <li><a href="#local-business">Local Business</a></li> <li><a href="#product">Product</a></li> <li><a href="#social-profile">Social Profile</a></li> <li><a href="#news-article">News Article</a></li> <li><a href="#park">Park</a></li> </ul> Pull requests are very welcome to add any from the list <a href="https://developers.google.com/search/docs/data-types/article">found here</a> <h4>JSON-LD Security</h4> Just a quick note on security. To get JSON-LD onto the page it needs to be in a script tag. <code>next-seo</code> achieves this by using a script tag with <code>dangerouslySetInnerHTML</code>. So if passing anything directly from a URL to one of the components below please ensure you sanitize it first if needed. View <code>toJson.tsx</code> for implementation detail. <h4>Handling multiple instances</h4> If your page requires multiple instances of a given JSON-LD component, you can specify unique <code>keyOverride</code> properties, and <code>next-seo</code> will handle the rest. This comes in handy for blog rolls, search results, and overview pages. Please fully research when you should and shouldn't add multiple instances of JSON-LD. <pre><code class="hljs language-jsx"><ExampleJsonLd keyOverride="my-new-key" /> </code></pre><h3>Article</h3> <pre><code class="hljs language-jsx">import { ArticleJsonLd } from 'next-seo'; const Page = () => ( <> <h1>Article JSON-LD</h1> <ArticleJsonLd useAppDir={false} url="https://example.com/article" title="Article headline" images={[ 'https://example.com/photos/1x1/photo.jpg', 'https://example.com/photos/4x3/photo.jpg', 'https://example.com/photos/16x9/photo.jpg', ]} datePublished="2015-02-05T08:00:00+08:00" dateModified="2015-02-05T09:00:00+08:00" authorName={[ { name: 'Jane Blogs', url: 'https://example.com', }, { name: 'Mary Stone', url: 'https://example.com', }, ]} publisherName="Gary Meehan" publisherLogo="https://www.example.com/photos/logo.jpg" description="This is a mighty good description of this article." isAccessibleForFree={true} /> </> ); export default Page; </code></pre><h3>Breadcrumb</h3> <pre><code class="hljs language-jsx">import { BreadcrumbJsonLd } from 'next-seo'; const Page = () => ( <> <h1>Breadcrumb JSON-LD</h1> <BreadcrumbJsonLd itemListElements={[ { position: 1, name: 'Books', item: 'https://example.com/books', }, { position: 2, name: 'Authors', item: 'https://example.com/books/authors', }, { position: 3, name: 'Ann Leckie', item: 'https://example.com/books/authors/annleckie', }, { position: 4, name: 'Ancillary Justice', item: 'https://example.com/books/authors/ancillaryjustice', }, ]} /> </> ); export default Page; </code></pre>Required properties <table> <thead> <tr> <th>Property</th> <th>Info</th> </tr> </thead> <tbody><tr> <td><code>itemListElements</code></td> <td></td> </tr> <tr> <td><code>itemListElements.position</code></td> <td>The position of the breadcrumb in the breadcrumb trail. Position 1 signifies the beginning of the trail.</td> </tr> <tr> <td><code>itemListElements.name</code></td> <td>The title of the breadcrumb displayed for the user.</td> </tr> <tr> <td><code>itemListElements.item</code></td> <td>The URL to the webpage that represents the breadcrumb.</td> </tr> </tbody></table> Other | <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside of the app directory. | <h3>Blog</h3> <pre><code class="hljs language-jsx">import { ArticleJsonLd } from 'next-seo'; const Page = () => ( <> <h1>Blog JSON-LD</h1> <ArticleJsonLd type="BlogPosting" url="https://example.com/blog" title="Blog headline" images={[ 'https://example.com/photos/1x1/photo.jpg', 'https://example.com/photos/4x3/photo.jpg', 'https://example.com/photos/16x9/photo.jpg', ]} datePublished="2015-02-05T08:00:00+08:00" dateModified="2015-02-05T09:00:00+08:00" authorName="Jane Blogs" description="This is a mighty good description of this blog." /> </> ); export default Page; </code></pre><h3>Campground</h3> <pre><code class="hljs language-jsx">import { CampgroundJsonLd } from 'next-seo'; const Page = () => ( <> <h1>Campground JSON-LD</h1> <CampgroundJsonLd id="https://www.example.com/campground/rip-van-winkle-campground" name="Rip Van Winkle Campgrounds" url="https://www.example.com/campground" telephone="+18452468114" images={['https://example.com/photos/1x1/photo.jpg']} address={{ streetAddress: '149 Blue Mountain Rd', addressLocality: 'Saugerties', addressRegion: 'NY', postalCode: '12477', addressCountry: 'US', }} description="Description about Rip Van Winkle Campgrounds" geo={{ latitude: '42.092599', longitude: '-74.018580', }} openingHours={[ { opens: '09:00', closes: '17:00', dayOfWeek: [ 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday', ], validFrom: '2019-12-23', validThrough: '2020-04-02', }, ]} petsAllowed rating={{ ratingValue: '5', ratingCount: '18', }} amenityFeature={{ name: 'Showers', value: true, }} priceRange="$$" /> </> ); export default Page; </code></pre>Required properties <table> <thead> <tr> <th>Property</th> <th>Info</th> </tr> </thead> <tbody><tr> <td><code>@id</code></td> <td>Globally unique ID of the specific campground in the form of a URL.</td> </tr> <tr> <td><code>address</code></td> <td>Address of the specific campground location</td> </tr> <tr> <td><code>address.addressCountry</code></td> <td>The 2-letter ISO 3166-1 alpha-2 country code</td> </tr> <tr> <td><code>address.addressLocality</code></td> <td>City</td> </tr> <tr> <td><code>address.addressRegion</code></td> <td>State or province, if applicable.</td> </tr> <tr> <td><code>address.postalCode</code></td> <td>Postal or zip code.</td> </tr> <tr> <td><code>address.streetAddress</code></td> <td>Street number, street name, and unit number.</td> </tr> <tr> <td><code>name</code></td> <td>Campground name.</td> </tr> <tr> <td><code>description</code></td> <td>Campground description.</td> </tr> </tbody></table> Supported properties <table> <thead> <tr> <th>Property</th> <th>Info</th> </tr> </thead> <tbody><tr> <td><code>geo</code></td> <td>Geographic coordinates of the campground.</td> </tr> <tr> <td><code>geo.latitude</code></td> <td>The latitude of the campground location</td> </tr> <tr> <td><code>geo.longitude</code></td> <td>The longitude of the campground location</td> </tr> <tr> <td><code>images</code></td> <td>An image or images of the campground. Required for valid markup depending on the type</td> </tr> <tr> <td><code>telephone</code></td> <td>A campground phone number meant to be the primary contact method for customers.</td> </tr> <tr> <td><code>url</code></td> <td>The fully-qualified URL of the specific campground.</td> </tr> <tr> <td><code>openingHours</code></td> <td>Opening hour specification of the campground. You can provide this as a single object, or an array of objects with the properties below.</td> </tr> <tr> <td><code>openingHours.opens</code></td> <td>The opening hour of the place or service on the given day(s) of the week.</td> </tr> <tr> <td><code>openingHours.closes</code></td> <td>The closing hour of the place or service on the given day(s) of the week.</td> </tr> <tr> <td><code>openingHours.dayOfWeek</code></td> <td>The day of the week for which these opening hours are valid. Can be a string or array of strings. Refer to <a href="https://schema.org/DayOfWeek">DayOfWeek</a></td> </tr> <tr> <td><code>openingHours.validFrom</code></td> <td>The date when the item becomes valid.</td> </tr> <tr> <td><code>openingHours.validThrough</code></td> <td>The date after when the item is not valid.</td> </tr> <tr> <td><code>isAccessibleForFree</code></td> <td>Whether or not the campground is accessible for free.</td> </tr> <tr> <td><code>petsAllowed</code></td> <td>Whether or not the campgroud allows pets.</td> </tr> <tr> <td><code>amenityFeature</code></td> <td>An amenity feature (e.g. a characteristic or service) of the campground.</td> </tr> <tr> <td><code>amenityFeature.name</code></td> <td>The name of the amenity.</td> </tr> <tr> <td><code>amenityFeature.value</code></td> <td>The value of the amenity.</td> </tr> <tr> <td><code>priceRange</code></td> <td>The price range of the campground, for example $$$.</td> </tr> <tr> <td><code>rating</code></td> <td>The average rating of the campground based on multiple ratings or reviews.</td> </tr> <tr> <td><code>rating.ratingValue</code></td> <td>The rating for the content.</td> </tr> <tr> <td><code>rating.ratingCount</code></td> <td>The count of total number of ratings.</td> </tr> </tbody></table> Other | <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside of the app directory. | <h3>Recipe</h3> <pre><code class="hljs language-jsx">import { RecipeJsonLd } from 'next-seo'; const Page = () => ( <> <h1>Recipe JSON-LD</h1> <RecipeJsonLd name="Party Coffee Cake" description="This coffee cake is awesome and perfect for parties." datePublished="2018-03-10" authorName={['Jane Blogs', 'Mary Stone']} prepTime="PT20M" cookTime="PT30M" totalTime="PT50M" keywords="cake for a party, coffee" yields="10" category="Dessert" cuisine="American" calories={270} images={[ 'https://example.com/photos/1x1/photo.jpg', 'https://example.com/photos/4x3/photo.jpg', 'https://example.com/photos/16x9/photo.jpg', ]} ingredients={[ '2 cups of flour', '3/4 cup white sugar', '2 teaspoons baking powder', '1/2 teaspoon salt', '1/2 cup butter', '2 eggs', '3/4 cup milk', ]} instructions={[ { name: 'Preheat', text: 'Preheat the oven to 350 degrees F. Grease and flour a 9x9 inch pan.', url: 'https://example.com/party-coffee-cake#step1', image: 'https://example.com/photos/party-coffee-cake/step1.jpg', }, ]} aggregateRating={{ ratingValue: '5', ratingCount: '18', }} video={{ name: 'How to make a Party Coffee Cake', description: 'This is how you make a Party Coffee Cake.', contentUrl: 'http://www.example.com/video123.mp4', embedUrl: 'http://www.example.com/videoplayer?video=123', uploadDate: '2018-02-05T08:00:00+08:00', duration: 'PT1M33S', thumbnailUrls: [ 'https://example.com/photos/1x1/photo.jpg', 'https://example.com/photos/4x3/photo.jpg', 'https://example.com/photos/16x9/photo.jpg', ], expires: '2019-02-05T08:00:00+08:00', hasPart: { '@type': 'Clip', name: 'Preheat oven', startOffset: 30, url: 'http://www.example.com/example?t=30', }, watchCount: 2347, publication: { '@type': 'BroadcastEvent', isLiveBroadcast: true, startDate: '2020-10-24T14:00:00+00:00', endDate: '2020-10-24T14:37:14+00:00', }, regionsAllowed: ['IT', 'NL'], }} /> </> ); export default Page; </code></pre>Required properties <table> <thead> <tr> <th>Property</th> <th>Info</th> </tr> </thead> <tbody><tr> <td><code>name</code></td> <td>The name of the recipe</td> </tr> <tr> <td><code>description</code></td> <td>A description of the recipe</td> </tr> <tr> <td><code>authorName</code></td> <td>The name of the recipe author. Can be a string or array of strings.</td> </tr> <tr> <td><code>ingredients</code></td> <td>A list of ingredient strings</td> </tr> <tr> <td><code>instructions</code></td> <td>-</td> </tr> <tr> <td><code>instructions.name</code></td> <td>The name of the instruction step.</td> </tr> <tr> <td><code>instructions.text</code></td> <td>The directions of the instruction step.</td> </tr> </tbody></table> Other | <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside of the app directory. | <h3>Sitelinks Search Box</h3> <pre><code class="hljs language-jsx">import { SiteLinksSearchBoxJsonLd } from 'next-seo'; const Page = () => ( <> <h1>Sitelinks Search Box JSON-LD</h1> <SiteLinksSearchBoxJsonLd url="https://www.example.com" potentialActions={[ { target: 'https://query.example.com/search?q', queryInput: 'search_term_string', }, { target: 'android-app://com.example/https/query.example.com/search/?q', queryInput: 'search_term_string', }, ]} /> </> ); export default Page; </code></pre>Required properties <table> <thead> <tr> <th>Property</th> <th>Info</th> </tr> </thead> <tbody><tr> <td><code>url</code></td> <td>URL of the website associated with the sitelinks searchbox</td> </tr> <tr> <td><code>potentialActions</code></td> <td>Array of one or two SearchAction objects. Describes the URI to send the query to, and the syntax of the request that is sent</td> </tr> <tr> <td><code>potentialActions.target</code></td> <td>For websites, the URL of the handler that should receive and handle the search query; for apps, the URI of the intent handler for your search engine that should handle queries</td> </tr> <tr> <td><code>potentialActions.queryInput</code></td> <td>Placeholder used in target, gets substituted for user given query</td> </tr> </tbody></table> Other | <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside of the app directory. | Read the <a href="https://developers.google.com/search/docs/appearance/structured-data/sitelinks-searchbox">documentation</a> <h3>Course</h3> <pre><code class="hljs language-jsx">import { CourseJsonLd } from 'next-seo'; const Page = () => ( <> <h1>Course JSON-LD</h1> <CourseJsonLd courseName="Course Name" description="Introductory CS course laying out the basics." provider={{ name: 'Course Provider', url: 'https//www.example.com/provider', }} /> </> ); export default Page; </code></pre>Required properties <table> <thead> <tr> <th>Property</th> <th>Info</th> </tr> </thead> <tbody><tr> <td><code>courseName</code></td> <td>The title of the course.</td> </tr> <tr> <td><code>description</code></td> <td>A description of the course. Display limit of 60 characters.</td> </tr> <tr> <td><code>provider.name</code></td> <td>The course provider name.</td> </tr> <tr> <td><code>provider.url</code></td> <td>The course provider name url.</td> </tr> </tbody></table> Recommended properties <table> <thead> <tr> <th>Property</th> <th>Info</th> </tr> </thead> <tbody><tr> <td><code>providerUrl</code></td> <td>The url to the course provider.</td> </tr> </tbody></table> Other | <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside of the app directory. | <h3>Dataset</h3> <pre><code class="hljs language-jsx">import { DatasetJsonLd } from 'next-seo'; const Page = () => ( <> <h1>Dataset JSON-LD</h1> <DatasetJsonLd description="The description needs to be at least 50 characters long" name="name of the dataset" license="https//www.example.com" /> </> ); export default Page; </code></pre>Required properties <table> <thead> <tr> <th>Property</th> <th>Info</th> </tr> </thead> <tbody><tr> <td><code>description</code></td> <td>A short summary describing a dataset. Needs to be between 50 and 5000 characters.</td> </tr> <tr> <td><code>name</code></td> <td>A license under which the dataset is distributed.</td> </tr> </tbody></table> Recommended properties <table> <thead> <tr> <th>Property</th> <th>Info</th> </tr> </thead> <tbody><tr> <td><code>license</code></td> <td>The url to the course provider.</td> </tr> </tbody></table> Other | <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside of the app directory. | <h3>Corporate Contact</h3> <pre><code class="hljs language-jsx">import { CorporateContactJsonLd } from 'next-seo'; const Page = () => ( <> <h1>Corporate Contact JSON-LD</h1> <CorporateContactJsonLd url="http://www.your-company-site.com" logo="http://www.example.com/logo.png" contactPoint={[ { telephone: '+1-401-555-1212', contactType: 'customer service', email: 'customerservice@email.com', areaServed: 'US', availableLanguage: ['English', 'Spanish', 'French'], }, { telephone: '+1-877-746-0909', contactType: 'customer service', email: 'servicecustomer@email.com', contactOption: 'TollFree', availableLanguage: 'English', }, { telephone: '+1-877-453-1304', contactType: 'technical support', contactOption: 'TollFree', areaServed: ['US', 'CA'], availableLanguage: ['English', 'French'], }, ]} /> </> ); export default Page; </code></pre>Required properties <table> <thead> <tr> <th>Property</th> <th>Info</th> </tr> </thead> <tbody><tr> <td><code>url</code></td> <td>Url to the home page of the company's official site.</td> </tr> <tr> <td><code>contactPoint</code></td> <td></td> </tr> <tr> <td><code>contactPoint.telephone</code></td> <td>An internationalized version of the phone number, starting with the "+" symbol and country code</td> </tr> <tr> <td><code>contactPoint.contactType</code></td> <td>Description of the purpose of the phone number i.e. <code>Technical Support</code>.</td> </tr> </tbody></table> Recommended ContactPoint properties <table> <thead> <tr> <th>Property</th> <th>Info</th> </tr> </thead> <tbody><tr> <td><code>contactPoint.areaServed</code></td> <td><code>String</code> or <code>Array</code> of geographical regions served by the business. Example <code>"US"</code> or <code>["US", "CA", "MX"]</code></td> </tr> <tr> <td><code>contactPoint.availableLanguage</code></td> <td>Details about the language spoken. Example <code>"English"</code> or <code>["English", "French"]</code></td> </tr> <tr> <td><code>contactPoint.email</code></td> <td>Email asscosiated with the business`</td> </tr> <tr> <td><code>gecontactPointo.contactOption</code></td> <td>Details about the phone number. Example <code>"TollFree"</code></td> </tr> </tbody></table> Other | <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside of the app directory. | <h3>FAQ Page</h3> <pre><code class="hljs language-jsx">import { FAQPageJsonLd } from 'next-seo'; const Page = () => ( <> <h1>FAQ Page JSON-LD</h1> <FAQPageJsonLd mainEntity={[ { questionName: 'How long is the delivery time?', acceptedAnswerText: '3-5 business days.', }, { questionName: 'Where can I find information about product recalls?', acceptedAnswerText: 'Read more on under information.', }, ]} /> </> ); export default Page; </code></pre>Required properties <table> <thead> <tr> <th>Property</th> <th>Info</th> </tr> </thead> <tbody><tr> <td><code>mainEntity</code></td> <td></td> </tr> <tr> <td><code>mainEntity.questionName</code></td> <td>The full text of the question. For example, "How long is the delivery time?".</td> </tr> <tr> <td><code>mainEntity.acceptedAnswerText</code></td> <td>The full answer to the question.</td> </tr> </tbody></table> Other | <code>useAppDir</code> | This should be set to true if using the new app directory. Not required if outside of the app directory. | <h3>How-to</h3> <pre><code class="hljs language-jsx">import { HowToJsonLd } from 'next-seo'; const Page = () => ( <> <h1>How-to JSON-LD</h1> <HowToJsonLd name="How to tile a kitchen backsplash" image="https://example.com/photos/1x1/photo.jpg" estimatedCost={{ currency: 'USD', value: '100' }} supply={['tiles', 'thin-set', 'mortar', 'tile grout', 'grout sealer']} tool={['notched trowel', 'bucket', 'large sponge']} step={[ { url: 'https://example.com/kitchen#step1', name: 'Prepare the surfaces', itemListElement: [ { type: 'HowToTip', text: 'Turn off the power to the kitchen and then remove everything that is on the wall, such as outlet covers, switchplates, and any other item in the area that is to be tiled.', }, { type: 'HowToDirection', text: 'Then clean the surface thoroughly to remove any grease or other debris and tape off the area.', }, ], image: 'https://example.com/photos/1x1/p </code></pre></div> </div> <div class="mt-3 rounded-2xl bg-surface pb-2 pl-4 pr-4 md:mt-0 md:w-1/4"> <div class="pt-5"> <div class="overflow-x-auto whitespace-nowrap rounded-lg border bg-background p-2 pl-5 pr-5 text-center font-code text-lg"> npm i next-seo </div> </div> <div> <h2>Source Code</h2> <a href="https://github.com/garmeeh/next-seo.git" class="overflow-x-auto whitespace-nowrap rounded-lg bg-background p-2 text-white no-underline"> github.com/garmeeh/next-seo.... </a> <h2>Homepage</h2> <a href="https://github.com/garmeeh/next-seo#readme" class="rounded-lg bg-background p-2 text-white no-underline"> github.com/garmeeh/next-seo#... </a> </div> <div> <h2>Metadata</h2> <ul class="space-y-2 pl-2"> <li class="flex items-center space-x-2"> <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" style="--darkreader-inline-stroke: currentColor;" class="h-6 w-6" data-darkreader-inline-stroke=""><path stroke="none" d="M0 0h24v24H0z" fill="none" style="--darkreader-inline-stroke: none;" data-darkreader-inline-stroke=""></path><path d="M15 21h-9a3 3 0 0 1 -3 -3v-1h10v2a2 2 0 0 0 4 0v-14a2 2 0 1 1 2 2h-2m2 -4h-11a3 3 0 0 0 -3 3v11"></path><path d="M9 7l4 0"></path><path d="M9 11l4 0"></path></svg> <a href="https://directory.fsf.org/wiki/License:MIT" class="text-white no-underline"> MIT </a> </li> <li class="flex items-center space-x-2"> <svg class="h-6 w-6" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" style="--darkreader-inline-stroke: currentColor;" data-darkreader-inline-stroke=""><path stroke="none" d="M0 0h24v24H0z" fill="none" style="--darkreader-inline-stroke: none;" data-darkreader-inline-stroke=""></path><path d="M9 9v8.044a2 2 0 0 1 -2.996 1.734l-1.568 -.9a3 3 0 0 1 -1.436 -2.561v-6.635a3 3 0 0 1 1.436 -2.56l6 -3.667a3 3 0 0 1 3.128 0l6 3.667a3 3 0 0 1 1.436 2.561v6.634a3 3 0 0 1 -1.436 2.56l-6 3.667a3 3 0 0 1 -3.128 0"></path><path d="M17 9h-3.5a1.5 1.5 0 0 0 0 3h2a1.5 1.5 0 0 1 0 3h-3.5"></path></svg> Whatever </li> <li class="flex items-center space-x-2"> <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" class="h-6 w-6" xmlns="http://www.w3.org/2000/svg"><path d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"></path></svg> Gary Meehan </li> <li class="flex items-center space-x-2"> <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 20 20" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6"><path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM6.293 6.707a1 1 0 010-1.414l3-3a1 1 0 011.414 0l3 3a1 1 0 01-1.414 1.414L11 5.414V13a1 1 0 11-2 0V5.414L7.707 6.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg> released 9/1/2024 </li> </ul> </div> <div> <h2>Downloads</h2> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();;(()=>{var b=Object.defineProperty;var f=(c,o,i)=>o in c?b(c,o,{enumerable:!0,configurable:!0,writable:!0,value:i}):c[o]=i;var l=(c,o,i)=>(f(c,typeof o!="symbol"?o+"":o,i),i);var p;{let c={0:t=>m(t),1:t=>i(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(i(t)),5:t=>new Set(i(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t)},o=t=>{let[e,r]=t;return e in c?c[e](r):void 0},i=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([e,r])=>[e,o(r)]));customElements.get("astro-island")||customElements.define("astro-island",(p=class extends HTMLElement{constructor(){super(...arguments);l(this,"Component");l(this,"hydrator");l(this,"hydrate",async()=>{var d;if(!this.hydrator||!this.isConnected)return;let e=(d=this.parentElement)==null?void 0:d.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let r=this.querySelectorAll("astro-slot"),a={},h=this.querySelectorAll("template[data-astro-template]");for(let n of h){let s=n.closest(this.tagName);s!=null&&s.isSameNode(this)&&(a[n.getAttribute("data-astro-template")||"default"]=n.innerHTML,n.remove())}for(let n of r){let s=n.closest(this.tagName);s!=null&&s.isSameNode(this)&&(a[n.getAttribute("name")||"default"]=n.innerHTML)}let u;try{u=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(n){let s=this.getAttribute("component-url")||"<unknown>",y=this.getAttribute("component-export");throw y&&(s+=` (export ${y})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),n),n}await this.hydrator(this)(this.Component,u,a,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});l(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),r.disconnect(),this.childrenConnectedCallback()},r=new MutationObserver(()=>{var a;((a=this.lastChild)==null?void 0:a.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});r.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}start(){let e=JSON.parse(this.getAttribute("opts")),r=this.getAttribute("client");if(Astro[r]===void 0){window.addEventListener(`astro:${r}`,()=>this.start(),{once:!0});return}Astro[r](async()=>{let a=this.getAttribute("renderer-url"),[h,{default:u}]=await Promise.all([import(this.getAttribute("component-url")),a?import(a):()=>()=>{}]),d=this.getAttribute("component-export")||"default";if(!d.includes("."))this.Component=h[d];else{this.Component=h;for(let n of d.split("."))this.Component=this.Component[n]}return this.hydrator=u,this.hydrate},e,this)}attributeChangedCallback(){this.hydrate()}},l(p,"observedAttributes",["props"]),p))}})();</script><astro-island uid="Z21xLVo" component-url="/_astro/PackageDownloads.J8YmCCO0.js" component-export="default" renderer-url="/_astro/client.2wOxL1Aq.js" props="{"name":[0,"next-seo"]}" ssr="" client="only" opts="{"name":"PackageDownloads","value":true}"></astro-island> <noscript> <a href="/next-seo/downloads">Downloads Tab Here</a> </noscript> </div> <div> <h2>Maintainers</h2> <div> <a class="text-white no-underline" href="/~garymeehan"> <div class="mb-2 flex items-center space-x-2"> <img class="h-11 w-11 rounded-full" alt="@garymeehan" src="/~garymeehan/profile.png"> garymeehan </div> </a> </div> </div> </div> </div> </div> </main> </div> </div> </body></html>