Repository: garmeeh/next-seo
Pull request #34 (2018-12-29 22:06:02)

Support facebook meta (fb:app_id) to enable Facebook Insights
This metadata is used to enable facebook insights to work on your site: https://developers.facebook.com/docs/sharing/webmasters/#markup

You can see sites like amazon and twitch using this in markup as well (out of curiosity I checked a few sites), and if you google it you'll see requests for website building tools to support this.

(sorry about duplicate PR that I just closed on this - the commit history was messed up)


Patch:
diff --git a/README.md b/README.md
index 7fe0a44..45299c7 100644
--- a/README.md
+++ b/README.md
@@ -107,6 +107,16 @@ noindex: true;
 
 Add this to your default SEO if you wish to **no-index** your site. This is great when you are in a pre-release phase. This can also be used on a page per page basis.
 
+**facebook**
+
+```js
+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/)
+
 **titleTemplate**
 
 Replaces `%s` with your title string
@@ -478,7 +488,7 @@ export default () => (
         },
       }}
     />
-    <p>Book</p>
+    <p>Profile</p>
   </>
 );
 ```
diff --git a/src/meta/buildTags.jsx b/src/meta/buildTags.jsx
index 964e872..12d02e0 100644
--- a/src/meta/buildTags.jsx
+++ b/src/meta/buildTags.jsx
@@ -81,6 +81,18 @@ const buildTags = config => {
     }
   }
 
+  if (config.hasOwnProperty('facebook')) {
+    if (config.facebook.appId) {
+      tagsToRender.push(
+        <meta
+          key="fb:app_id"
+          name="fb:app_id"
+          content={config.facebook.appId}
+        />,
+      );
+    }
+  }
+
   if (config.hasOwnProperty('openGraph')) {
     if (config.openGraph.url) {
       tagsToRender.push(


Test patch:
diff --git a/e2e/cypress/e2e/seo.spec.js b/e2e/cypress/e2e/seo.spec.js
index 8726f2d..2aad456 100644
--- a/e2e/cypress/e2e/seo.spec.js
+++ b/e2e/cypress/e2e/seo.spec.js
@@ -96,6 +96,11 @@ describe('SEO Meta', () => {
       'content',
       'SiteName A',
     );
+    cy.get('head meta[name="fb:app_id"]').should(
+      'have.attr',
+      'content',
+      '1234567890',
+    );
     cy.get('head meta[name="twitter:site"]').should(
       'have.attr',
       'content',
@@ -209,6 +214,11 @@ describe('SEO Meta', () => {
       'content',
       'SiteName B',
     );
+    cy.get('head meta[name="fb:app_id"]').should(
+      'have.attr',
+      'content',
+      '987654321',
+    );
     cy.get('head meta[name="twitter:site"]').should(
       'have.attr',
       'content',
diff --git a/e2e/next-seo.config.js b/e2e/next-seo.config.js
index 6355b22..e9646d4 100644
--- a/e2e/next-seo.config.js
+++ b/e2e/next-seo.config.js
@@ -35,4 +35,7 @@ export default {
     site: '@sitea',
     cardType: 'summary_large_image',
   },
+  facebook: {
+    appId: 1234567890,
+  },
 };
diff --git a/e2e/pages/overridden.jsx b/e2e/pages/overridden.jsx
index a564818..59a61a5 100644
--- a/e2e/pages/overridden.jsx
+++ b/e2e/pages/overridden.jsx
@@ -37,6 +37,9 @@ export default () => (
           site: '@siteb',
           cardType: 'summary_large_image',
         },
+        facebook: {
+          appId: 987654321,
+        },
       }}
     />
     <h1>Overridden Seo</h1>
diff --git a/src/meta/__tests__/__snapshots__/buildTags.spec.jsx.snap b/src/meta/__tests__/__snapshots__/buildTags.spec.jsx.snap
index 67fe2dd..5faedf9 100644
--- a/src/meta/__tests__/__snapshots__/buildTags.spec.jsx.snap
+++ b/src/meta/__tests__/__snapshots__/buildTags.spec.jsx.snap
@@ -353,6 +353,10 @@ exports[`renders correctly 1`] = `
     content="@handle"
     name="twitter:creator"
   />
+  <meta
+    content="1234567890"
+    name="fb:app_id"
+  />
   <meta
     content="https://www.url.ie"
     property="og:url"
diff --git a/src/meta/__tests__/buildTags.spec.jsx b/src/meta/__tests__/buildTags.spec.jsx
index c2cc14d..1f7dd2a 100644
--- a/src/meta/__tests__/buildTags.spec.jsx
+++ b/src/meta/__tests__/buildTags.spec.jsx
@@ -32,6 +32,9 @@ const SEO = {
     site: '@site',
     cardType: 'summary_large_image',
   },
+  facebook: {
+    appId: 1234567890,
+  },
 };
 
 it('renders correctly', () => {
@@ -59,6 +62,7 @@ it('returns full array for default seo object', () => {
   const twitterCard = container.querySelectorAll(
     'meta[content="summary_large_image"]',
   );
+  const facebookAppId = container.querySelectorAll('meta[name="fb:app_id"]');
   const twitterCardTag = container.querySelectorAll(
     'meta[name="twitter:card"]',
   );
@@ -134,6 +138,7 @@ it('returns full array for default seo object', () => {
   expect(Array.from(index).length).toBe(2);
   expect(Array.from(description).length).toBe(1);
   expect(Array.from(descriptionTag).length).toBe(1);
+  expect(Array.from(facebookAppId).length).toBe(1);
   expect(Array.from(twitterCard).length).toBe(1);
   expect(Array.from(twitterCardTag).length).toBe(1);
   expect(Array.from(twitterHandle).length).toBe(1);