From 8e4545a3828d1cb19a3074c41ac7bffa78343248 Mon Sep 17 00:00:00 2001 From: Johan Eliasson Date: Thu, 15 Feb 2024 17:45:51 +0100 Subject: [PATCH] Update README.md (#1351) --- README.md | 118 +++++++++++++++++++++++++++--------------------------- 1 file changed, 59 insertions(+), 59 deletions(-) diff --git a/README.md b/README.md index 55c5ff3c..d3606bd5 100644 --- a/README.md +++ b/README.md @@ -25,9 +25,9 @@ Coffee fuels coding ☕️ This note is only relevant if using the `app` directory. -For standard meta data (eg: , ) then it is highly recommended that you use the built in `generateMetaData` method. You can check out the docs [here](https://beta.nextjs.org/docs/guides/seo#usage) +For standard meta data (e.g., <meta>, <title>) then it is highly recommended that you use the built-in `generateMetaData` method. You can check out the docs [here](https://beta.nextjs.org/docs/guides/seo#usage) -For JSON-LD then the only change needed is you should add `useAppDir={true}` to the JSON-LD component in use. You should add use this component in your `page.js` and NOT your `head.js`. +For JSON-LD then, the only change needed is to add `useAppDir={true}` to the JSON-LD component in use. You should add use this component in your `page.js` and NOT your `head.js`. ``` <ArticleJsonLd @@ -114,7 +114,7 @@ If you are using **`pages`** directory then `NextSeo` is **exactly what you need ## Usage -`NextSeo` 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. +`NextSeo` 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. ### Setup @@ -136,13 +136,13 @@ yarn add next-seo **Using Next.js app directory introduced in Next.js 13?** -If you are using Next.js app directory then it is highly recommended that you use the built in `generateMetaData` method. You can check out the docs [here](https://beta.nextjs.org/docs/guides/seo#usage) +If you are using the Next.js app directory, then it is highly recommended that you use the built-in `generateMetaData` method. You can check out the docs [here](https://beta.nextjs.org/docs/guides/seo#usage) -If you are using `pages` directory then `NextSeo` is exactly what you need for your SEO needs! +If you are using the `pages` directory, then `NextSeo` is exactly what you need for your SEO needs! --- -Then you need to import `NextSeo` and add the desired properties. This will render out the tags in the `<head>` for SEO. At a bare minimum, you should add a title and description. +Then, you need to import `NextSeo` and add the desired properties. This will render out the tags in the `<head>` for SEO. At a bare minimum, you should add a title and description. **Example with just title and description:** @@ -218,13 +218,13 @@ Props `cardType`, `site`, `handle` are equivalent to `twitter:card`, `twitter:si Twitter will read the `og:title`, `og:image` and `og:description` tags for their card. `next-seo` omits `twitter:title`, `twitter:image` and `twitter:description` to avoid duplication. -Some tools may report this an error. See [Issue #14](https://github.com/garmeeh/next-seo/issues/14) +Some tools may report this as an error. See [Issue #14](https://github.com/garmeeh/next-seo/issues/14) ### Default SEO Configuration -`NextSeo` 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. +`NextSeo` 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 `<App>`. In your pages directory create a new file, `_app.js`. See the Next.js docs [here](https://nextjs.org/docs/advanced-features/custom-app) for more info on a custom `<App>`. +To achieve this, you will need to create a custom `<App>`. In your pages directory, create a new file, `_app.js`. See the Next.js docs [here](https://nextjs.org/docs/advanced-features/custom-app) for more info on a custom `<App>`. Within this file you will need to import `DefaultSeo` from `next-seo` and pass it props. @@ -262,7 +262,7 @@ export default class MyApp extends App { } ``` -To work properly, `DefaultSeo` should be placed above (before) `Component` due to behavior of Next.js internals. +To work properly, `DefaultSeo` should be placed above (before) `Component` due to the behavior of Next.js internals. Alternatively, you can also create a config file to store default values such as `next-seo.config.js` @@ -320,7 +320,7 @@ and the `DefaultSeo` component can be used like this instead <DefaultSeo {...SEO} /> ``` -From now on all of your pages will have the defaults above applied. +From now on, all of your pages will have the defaults above applied. **Note that `Container` is deprecated in Next.js v9.0.4 so you should replace that component here with `React.Fragment` on this version and later - see [here](https://github.com/zeit/next.js/blob/master/errors/app-container-deprecated.md)** @@ -423,13 +423,13 @@ export default Page; #### dangerouslySetAllPagesToNoIndex -It has the prefix of `dangerously` because it will `noindex` 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 `noindex` **EVERY** page. You can still override this at a page level if you have a use case to `index` a page. This can be done by setting `noindex: false`. +It has the prefix `dangerously` because it will `noindex` 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 `noindex` **EVERY** page. You can still override this at a page level if you have a use case to `index` a page. This can be done by setting `noindex: false`. -The only way to unset this, is by removing the prop from the `DefaultSeo` in your custom `<App>`. +The only way to unset this is by removing the prop from the `DefaultSeo` in your custom `<App>`. #### No Follow -Setting this to `true` will set `index,nofollow` (to set `noindex`, please refer to [`noindex`](#no-index)). This works on a page by page basis. This property works in tandem with the `noindex` property and together they populate the `robots` meta tag. +Setting this to `true` will set `index,nofollow` (to set `noindex`, please refer to [`noindex`](#no-index)). This works on a page-by-page basis. This property works in tandem with the `noindex` property, and together, they populate the `robots` meta tag. **Note:** Unlike for the other properties, setting `noindex` and `nofollow` by default does not work as expected. This is because Next SEO has a default of `index,follow`, since `next-seo` is an SEO plugin after all. If you want to globally allow these properties, see [dangerouslySetAllPagesToNoIndex](#dangerouslySetAllPagesToNoIndex) and [dangerouslySetAllPagesToNoFollow](#dangerouslySetAllPagesToNoFollow). @@ -456,7 +456,7 @@ export default Page; #### 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`. +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 `<App>`. @@ -522,9 +522,9 @@ For more reference about the `X-Robots-Tag` visit [Google Search Central - Contr 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) +Some tools may report this as an error. See [Issue #14](https://github.com/garmeeh/next-seo/issues/14) -#### facebook +#### Facebook ```jsx facebook={{ @@ -532,11 +532,11 @@ facebook={{ }} ``` -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/) +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. +Add this on a page-per-page basis when you want to consolidate duplicate URLs. ```js canonical = 'https://www.canonical.ie/'; @@ -600,11 +600,11 @@ additionalMetaTags={[{ }]} ``` -One thing to note on this is that it currently only supports unique tags, unless you use the `keyOverride` prop to provide a unique [key](https://reactjs.org/docs/lists-and-keys.html#keys) to each additional meta tag. +One thing to note on this is that it currently only supports unique tags unless you use the `keyOverride` prop to provide a unique [key](https://reactjs.org/docs/lists-and-keys.html#keys) to each additional meta tag. The default behaviour (without a `keyOverride` prop) is to render one tag per unique `name` / `property` / `httpEquiv`. The last one defined will be rendered. -For example if you pass 2 tags with the same `property`: +For example, if you pass 2 tags with the same `property`: ```js additionalMetaTags={[{ @@ -747,7 +747,7 @@ export default Page; **Note** -Multiple images is available from next.js version `7.0.0-canary.0` +Multiple images are available from next.js 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: @@ -820,7 +820,7 @@ export default Page; **Note** -Multiple images is available from next.js version `7.0.0-canary.0` +Multiple images are available from next.js 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: @@ -916,7 +916,7 @@ export default Page; **Note** -Multiple images, authors, tags is available from next.js version `7.0.0-canary.0` +Multiple images, authors, and tags are available from next.js 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: @@ -990,7 +990,7 @@ export default Page; **Note** -Multiple images, authors, tags is available from next.js version `7.0.0-canary.0` +Multiple images, authors, and tags are available from next.js 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: @@ -1061,7 +1061,7 @@ export default Page; **Note** -Multiple images is available from next.js version `7.0.0-canary.0` +Multiple images are available from next.js 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: @@ -1080,11 +1080,11 @@ Supplying multiple images will not break anything, but only one will be added to ## 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. +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 -> [HERE](https://developers.google.com/search/docs/data-types/article) -**If using app directory then please ensure to add `useAppDir={true}` prop and that you are using the component in the `page.js`** +**If using the app directory then please ensure to add `useAppDir={true}` prop and that you are using the component in the `page.js`** Below you will find a very basic page implementing each of the available JSON-LD types: @@ -1106,7 +1106,7 @@ Below you will find a very basic page implementing each of the available JSON-LD - [News Article](#news-article) - [Park](#park) -Pull request very welcome to add any from the list [found on here](https://developers.google.com/search/docs/data-types/article) +Pull requests are very welcome to add any from the list [found here](https://developers.google.com/search/docs/data-types/article) #### JSON-LD Security @@ -1216,7 +1216,7 @@ export default Page; | `itemListElements.item` | The URL to the webpage that represents the breadcrumb. | **Other** -| `useAppDir` | This should be set to true if using new app directory. Not required if outside of app directory. | +| `useAppDir` | This should be set to true if using the new app directory. Not required if outside of the app directory. | ### Blog @@ -1347,7 +1347,7 @@ export default Page; | `rating.ratingCount` | The count of total number of ratings. | **Other** -| `useAppDir` | This should be set to true if using new app directory. Not required if outside of app directory. | +| `useAppDir` | This should be set to true if using the new app directory. Not required if outside of the app directory. | ### Recipe @@ -1444,7 +1444,7 @@ export default Page; | `instructions.text` | The directions of the instruction step. | **Other** -| `useAppDir` | This should be set to true if using new app directory. Not required if outside of app directory. | +| `useAppDir` | This should be set to true if using the new app directory. Not required if outside of the app directory. | ### Sitelinks Search Box @@ -1483,7 +1483,7 @@ export default Page; | `potentialActions.queryInput` | Placeholder used in target, gets substituted for user given query | **Other** -| `useAppDir` | This should be set to true if using new app directory. Not required if outside of app directory. | +| `useAppDir` | This should be set to true if using the new app directory. Not required if outside of the app directory. | Read the [documentation](https://developers.google.com/search/docs/appearance/structured-data/sitelinks-searchbox) @@ -1525,7 +1525,7 @@ export default Page; | `providerUrl` | The url to the course provider. | **Other** -| `useAppDir` | This should be set to true if using new app directory. Not required if outside of app directory. | +| `useAppDir` | This should be set to true if using the new app directory. Not required if outside of the app directory. | ### Dataset @@ -1560,7 +1560,7 @@ export default Page; | `license` | The url to the course provider. | **Other** -| `useAppDir` | This should be set to true if using new app directory. Not required if outside of app directory. | +| `useAppDir` | This should be set to true if using the new app directory. Not required if outside of the app directory. | ### Corporate Contact @@ -1622,7 +1622,7 @@ export default Page; | `gecontactPointo.contactOption` | Details about the phone number. Example `"TollFree"` | **Other** -| `useAppDir` | This should be set to true if using new app directory. Not required if outside of app directory. | +| `useAppDir` | This should be set to true if using the new app directory. Not required if outside of the app directory. | ### FAQ Page @@ -1659,7 +1659,7 @@ export default Page; | `mainEntity.acceptedAnswerText` | The full answer to the question. | **Other** -| `useAppDir` | This should be set to true if using new app directory. Not required if outside of app directory. | +| `useAppDir` | This should be set to true if using the new app directory. Not required if outside of the app directory. | ### How-to @@ -1718,7 +1718,7 @@ export default Page; | `totalTime` | The total time required to perform all instructions or directions (including time to prepare the supplies), in ISO 8601 duration format. | **Other** -| `useAppDir` | This should be set to true if using new app directory. Not required if outside of app directory. | +| `useAppDir` | This should be set to true if using the new app directory. Not required if outside of the app directory. | ### Job Posting @@ -1803,7 +1803,7 @@ export default Page; | `experienceRequirements.experienceInPlaceOfEducation` | Boolean: If set to true, this property indicates whether a job posting will accept experience in place of its formal educational qualifications. If set to true, you must include both the experienceRequirements and educationRequirements properties. | **Other** -| `useAppDir` | This should be set to true if using new app directory. Not required if outside of app directory. | +| `useAppDir` | This should be set to true if using the new app directory. Not required if outside of the app directory. | ### Local Business @@ -2004,11 +2004,11 @@ Local business is supported with a sub-set of properties. | `action.target` | Indicates a target EntryPoint for an Action. | **Other** -| `useAppDir` | This should be set to true if using new app directory. Not required if outside of app directory. | +| `useAppDir` | This should be set to true if using the new app directory. Not required if outside of the app directory. | **NOTE:** -Images are recommended 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) +Images are recommended 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 @@ -2034,7 +2034,7 @@ export default Page; | `logo` | URL of a logo that is representative of the organization. | **Other** -| `useAppDir` | This should be set to true if using new app directory. Not required if outside of app directory. | +| `useAppDir` | This should be set to true if using the new app directory. Not required if outside of the app directory. | ### Product @@ -2157,7 +2157,7 @@ The property `aggregateOffer` is also available: | `offers` | An offer to transfer some rights to an item or to provide a service. You can provide this as a single object, or an array of objects with the properties below. | **Other** -| `useAppDir` | This should be set to true if using new app directory. Not required if outside of app directory. | +| `useAppDir` | This should be set to true if using the new app directory. Not required if outside of the app directory. | More info on the product data type can be found [here](https://developers.google.com/search/docs/data-types/product). @@ -2196,7 +2196,7 @@ export default Page; | `sameAs` | An array of URLs for the person's or organization's official social media profile page(s) | **Other** -| `useAppDir` | This should be set to true if using new app directory. Not required if outside of app directory. | +| `useAppDir` | This should be set to true if using the new app directory. Not required if outside of the app directory. | **Google Supported Social Profiles** @@ -2327,7 +2327,7 @@ export default Page; | `isAccessibleForFree` | Whether or not the park is accessible for free. | **Other** -| `useAppDir` | This should be set to true if using new app directory. Not required if outside of app directory. | +| `useAppDir` | This should be set to true if using the new app directory. Not required if outside oft the app directory. | [Google Docs for Social Profile](https://developers.google.com/search/docs/data-types/social-profile) @@ -2393,7 +2393,7 @@ export default Page; | `regionsAllowed` | The regions where the video is allowed. | **Other** -| `useAppDir` | This should be set to true if using new app directory. Not required if outside of app directory. | +| `useAppDir` | This should be set to true if using the new app directory. Not required if outside of the app directory. | ### VideoGame @@ -2484,7 +2484,7 @@ export default Page; | `name` | The title of the video game. | **Other** -| `useAppDir` | This should be set to true if using new app directory. Not required if outside of app directory. | +| `useAppDir` | This should be set to true if using the new app directory. Not required if outside of the app directory. | [More information about the schema](https://schema.org/VideoGame) @@ -2572,7 +2572,7 @@ export default Page; | `location` | Location of the event, can be `Place` or `VirtualLocation` | **Other** -| `useAppDir` | This should be set to true if using new app directory. Not required if outside of app directory. | +| `useAppDir` | This should be set to true if using the new app directory. Not required if outside of the app directory. | **`Place` type** Requires `address` property and `name`. @@ -2654,7 +2654,7 @@ For reference and more info check [Google's Search Event DataType](https://devel ### Q&A -Q&A pages are web pages that contain data in a question and answer format, which is one question followed by its answers. +Q&A pages are web pages that contain data in a question-and-answer format, which is one question followed by its answers. ```jsx import { QAPageJsonLd } from 'next-seo'; @@ -2714,7 +2714,7 @@ export default Page; | `mainEntity` | The Question for this page must be nested under the mainEntity property of the QAPageJsonld component. | **Other** -| `useAppDir` | This should be set to true if using new app directory. Not required if outside of app directory. | +| `useAppDir` | This should be set to true if using the new app directory. Not required if outside of the app directory. | **`mainEntity` Required properties** @@ -2752,7 +2752,7 @@ For reference and more info check [Google's Search Q&A DataType](https://develop ### Collection Page -Collection pages are web pages. Every web page is implicitly assumed to be declared to be of type WebPage, so the various properties about that webpage, such as breadcrumb may be used. We recommend explicit declaration if these properties are specified, but if they are found outside of an itemscope, they will be assumed to be about the page. +Collection pages are web pages. Every web page is implicitly assumed to be declared to be of type WebPage, so the various properties about that webpage, such as breadcrumb may be used. We recommend explicit declaration if these properties are specified, but if they are found outside of an item scope, they will be assumed to be about the page. ```jsx import { CollectionPageJsonLd } from 'next-seo'; @@ -2802,7 +2802,7 @@ export default Page; | `hasPart.creativeWork` | The most generic kind of [creative work](https://schema.org/CreativeWork), including books, movies, photographs, software programs, etc | **Other** -| `useAppDir` | This should be set to true if using new app directory. Not required if outside of app directory. | +| `useAppDir` | This should be set to true if using the new app directory. Not required if outside of the app directory. | **`creativeWork` Required properties** @@ -2826,7 +2826,7 @@ For reference and more info check [Collection Page DataType](https://schema.org/ ### Profile page -Profile pages are web pages. Every web page is implicitly assumed to be declared to be of type WebPage, so the various properties about that webpage, such as breadcrumb may be used. We recommend explicit declaration if these properties are specified, but if they are found outside of an itemscope, they will be assumed to be about the page. +Profile pages are web pages. Every web page is implicitly assumed to be declared to be of type WebPage, so the various properties about that webpage, such as breadcrumb may be used. We recommend explicit declaration if these properties are specified, but if they are found outside of an item scope, they will be assumed to be about the page. ```jsx import { ProfilePageJsonLd } from 'next-seo'; @@ -2882,7 +2882,7 @@ For reference and more info check [Profile Page DataType](https://schema.org/Pro | `data` | The data in the form of an array for the item list in the carousel | **Other** -| `useAppDir` | This should be set to true if using new app directory. Not required if outside of app directory. | +| `useAppDir` | This should be set to true if using the new app directory. Not required if outside of the app directory. | #### Default (Summary List) @@ -3281,7 +3281,7 @@ export default () => ( | `review` | A single review of the app. (Not required if aggregateRating is present.) | **Other** -| `useAppDir` | This should be set to true if using new app directory. Not required if outside of app directory. | +| `useAppDir` | This should be set to true if using the new app directory. Not required if outside of the app directory. | **Data Recommended properties** @@ -3379,7 +3379,7 @@ export default () => ( | `contactPoint.email` | Email asscosiated with the business` | **Other** -| `useAppDir` | This should be set to true if using new app directory. Not required if outside of app directory. | +| `useAppDir` | This should be set to true if using the new app directory. Not required if outside of the app directory. | For reference and more info check [Docs](https://schema.org/Organization) @@ -3424,7 +3424,7 @@ export default () => ( | `aggregateRating.worstRating` | The lowest value allowed in this rating system. If worstRating is omitted, 1 is assumed. | **Other** -| `useAppDir` | This should be set to true if using new app directory. Not required if outside of app directory. | +| `useAppDir` | This should be set to true if using the new app directory. Not required if outside of the app directory. | For reference and more info check [Docs](https://schema.org/Brand) @@ -3466,7 +3466,7 @@ export default () => ( | `reviewedBy.name` | Name of the entity that have reviewed the content on this web page for accuracy and/or completeness. | **Other** -| `useAppDir` | This should be set to true if using new app directory. Not required if outside of app directory. | +| `useAppDir` | This should be set to true if using the new app directory. Not required if outside of the app directory. | For reference and more info check [Docs](https://schema.org/WebPage) @@ -3514,7 +3514,7 @@ export default Image; | `acquireLicensePage` | A URL to a page where the user can find information on how to license that image. | **Other** -| `useAppDir` | This should be set to true if using new app directory. Not required if outside of app directory. | +| `useAppDir` | This should be set to true if using the new app directory. Not required if outside of the app directory. | For reference and more info check [Google Docs](https://developers.google.com/search/docs/appearance/structured-data/image-license-metadata)