`.
#### No Follow
Setting this to `true` will set `index,nofollow` (to set `noindex`, please refer to [`noindex`](#noIndex)). This works on a page by page basis. This property works in tandem with the `noindex` property and together they populate the `robots` and `googlebot` meta tags.
**Note:** The `noindex` and the [`nofollow`](#noFollow) 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 `index,follow` because `next-seo` is a SEO plugin after all. So if you want to globally these properties, please see [dangerouslySetAllPagesToNoIndex](#dangerouslySetAllPagesToNoIndex) and [dangerouslySetAllPagesToNoFollow](#dangerouslySetAllPagesToNoFollow).
**Example No Follow on a single page:**
If you have a single page that you want no indexed you can achieve this by:
```jsx
import React from 'react';
import { NextSeo } from 'next-seo';
export default () => (
<>
This page is not followed
);
/*
*/
```
#### dangerouslySetAllPagesToNoFollow
It has the prefix of `dangerously` because it will `nofollow` 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 `nofollow` **EVERY** page. You can still override this at a page level if you have a use case to `follow` a page. This can be done by setting `nofollow: false`.
The only way to unset this, is by removing the prop from the `DefaultSeo` in your custom ``.
| `noindex` | `nofollow` | `meta` content of `robots`, `googlebot` |
| --------- | ---------- | --------------------------------------- |
| -- | -- | `index,follow` (default) |
| false | false | `index,follow` |
| true | -- | `noindex,follow` |
| true | false | `noindex,follow` |
| -- | true | `index,nofollow` |
| false | true | `index,nofollow` |
| true | true | `noindex,nofollow` |
#### Twitter
Twitter will read the `og:title`, `og:image` and `og:description` tags for their card, this is why `next-seo` omits `twitter:title`, `twitter:image` and `twitter:description` so not to duplicate.
Some tools may report this an error. See [Issue #14](https://github.com/garmeeh/next-seo/issues/14)
#### facebook
```jsx
facebook={{
appId: 1234567890,
}}
```
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 [documentation](https://developers.facebook.com/docs/sharing/webmasters/)
#### Canonical URL
Add this on a page per page basis when you want to consolidate duplicate URLs.
```js
canonical = 'https://www.canonical.ie/';
```
#### Alternate
This link relation is used to indicate a relation between a desktop and a mobile website to search engines.
Example:
```jsx
mobileAlternate={{
media: 'only screen and (max-width: 640px)',
href: 'https://m.canonical.ie',
}}
```
```jsx
languageAlternate={{
hrefLang: 'de-AT',
href: 'https://www.canonical.ie/de',
}}
```
#### Additional Meta Tags
This allows you to add any other meta tags that are not covered in the `config`.
`content` is required. Then either `name` or `property`. (Only one on each)
Example:
```js
additionalMetaTags={[{
property: 'dc:creator',
content: 'Jane Doe'
}, {
name: 'application-name',
content: 'NextSeo'
}]}
```
Invalid Examples:
These are invalid as they contain `property` and `name` on the same entry.
```js
additionalMetaTags={[{
property: 'dc:creator',
name: 'dc:creator',
content: 'Jane Doe'
}, {
property: 'application-name',
name: 'application-name',
content: 'NextSeo'
}]}
```
One thing to note on this is that it currently only supports unique tags.
This means it will only render one tag per unique `name` / `property`. The last one defined will be rendered.
Example:
If you pass:
```js
additionalMetaTags={[{
property: 'dc:creator',
content: 'John Doe'
}, {
property: 'dc:creator',
content: 'Jane Doe'
}]}
```
it will result in this being rendered:
```html
,
```
## Open Graph
For the full specification please check out http://ogp.me/
Next SEO currently supports:
- [basic](#basic)
- [video](#video)
- [article](#article)
- [book](#book)
- [profile](#profile)
### Open Graph Examples
#### Basic
```jsx
import React from 'react';
import { NextSeo } from 'next-seo';
export default () => (
<>
Basic
);
```
**Note**
Multiple images is only available in version `7.0.0-canary.0`+
For versions `6.0.0` - `7.0.0-canary.0` you just need to supply a single item array:
```js
images: [
{
url: 'https://www.example.ie/og-image-01.jpg',
width: 800,
height: 600,
alt: 'Og Image Alt',
},
],
```
Supplying multiple images will not break anything, but only one will be added to the head.
#### Video
Full info on [http://ogp.me/](http://ogp.me/#type_video)
```jsx
import React from 'react';
import { NextSeo } from 'next-seo';
export default () => (
<>
Video Page SEO
);
```
**Note**
Multiple images is only available in version `7.0.0-canary.0`+
For versions `6.0.0` - `7.0.0-canary.0` you just need to supply a single item array:
```js
images: [
{
url: 'https://www.example.ie/og-image-01.jpg',
width: 800,
height: 600,
alt: 'Og Image Alt',
},
],
```
Supplying multiple images will not break anything, but only one will be added to the head.
#### Article
```jsx
import React from 'react';
import { NextSeo } from 'next-seo';
export default () => (
<>
Article
);
```
**Note**
Multiple images, authors, tags is only available in version `7.0.0-canary.0`+
For versions `6.0.0` - `7.0.0-canary.0` you just need to supply a single item array:
`images:`
```js
images: [
{
url: 'https://www.example.ie/og-image-01.jpg',
width: 800,
height: 600,
alt: 'Og Image Alt',
},
],
```
`authors:`
```js
authors: [
'https://www.example.com/authors/@firstnameA-lastnameA',
],
```
`tags:`
```js
tags: ['Tag A'],
```
Supplying multiple of any of the above will not break anything, but only one will be added to the head.
#### Book
```jsx
import React from 'react';
import { NextSeo } from 'next-seo';
export default () => (
<>
Book
);
```
**Note**
Multiple images, authors, tags is only available in version `7.0.0-canary.0`+
For versions `6.0.0` - `7.0.0-canary.0` you just need to supply a single item array:
`images:`
```js
images: [
{
url: 'https://www.example.ie/og-image-01.jpg',
width: 800,
height: 600,
alt: 'Og Image Alt',
},
],
```
`authors:`
```js
authors: [
'https://www.example.com/authors/@firstnameA-lastnameA',
],
```
`tags:`
```js
tags: ['Tag A'],
```
Supplying multiple of any of the above will not break anything, but only one will be added to the head.
#### Profile
```jsx
import React from 'react';
import { NextSeo } from 'next-seo';
export default () => (
<>
Profile
);
```
**Note**
Multiple images is only available in version `7.0.0-canary.0`+
For versions `6.0.0` - `7.0.0-canary.0` you just need to supply a single item array:
```js
images: [
{
url: 'https://www.example.ie/og-image-01.jpg',
width: 800,
height: 600,
alt: 'Og Image Alt',
},
],
```
Supplying multiple images will not break anything, but only one will be added to the head.
## JSON-LD
Next SEO now has the ability to set JSON-LD a form of structured data. Structured data is a standardised format for providing information about a page and classifying the page content.
Google has excellent content on JSON-LD -> [HERE](https://developers.google.com/search/docs/data-types/article)
Below you will find a very basic page implementing each of the available JSON-LD types:
- [Article](#article-1)
- [Breadcrumb](#breadcrumb)
- [Blog](#blog)
- [Recipe](#recipe)
- [Course](#course)
- [Dataset](#dataset)
- [Corporate Contact](#corporate-contact)
- [FAQ Page](#faq-page)
- [Job Posting](#job-posting)
- [Local Business](#local-business)
- [Product](#product)
- [Social Profile](#social-profile)
- [News Article](#news-article)
More to follow very, very soon!
### Article
```jsx
import React from 'react';
import { ArticleJsonLd } from 'next-seo';
export default () => (
<>
Article JSON-LD
);
```
### Breadcrumb
```jsx
import React from 'react';
import { BreadcrumbJsonLd } from 'next-seo';
export default () => (
<>
Breadcrumb JSON-LD
);
```
**Required properties**
| Property | Info |
| --------------------------- | -------------------------------------------------------------------------------------------------------- |
| `itemListElements` | |
| `itemListElements.position` | The position of the breadcrumb in the breadcrumb trail. Position 1 signifies the beginning of the trail. |
| `itemListElements.name` | The title of the breadcrumb displayed for the user. |
| `itemListElements.item` | The URL to the webpage that represents the breadcrumb. |
### Blog
```jsx
import React from 'react';
import { BlogJsonLd } from 'next-seo';
export default () => (
<>
Blog JSON-LD
);
```
### Recipe
```jsx
import React from 'react';
import { RecipeJsonLd } from 'next-seo';
export default () => (
<>
Recipe JSON-LD
);
```
**Required properties**
| Property | Info |
| ------------------- | --------------------------------------- |
| `name` | The name of the recipe |
| `description` | A description of the recipe |
| `authorName` | The name of the recipe author |
| `ingredients` | A list of ingredient strings |
| `instructions` | - |
| `instructions.name` | The name of the instruction step. |
| `instructions.text` | The directions of the instruction step. |
### Course
```jsx
import React from 'react';
import { CourseJsonLd } from 'next-seo';
export default () => (
<>
Course JSON-LD
);
```
**Required properties**
| Property | Info |
| -------------- | ------------------------------------------------------------ |
| `courseName` | The title of the course. |
| `description` | A description of the course. Display limit of 60 characters. |
| `providerName` | The course provider name. |
**Recommended properties**
| Property | Info |
| ------------- | ------------------------------- |
| `providerUrl` | The url to the course provider. |
### Dataset
```jsx
import React from 'react';
import { DatasetJsonLd } from 'next-seo';
export default () => (
<>
Dataset JSON-LD
);
```
**Required properties**
| Property | Info |
| ------------- | --------------------------------------------------------------------------------- |
| `description` | A short summary describing a dataset. Needs to be between 50 and 5000 characters. |
| `name` | A license under which the dataset is distributed. |
**Recommended properties**
| Property | Info |
| --------- | ------------------------------- |
| `license` | The url to the course provider. |
### Corporate Contact
```jsx
import React from 'react';
import { CorporateContactJsonLd } from 'next-seo';
export default () => (
<>
Corporate Contact JSON-LD
);
```
**Required properties**
| Property | Info |
| -------------------------- | ----------------------------------------------------------------------------------------------- |
| `url` | Url to the home page of the company's official site. |
| `contactPoint` | |
| `contactPoint.telephone` | An internationalized version of the phone number, starting with the "+" symbol and country code |
| `contactPoint.contactType` | Description of the purpose of the phone number i.e. `Technical Support`. |
**Recommended ContactPoint properties**
| Property | Info |
| -------------------------------- | ---------------------------------------------------------------------------------------------------------- |
| `contactPoint.areaServed` | `String` or `Array` of geographical regions served by the business. Example `"US"` or `["US", "CA", "MX"]` |
| `contactPoint.availableLanguage` | Details about the language spoken. Example `"English"` or `["English", "French"]` |
| `gecontactPointo.contactOption` | Details about the phone number. Example `"TollFree"` |
### FAQ Page
```jsx
import React from 'react';
import { FAQPageJsonLd } from 'next-seo';
export default () => (
<>
FAQ Page JSON-LD
);
```
**Required properties**
| Property | Info |
| ------------------------------- | ----------------------------------------------------------------------------- |
| `mainEntity` | |
| `mainEntity.questionName` | The full text of the question. For example, "How long is the delivery time?". |
| `mainEntity.acceptedAnswerText` | The full answer to the question. |
### Job Posting
```jsx
import React from 'react';
import { JobPostingJsonLd } from 'next-seo';
export default () => (
<>
Job Posting JSON-LD
);
```
**Required properties**
| Property | Info |
| ----------------------------- | ------------------------------------------------------------------------------------------------------ |
| `datePosted` | The original date that employer posted the job in ISO 8601 format |
| `description` | The full description of the job in HTML format |
| `hiringOrganization` | |
| `hiringOrganization.name` | Name of the company offering the job position |
| `hiringOrganization.sameAs` | URL of a reference Web page |
| `jobLocation` | |
| `jobLocation.streetAddress` | The street address. For example, 1600 Amphitheatre Pkwy |
| `jobLocation.addressLocality` | The locality. For example, Mountain View. |
| `jobLocation.addressRegion` | The region. For example, CA. |
| `jobLocation.postalCode` | The postal code. For example, 94043 |
| `jobLocation.addressCountry` | The country. For example, USA. You can also provide the two-letter ISO 3166-1 alpha-2 country code. |
| `title` | The title of the job (not the title of the posting) |
| `validThrough` | The date when the job posting will expire in [ISO 8601 format](https://en.wikipedia.org/wiki/ISO_8601) |
**Supported properties**
| Property | Info |
| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| `applicantLocationRequirements` | The geographic location(s) in which employees may be located for to be eligible for the remote job |
| `baseSalary` | |
| `baseSalary.currency` | The currency in which the monetary amount is expressed |
| `baseSalary.value` | The value of the quantitative value |
| `baseSalary.unitText` | A string indicating the unit of measurement [Base salary guideline](https://developers.google.com/search/docs/data-types/job-posting#basesalary) |
| `employmentType` | Type of employment [Employement type guideline](https://developers.google.com/search/docs/data-types/job-posting#basesalary) | |
| `jobLocationType` | A description of the job location [Job Location type guideline](https://developers.google.com/search/docs/data-types/job-posting#job-location-type) |
### Local Business
Local business is supported with a sub-set of properties.
```jsx
```
**Required properties**
| Property | Info |
| ------------------------- | -------------------------------------------------------------------------- |
| `@id` | Globally unique ID of the specific business location in the form of a URL. |
| `type` | LocalBusiness or any sub-type |
| `address` | Address of the specific business location |
| `address.addressCountry` | The 2-letter ISO 3166-1 alpha-2 country code |
| `address.addressLocality` | City |
| `address.addressRegion` | State or province, if applicable. |
| `address.postalCode` | Postal or zip code. |
| `address.streetAddress` | Street number, street name, and unit number. |
| `name` | Business name. |
**Supported properties**
| Property | Info |
| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| `description` | Description of the business location |
| `geo` | Geographic coordinates of the business. |
| `geo.latitude` | The latitude of the business location |
| `geo.longitude` | The longitude of the business location |
| `rating` | The average rating of business based on multiple ratings or reviews. |
| `rating.ratingValue` | The rating for the content. |
| `rating.ratingCount` | The count of total number of ratings. |
| `priceRange` | The relative price range of the business. |
| `images` | An image or images of the business. Required for valid markup depending on the type |
| `telephone` | A business phone number meant to be the primary contact method for customers. |
| `url` | The fully-qualified URL of the specific business location. |
| `sameAs` | An array of URLs that represent this business |
| `openingHours` | Opening hour specification of business. You can provide this as a single object, or an array of objects with the properties below. |
| `openingHours.opens` | The opening hour of the place or service on the given day(s) of the week. |
| `openingHours.closes` | The closing hour of the place or service on the given day(s) of the week. |
| `openingHours.dayOfWeek` | The day of the week for which these opening hours are valid. Can be a string or array of strings. Refer to [DayOfWeek](https://schema.org/DayOfWeek) |
| `openingHours.validFrom` | The date when the item becomes valid. |
| `openingHours.validThrough` | The date after when the item is not valid. |
**NOTE:**
Images are required for most of the types that you can use for `LocalBusiness`, if in doubt you should add an image. You can check your generated JSON over at Google's [Structured Data Testing Tool](https://search.google.com/structured-data/testing-tool)
### Logo
```jsx
import React from 'react';
import { LogoJsonLd } from 'next-seo';
export default () => (
<>
Logo JSON-LD
);
```
| Property | Info |
| -------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| `url` | The URL of the website associated with the logo. [Logo guidelines](https://developers.google.com/search/docs/data-types/logo#definitions) |
| `logo` | URL of a logo that is representative of the organization. |
### Product
```jsx
import React from 'react';
import { ProductJsonLd } from 'next-seo';
export default () => (
<>
Product JSON-LD
);
```
Also available: `sku`, `gtin8`, `gtin13`, `gtin14`.
Valid values for `offers.itemCondition`:
- https://schema.org/DamagedCondition
- https://schema.org/NewCondition
- https://schema.org/RefurbishedCondition
- https://schema.org/UsedCondition
Valid values fro `offers.availability`:
- https://schema.org/Discontinued
- https://schema.org/InStock
- https://schema.org/InStoreOnly
- https://schema.org/LimitedAvailability
- https://schema.org/OnlineOnly
- https://schema.org/OutOfStock
- https://schema.org/PreOrder
- https://schema.org/PreSale
- https://schema.org/SoldOut
More info on the product data type can be found [here](https://developers.google.com/search/docs/data-types/product).
### Social Profile
```jsx
import React from 'react';
import { SocialProfileJsonLd } from 'next-seo';
export default () => (
<>
Social Profile JSON-LD
);
```
**Required properties**
| Property | Info |
| -------- | ----------------------------------------------------------------------------------------- |
| `type` | Person or Organization |
| `name` | The name of the person or organization |
| `url` | The URL for the person's or organization's official website. |
| `sameAs` | An array of URLs for the person's or organization's official social media profile page(s) |
**Google Supported Social Profiles**
- Facebook
- Twitter
- Google+
- Instagram
- YouTube
- LinkedIn
- Myspace
- Pinterest
- SoundCloud
- Tumblr
### News Article
```jsx
import React from 'react';
import { NewsArticleJsonLd } from 'next-seo';
export default () => (
<>
News Article JSON-LD
);
```
[Google Docs for Social Profile](https://developers.google.com/search/docs/data-types/social-profile)
### Event
```jsx
import React from 'react';
import { EventJsonLd } from 'next-seo';
export default () => (
<>
Event JSON-LD
);
```
**Required properties**
| Property | Info |
| ----------- | -------------------------------------------------- |
| `name` | The name of the event |
| `startDate` | The start date time of the event in iso8601 format |
| `endDate` | The end date time of the event in iso8601 format |
| `location` | Place type with a nested Address type |
**Supported properties**
| Property | Info |
| ----------------- | ------------------------------------- |
| `description` | Description of the event |
| `location.sameAs` | Description of the event location |
| `images` | An image or images of the event. |
| `url` | The fully-qualified URL of the event. |
## Contributors
Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
