Add JSON LD logo support (#25)

Implement logo as found in the [google structure data documentation](https://developers.google.com/search/docs/data-types/logo)

Related to #23

README.md

@@ -571,6 +571,35 @@ export default () => (
 );
 ```
 
+### Logo
+
+```jsx
+import React from 'react';
+import { LogoJsonLd } from 'next-seo';
+
+export default () => (
+  <>
+    <h1>Logo JSON-LD</h1>
+    <LogoJsonLd
+      logo="http://www.your-site.com/images/logo.jpg"
+      url="http://www.your-site.com"
+    />
+  </>
+);
+```
+
+**Required properties**
+
+| 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

e2e/cypress/e2e/jsonld.spec.js

@@ -1,7 +1,7 @@
 import { assertSchema } from '@cypress/schema-tools';
 import schemas from '../schemas';
 
-const expectedJSONResults = 5;
+const expectedJSONResults = 6;
 
 describe('Validates JSON-LD For:', () => {
   it('Article', () => {
@@ -122,12 +122,37 @@ describe('Validates JSON-LD For:', () => {
       });
   });
 
-  it('Product', () => {
+  it('Logo', () => {
     cy.visit('http://localhost:3000/jsonld');
     cy.get('head script[type="application/ld+json"]')
       .should('have.length', expectedJSONResults)
       .then(tags => {
         const jsonLD = JSON.parse(tags[3].innerHTML);
+        assertSchema(schemas)('Logo', '1.0.0')(jsonLD);
+      });
+  });
+
+  it('Logo Matches', () => {
+    cy.visit('http://localhost:3000/jsonld');
+    cy.get('head script[type="application/ld+json"]')
+      .should('have.length', expectedJSONResults)
+      .then(tags => {
+        const jsonLD = JSON.parse(tags[3].innerHTML);
+        expect(jsonLD).to.deep.equal({
+          '@context': 'http://schema.org',
+          '@type': 'Organization',
+          url: 'http://www.your-site.com',
+          logo: 'http://www.your-site.com/images/logo.jpg',
+        });
+      });
+  });
+
+  it('Product', () => {
+    cy.visit('http://localhost:3000/jsonld');
+    cy.get('head script[type="application/ld+json"]')
+      .should('have.length', expectedJSONResults)
+      .then(tags => {
+        const jsonLD = JSON.parse(tags[4].innerHTML);
         assertSchema(schemas)('Product', '1.0.0')(jsonLD);
       });
   });
@@ -137,7 +162,7 @@ describe('Validates JSON-LD For:', () => {
     cy.get('head script[type="application/ld+json"]')
       .should('have.length', expectedJSONResults)
       .then(tags => {
-        const jsonLD = JSON.parse(tags[3].innerHTML);
+        const jsonLD = JSON.parse(tags[4].innerHTML);
         expect(jsonLD).to.deep.equal({
           '@context': 'http://schema.org/',
           '@type': 'Product',
@@ -196,7 +221,7 @@ describe('Validates JSON-LD For:', () => {
     cy.get('head script[type="application/ld+json"]')
       .should('have.length', expectedJSONResults)
       .then(tags => {
-        const jsonLD = JSON.parse(tags[4].innerHTML);
+        const jsonLD = JSON.parse(tags[5].innerHTML);
         assertSchema(schemas)('Social Profile', '1.0.0')(jsonLD);
       });
   });
@@ -206,7 +231,7 @@ describe('Validates JSON-LD For:', () => {
     cy.get('head script[type="application/ld+json"]')
       .should('have.length', expectedJSONResults)
       .then(tags => {
-        const jsonLD = JSON.parse(tags[4].innerHTML);
+        const jsonLD = JSON.parse(tags[5].innerHTML);
         expect(jsonLD).to.deep.equal({
           '@context': 'http://schema.org',
           '@type': 'Person',

e2e/cypress/schemas/index.js

@@ -2,13 +2,15 @@ import { combineSchemas } from '@cypress/schema-tools';
 import courseVersions from './course-schema';
 import articleVersions from './article-schema';
 import blogVersions from './blog-schema';
+import logoVersions from './logo-schema';
 import productVersions from './product-schema';
 import socialProfileVersions from './social-profile-schema';
 
 const schemas = combineSchemas(
   courseVersions,
   articleVersions,
   blogVersions,
+  logoVersions,
   productVersions,
   socialProfileVersions,
 );

e2e/cypress/schemas/logo-schema.js

@@ -0,0 +1,44 @@
+import { versionSchemas } from '@cypress/schema-tools';
+
+const logo100 = {
+  version: {
+    major: 1,
+    minor: 0,
+    patch: 0,
+  },
+  schema: {
+    type: 'object',
+    title: 'Logo',
+    description: 'An example schema describing JSON-LD for type: Logo',
+    properties: {
+      '@context': {
+        type: 'string',
+        description: 'Schema.org context',
+      },
+      '@type': {
+        type: 'string',
+        description: 'Organization',
+      },
+      logo: {
+        type: 'string',
+        description:
+          'URL of a logo that is representative of the organization.',
+      },
+      url: {
+        type: 'string',
+        description: 'The URL of the website associated with the logo.',
+      },
+    },
+    required: true,
+    additionalProperties: false,
+  },
+  example: {
+    '@context': 'http://schema.org',
+    '@type': 'Organization',
+    url: 'http://www.example.com',
+    logo: 'http://www.example.com/images/logo.png',
+  },
+};
+
+const logo = versionSchemas(logo100);
+export default logo;

e2e/pages/jsonld.jsx

@@ -3,6 +3,7 @@ import {
   ArticleJsonLd,
   BlogJsonLd,
   CourseJsonLd,
+  LogoJsonLd,
   ProductJsonLd,
   SocialProfileJsonLd,
 } from '../../dist';
@@ -48,6 +49,11 @@ export default () => (
       description="Course description goes right here"
     />
 
+    <LogoJsonLd
+      logo="http://www.your-site.com/images/logo.jpg"
+      url="http://www.your-site.com"
+    />
+
     <ProductJsonLd
       productName="Executive Anvil"
       images={[

src/index.js

@@ -2,6 +2,7 @@ import DefaultSeo from './meta/defaultSEO';
 import ArticleJsonLd from './jsonld/article';
 import BlogJsonLd from './jsonld/blog';
 import CourseJsonLd from './jsonld/course';
+import LogoJsonLd from './jsonld/logo';
 import ProductJsonLd from './jsonld/product';
 import SocialProfileJsonLd from './jsonld/socialProfile';
 
@@ -10,6 +11,7 @@ export {
   ArticleJsonLd,
   BlogJsonLd,
   CourseJsonLd,
+  LogoJsonLd,
   ProductJsonLd,
   SocialProfileJsonLd,
 };

src/jsonld/logo.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Head from 'next/head';
+
+import markup from '../utils/markup';
+
+const LogoJsonLd = ({ url, logo }) => {
+  const jslonld = `{
+    "@context": "http://schema.org",
+    "@type": "Organization",
+    "url": "${url}",
+    "logo": "${logo}"
+  }`;
+
+  return (
+    <Head>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={markup(jslonld)}
+        key="jsonld-logo"
+      />
+    </Head>
+  );
+};
+
+LogoJsonLd.propTypes = {
+  url: PropTypes.string.isRequired,
+  logo: PropTypes.string.isRequired,
+};
+
+export default LogoJsonLd;