From 90710cc3d8ba8b94b7582c4cc063625b19c255ab Mon Sep 17 00:00:00 2001
From: matamatanot <39780486+matamatanot@users.noreply.github.com>
Date: Fri, 16 Oct 2020 05:23:59 +0900
Subject: [PATCH] [README] Named components and remove 'import react' (#506)

---
 README.md | 116 ++++++++++++++++++++++++++++++++----------------------
 1 file changed, 69 insertions(+), 47 deletions(-)

diff --git a/README.md b/README.md
index e9b870c6..a2ac0849 100644
--- a/README.md
+++ b/README.md
@@ -90,10 +90,9 @@ Then you need to import `NextSeo` and add the desired properties. This will rend
 **Example with just title and description:**
 
 ```jsx
-import React from 'react';
 import { NextSeo } from 'next-seo';
 
-export default () => (
+const Page = () => (
   <>
     <NextSeo
       title="Simple Usage Example"
@@ -102,6 +101,8 @@ export default () => (
     <p>Simple Usage</p>
   </>
 );
+
+export default Page;
 ```
 
 But `NextSeo` gives you many more options that you can add. See below for a typical example of a page.
@@ -109,10 +110,9 @@ But `NextSeo` gives you many more options that you can add. See below for a typi
 **Typical page example:**
 
 ```jsx
-import React from 'react';
 import { NextSeo } from 'next-seo';
 
-export default () => (
+const Page = () => (
   <>
     <NextSeo
       title="Using More of Config"
@@ -149,6 +149,8 @@ export default () => (
     <p>SEO Added to Page</p>
   </>
 );
+
+export default Page;
 ```
 
 **A note on Twitter Tags**
@@ -169,7 +171,6 @@ Here is a typical example:
 
 ```jsx
 import App, { Container } from 'next/app';
-import React from 'react';
 import { DefaultSeo } from 'next-seo';
 
 // import your default seo configuration
@@ -304,16 +305,17 @@ Setting this to `true` will set `noindex,follow` (to set `nofollow`, please refe
 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 () => (
+const Page = () => (
   <>
     <NextSeo noindex={true} />
     <p>This page is no indexed</p>
   </>
 );
 
+export default Page;
+
 /*
 <meta name="robots" content="noindex,follow">
 <meta name="googlebot" content="noindex,follow">
@@ -337,16 +339,17 @@ Setting this to `true` will set `index,nofollow` (to set `noindex`, please refer
 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 () => (
+const Page = () => (
   <>
     <NextSeo nofollow={true} />
     <p>This page is not followed</p>
   </>
 );
 
+export default Page;
+
 /*
 <meta name="robots" content="index,nofollow">
 <meta name="googlebot" content="index,nofollow">
@@ -487,10 +490,9 @@ Next SEO currently supports:
 #### Basic
 
 ```jsx
-import React from 'react';
 import { NextSeo } from 'next-seo';
 
-export default () => (
+const Page = () => (
   <>
     <NextSeo
       openGraph={{
@@ -517,6 +519,8 @@ export default () => (
     <p>Basic</p>
   </>
 );
+
+export default Page;
 ```
 
 **Note**
@@ -543,10 +547,9 @@ Supplying multiple images will not break anything, but only one will be added to
 Full info on [http://ogp.me/](http://ogp.me/#type_video)
 
 ```jsx
-import React from 'react';
 import { NextSeo } from 'next-seo';
 
-export default () => (
+const Page = () => (
   <>
     <NextSeo
       title="Video Page Title"
@@ -589,6 +592,8 @@ export default () => (
     <h1>Video Page SEO</h1>
   </>
 );
+
+export default Page;
 ```
 
 **Note**
@@ -613,10 +618,9 @@ Supplying multiple images will not break anything, but only one will be added to
 #### Article
 
 ```jsx
-import React from 'react';
 import { NextSeo } from 'next-seo';
 
-export default () => (
+const Page = () => (
   <>
     <NextSeo
       openGraph={{
@@ -648,6 +652,8 @@ export default () => (
     <p>Article</p>
   </>
 );
+
+export default Page;
 ```
 
 **Note**
@@ -688,10 +694,9 @@ Supplying multiple of any of the above will not break anything, but only one wil
 #### Book
 
 ```jsx
-import React from 'react';
 import { NextSeo } from 'next-seo';
 
-export default () => (
+const Page = () => (
   <>
     <NextSeo
       openGraph={{
@@ -721,6 +726,8 @@ export default () => (
     <p>Book</p>
   </>
 );
+
+export default Page;
 ```
 
 **Note**
@@ -761,10 +768,9 @@ Supplying multiple of any of the above will not break anything, but only one wil
 #### Profile
 
 ```jsx
-import React from 'react';
 import { NextSeo } from 'next-seo';
 
-export default () => (
+const Page = () => (
   <>
     <NextSeo
       openGraph={{
@@ -791,6 +797,8 @@ export default () => (
     <p>Profile</p>
   </>
 );
+
+export default Page;
 ```
 
 **Note**
@@ -851,10 +859,9 @@ Please fully research when you should and shouldn't add multiple instances of JS
 ### Article
 
 ```jsx
-import React from 'react';
 import { ArticleJsonLd } from 'next-seo';
 
-export default () => (
+const Page = () => (
   <>
     <h1>Article JSON-LD</h1>
     <ArticleJsonLd
@@ -874,15 +881,16 @@ export default () => (
     />
   </>
 );
+
+export default Page;
 ```
 
 ### Breadcrumb
 
 ```jsx
-import React from 'react';
 import { BreadcrumbJsonLd } from 'next-seo';
 
-export default () => (
+const Page = () => (
   <>
     <h1>Breadcrumb JSON-LD</h1>
     <BreadcrumbJsonLd
@@ -911,6 +919,8 @@ export default () => (
     />
   </>
 );
+
+export default Page;
 ```
 
 **Required properties**
@@ -925,10 +935,9 @@ export default () => (
 ### Blog
 
 ```jsx
-import React from 'react';
 import { BlogJsonLd } from 'next-seo';
 
-export default () => (
+const Page = () => (
   <>
     <h1>Blog JSON-LD</h1>
     <BlogJsonLd
@@ -946,15 +955,16 @@ export default () => (
     />
   </>
 );
+
+export default Page;
 ```
 
 ### Recipe
 
 ```jsx
-import React from 'react';
 import { RecipeJsonLd } from 'next-seo';
 
-export default () => (
+const Page = () => (
   <>
     <h1>Recipe JSON-LD</h1>
     <RecipeJsonLd
@@ -1015,6 +1025,8 @@ export default () => (
     />
   </>
 );
+
+export default Page;
 ```
 
 **Required properties**
@@ -1032,10 +1044,9 @@ export default () => (
 ### Course
 
 ```jsx
-import React from 'react';
 import { CourseJsonLd } from 'next-seo';
 
-export default () => (
+const Page = () => (
   <>
     <h1>Course JSON-LD</h1>
     <CourseJsonLd
@@ -1046,6 +1057,8 @@ export default () => (
     />
   </>
 );
+
+export default Page;
 ```
 
 **Required properties**
@@ -1065,10 +1078,9 @@ export default () => (
 ### Dataset
 
 ```jsx
-import React from 'react';
 import { DatasetJsonLd } from 'next-seo';
 
-export default () => (
+const Page = () => (
   <>
     <h1>Dataset JSON-LD</h1>
     <DatasetJsonLd
@@ -1078,6 +1090,8 @@ export default () => (
     />
   </>
 );
+
+export default Page;
 ```
 
 **Required properties**
@@ -1096,10 +1110,9 @@ export default () => (
 ### Corporate Contact
 
 ```jsx
-import React from 'react';
 import { CorporateContactJsonLd } from 'next-seo';
 
-export default () => (
+const Page = () => (
   <>
     <h1>Corporate Contact JSON-LD</h1>
     <CorporateContactJsonLd
@@ -1129,6 +1142,8 @@ export default () => (
     />
   </>
 );
+
+export default Page;
 ```
 
 **Required properties**
@@ -1151,10 +1166,9 @@ export default () => (
 ### FAQ Page
 
 ```jsx
-import React from 'react';
 import { FAQPageJsonLd } from 'next-seo';
 
-export default () => (
+const Page = () => (
   <>
     <h1>FAQ Page JSON-LD</h1>
     <FAQPageJsonLd
@@ -1171,6 +1185,8 @@ export default () => (
     />
   </>
 );
+
+export default Page;
 ```
 
 **Required properties**
@@ -1184,10 +1200,9 @@ export default () => (
 ### Job Posting
 
 ```jsx
-import React from 'react';
 import { JobPostingJsonLd } from 'next-seo';
 
-export default () => (
+const Page = () => (
   <>
     <h1>Job Posting JSON-LD</h1>
     <JobPostingJsonLd
@@ -1217,6 +1232,8 @@ export default () => (
     />
   </>
 );
+
+export default Page;
 ```
 
 **Required properties**
@@ -1348,10 +1365,9 @@ Images are recommended for most of the types that you can use for `LocalBusiness
 ### Logo
 
 ```jsx
-import React from 'react';
 import { LogoJsonLd } from 'next-seo';
 
-export default () => (
+const Page = () => (
   <>
     <h1>Logo JSON-LD</h1>
     <LogoJsonLd
@@ -1360,6 +1376,8 @@ export default () => (
     />
   </>
 );
+
+export default Page;
 ```
 
 | Property | Info                                                                                                                                      |
@@ -1370,10 +1388,9 @@ export default () => (
 ### Product
 
 ```jsx
-import React from 'react';
 import { ProductJsonLd } from 'next-seo';
 
-export default () => (
+const Page = () => (
   <>
     <h1>Product JSON-LD</h1>
     <ProductJsonLd
@@ -1438,6 +1455,8 @@ export default () => (
     />
   </>
 );
+
+export default Page;
 ```
 
 Also available: `sku`, `gtin8`, `gtin13`, `gtin14`.
@@ -1483,10 +1502,9 @@ More info on the product data type can be found [here](https://developers.google
 ### Social Profile
 
 ```jsx
-import React from 'react';
 import { SocialProfileJsonLd } from 'next-seo';
 
-export default () => (
+const Page = () => (
   <>
     <h1>Social Profile JSON-LD</h1>
     <SocialProfileJsonLd
@@ -1502,6 +1520,8 @@ export default () => (
     />
   </>
 );
+
+export default Page;
 ```
 
 **Required properties**
@@ -1529,10 +1549,9 @@ export default () => (
 ### News Article
 
 ```jsx
-import React from 'react';
 import { NewsArticleJsonLd } from 'next-seo';
 
-export default () => (
+const Page = () => (
   <>
     <h1>News Article JSON-LD</h1>
     <NewsArticleJsonLd
@@ -1555,6 +1574,8 @@ export default () => (
     />
   </>
 );
+
+export default Page;
 ```
 
 [Google Docs for Social Profile](https://developers.google.com/search/docs/data-types/social-profile)
@@ -1562,10 +1583,9 @@ export default () => (
 ### Event
 
 ```jsx
-import React from 'react';
 import { EventJsonLd } from 'next-seo';
 
-export default () => (
+const Page = () => (
   <>
     <h1>Event JSON-LD</h1>
     <EventJsonLd
@@ -1589,6 +1609,8 @@ export default () => (
     />
   </>
 );
+
+export default Page;
 ```
 
 **Required properties**