Add image meta tags

src/components/Layout.js

@@ -1,17 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Helmet from 'react-helmet'
 import classNames from 'classnames'
 import Navbar from './Navbar'
 import Footer from './Footer'
+import Meta from './Meta'
 import '../css/main.scss'
 
 const TemplateWrapper = ({ children, classes }) => (
   <div>
-    <Helmet
-      titleTemplate="%s | Det Norske Studentersamfund"
-      defaultTitle="Det Norske Studentersamfund"
-    />
+    <Meta />
     <Navbar />
     <main className={classNames(classes)}>{children}</main>
     <Footer />

src/components/Meta.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Helmet } from 'react-helmet';
+
+const Meta = ({ title, description, image, pathname, article }) => {
+    const imageUrl = image && image.localFile && image.localFile.url
+    const meta = {
+        title: title,
+        description: description,
+        image: imageUrl,
+        url: pathname,
+    }
+    return (
+        <Helmet
+            title={meta.title}
+            titleTemplate="%s | Det Norske Studentersamfund"
+            defaultTitle="Det Norske Studentersamfund"
+        >
+            {meta.description && <meta name="description" content={meta.description} />}
+            {meta.image && <meta name="image" content={meta.image} />}
+            {meta.url && <meta property="og:url" content={meta.url} />}
+            {(article ? true : null) && (
+                <meta property="og:type" content="article" />
+            )}
+            {meta.title && <meta property="og:title" content={meta.title} />}
+            {meta.description && (
+                <meta property="og:description" content={meta.description} />
+            )}
+            {meta.image && <meta property="og:image" content={meta.image} />}
+        </Helmet>
+    )
+}
+
+export default Meta
+
+Meta.propTypes = {
+    title: PropTypes.string,
+    description: PropTypes.string,
+    image: PropTypes.string,
+    pathname: PropTypes.string,
+    article: PropTypes.bool,
+}
+
+Meta.defaultProps = {
+    title: null,
+    description: null,
+    image: null,
+    pathname: null,
+    article: false,
+}

src/pages/404.js

@@ -1,10 +1,10 @@
 import React from 'react'
-import Helmet from 'react-helmet'
+import Meta from '../components/Meta'
 import Layout from '../components/Layout'
 
 const NotFoundPage = () => (
   <Layout>
-    <Helmet title="Ikke funnet" />
+    <Meta title="Ikke funnet" />
     <section className="page error error-404">
       <h1 className="section-title">404: Denne siden er på grisefest</h1>
       <p>Lykke til videre.</p>

src/pages/booking.js

@@ -1,7 +1,7 @@
 import React from 'react'
-import Helmet from 'react-helmet'
 import { graphql, useStaticQuery } from 'gatsby'
 import Img from 'gatsby-image'
+import Meta from '../components/Meta'
 import Layout from '../components/Layout'
 import { VenueTemplate } from '../templates/venue'
 
@@ -65,7 +65,7 @@ export const BookingPage = () => {
 
   return (
     <Layout>
-      <Helmet title="Utleie" />
+      <Meta title="Utleie" />
       <section className="booking-page">
         <h1 className="page-title">{title}</h1>
         <p className="lead">

src/pages/foreningene.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Helmet from 'react-helmet'
 import { graphql } from 'gatsby'
+import Meta from '../components/Meta'
 import Layout from '../components/Layout'
 import AssociationList from '../components/AssociationList'
 
@@ -12,7 +12,7 @@ export default class AssociationListPage extends React.Component {
 
     return (
       <Layout>
-        <Helmet title="Foreningene" />
+        <Meta title="Foreningene" />
         <AssociationList associations={associations} title="Foreningene" />
       </Layout>
     )

src/pages/profil.js

@@ -1,10 +1,10 @@
 import React from 'react'
-import Helmet from 'react-helmet'
+import Meta from '../components/Meta'
 import Layout from '../components/Layout'
 
 const DesignManual = () => (
   <Layout>
-    <Helmet title="Profil" />
+    <Meta title="Profil" />
     <section className="page design-manual-page">
       <h1 className="section-title">Profil</h1>
       <p>Hei</p>

src/pages/program.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Helmet from 'react-helmet'
 import { graphql } from 'gatsby'
+import Meta from '../components/Meta'
 import Layout from '../components/Layout'
 import EventList from '../components/EventList'
 
@@ -12,7 +12,7 @@ export default class EventProgram extends React.Component {
 
     return (
       <Layout>
-        <Helmet title="Program" />
+        <Meta title="Program" />
         <EventList
           events={events}
           preTitle="Program"

src/templates/association.js

@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { graphql } from 'gatsby'
 import Img from 'gatsby-image'
+import Meta from '../components/Meta'
 import Layout from '../components/Layout'
 
 export const AssociationTemplate = ({
@@ -21,8 +22,8 @@ export const AssociationTemplate = ({
           {featuredMedia.localFile.childImageSharp ? (
             <Img fluid={featuredMedia.localFile.childImageSharp.fluid} />
           ) : (
-            <img src={featuredMedia.localFile.url} alt={title} />
-          )}
+              <img src={featuredMedia.localFile.url} alt={title} />
+            )}
         </div>
       )}
       {homepage && (
@@ -51,6 +52,10 @@ const AssociationPage = ({ data }) => {
 
   return (
     <Layout>
+      <Meta
+        title={association.title}
+        image={association.featured_media}
+      />
       <AssociationTemplate
         title={association.title}
         content={association.content}

src/templates/author.js

@@ -1,6 +1,6 @@
 import React from 'react'
-import Helmet from 'react-helmet'
 import { graphql } from 'gatsby'
+import Meta from '../components/Meta'
 import Layout from '../components/Layout'
 import PostList from '../components/PostList'
 
@@ -23,7 +23,7 @@ const Author = props => {
 
   return (
     <Layout>
-      <Helmet title={name} />
+      <Meta title={name} />
       <PostList posts={posts} title={title} />
     </Layout>
   )

src/templates/blog.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Helmet from 'react-helmet'
 import { graphql } from 'gatsby'
+import Meta from '../components/Meta'
 import Layout from '../components/Layout'
 import PostList from '../components/PostList'
 import Pagination from '../components/Pagination'
@@ -13,7 +13,7 @@ export default class BlogPage extends React.Component {
 
     return (
       <Layout>
-        <Helmet title="Nyheter" />
+        <Meta title="Nyheter" />
         <PostList posts={posts} title="Nyheter" />
         <Pagination pageContext={pageContext} pathPrefix="/" />
       </Layout>

src/templates/category.js

@@ -1,6 +1,6 @@
 import React from 'react'
-import Helmet from 'react-helmet'
 import { graphql } from 'gatsby'
+import Meta from '../components/Meta'
 import Layout from '../components/Layout'
 import PostList from '../components/PostList'
 
@@ -14,7 +14,7 @@ const Category = props => {
 
   return (
     <Layout>
-      <Helmet title={category} />
+      <Meta title={category} />
       <PostList posts={posts} title={title} />
     </Layout>
   )

src/templates/event-organizer.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Helmet from 'react-helmet'
 import { graphql, Link } from 'gatsby'
 import moment from 'moment'
 import 'moment/locale/nb'
 
+import Meta from '../components/Meta'
 import Layout from '../components/Layout'
 import EventList from '../components/EventList'
 
@@ -18,7 +18,7 @@ export default class EventOrganizerPage extends React.Component {
 
     return (
       <Layout classes="event-organizer-page">
-        <Helmet title={`${name} | Program`} />
+        <Meta title={`${name} | Program`} />
         <EventList
           events={events}
           preTitle="Program"

src/templates/event-type.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Helmet from 'react-helmet'
 import { graphql } from 'gatsby'
+import Meta from '../components/Meta'
 import Layout from '../components/Layout'
 import EventList from '../components/EventList'
 
@@ -13,7 +13,7 @@ export default class EventTypeProgram extends React.Component {
 
     return (
       <Layout>
-        <Helmet title={`Konsept: ${eventTypeName}`} />
+        <Meta title={`Konsept: ${eventTypeName}`} />
         <EventList events={events} title={eventTypeName} />
       </Layout>
     )

src/templates/event.js

@@ -1,11 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Helmet from 'react-helmet'
 import { graphql, Link } from 'gatsby'
 import Img from 'gatsby-image'
 import moment from 'moment'
 import 'moment/locale/nb'
 
+import Meta from '../components/Meta'
 import Layout from '../components/Layout'
 
 moment.locale('nb')
@@ -120,11 +120,11 @@ export const EventTemplate = ({
                 {featuredMedia.localFile.childImageSharp ? (
                   <Img fluid={featuredMedia.localFile.childImageSharp.fluid} />
                 ) : (
-                  <img
-                    src={featuredMedia.localFile.url}
-                    alt={featuredMedia.caption || ''}
-                  />
-                )}
+                    <img
+                      src={featuredMedia.localFile.url}
+                      alt={featuredMedia.caption || ''}
+                    />
+                  )}
               </div>
               {/* {featuredMedia.caption && (
                 <div
@@ -193,7 +193,10 @@ const Event = ({ data }) => {
 
   return (
     <Layout>
-      <Helmet title={`${event.title}`} />
+      <Meta
+        title={event.title}
+        image={event.featured_media}
+      />
       <EventTemplate
         title={event.title}
         content={event.content}

src/templates/page.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Helmet from 'react-helmet'
 import { graphql } from 'gatsby'
 import Img from 'gatsby-image'
+import Meta from '../components/Meta'
 import Layout from '../components/Layout'
 
 export const PageTemplate = ({ title, content, featuredMedia }) => {
@@ -16,11 +16,11 @@ export const PageTemplate = ({ title, content, featuredMedia }) => {
             {featuredMedia.localFile.childImageSharp ? (
               <Img fluid={featuredMedia.localFile.childImageSharp.fluid} />
             ) : (
-              <img
-                src={featuredMedia.localFile.url}
-                alt={featuredMedia.caption || ''}
-              />
-            )}
+                <img
+                  src={featuredMedia.localFile.url}
+                  alt={featuredMedia.caption || ''}
+                />
+              )}
           </div>
           {featuredMedia.caption && (
             <div
@@ -51,7 +51,10 @@ const Page = ({ data }) => {
 
   return (
     <Layout>
-      <Helmet title={page.title} />
+      <Meta
+        title={page.title}
+        image={page.featured_media}
+      />
       <PageTemplate
         title={page.title}
         content={page.content}

src/templates/post.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Helmet from 'react-helmet'
 import { graphql, Link } from 'gatsby'
 import Img from 'gatsby-image'
 import moment from 'moment'
 import 'moment/locale/nb'
+import Meta from '../components/Meta'
 import Layout from '../components/Layout'
 
 moment.locale('nb')
@@ -23,7 +23,7 @@ export const BlogPostTemplate = ({
     <section
       className={`post-page ${
         hasFeaturedMedia ? 'has-featured-media' : 'no-featured-media'
-      }`}
+        }`}
     >
       <div className="post-hero">
         <div className="post-hero-inner">
@@ -44,11 +44,11 @@ export const BlogPostTemplate = ({
             {featuredMedia.localFile.childImageSharp ? (
               <Img fluid={featuredMedia.localFile.childImageSharp.fluid} />
             ) : (
-              <img
-                src={featuredMedia.localFile.url}
-                alt={featuredMedia.caption || ''}
-              />
-            )}
+                <img
+                  src={featuredMedia.localFile.url}
+                  alt={featuredMedia.caption || ''}
+                />
+              )}
             {featuredMedia.caption && (
               <div
                 className="post-hero_image-caption"
@@ -84,7 +84,10 @@ const BlogPost = ({ data }) => {
 
   return (
     <Layout>
-      <Helmet title={`${post.title} | Nyheter`} />
+      <Meta
+        title={`${post.title} | Nyheter`}
+        image={post.featured_media}
+      />
       <BlogPostTemplate
         content={post.content}
         categories={post.categories}

src/templates/tag.js

@@ -1,6 +1,6 @@
 import React from 'react'
-import Helmet from 'react-helmet'
 import { graphql } from 'gatsby'
+import Meta from '../components/Meta'
 import Layout from '../components/Layout'
 import PostList from '../components/PostList'
 
@@ -15,7 +15,7 @@ const Tag = props => {
 
   return (
     <Layout>
-      <Helmet title={tag} />
+      <Meta title={tag} />
       <PostList posts={posts} title={title} />
     </Layout>
   )

src/templates/venue.js

@@ -1,9 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Helmet from 'react-helmet'
 import { graphql, Link } from 'gatsby'
 import Img from 'gatsby-image'
 import classNames from 'classnames'
+import Meta from '../components/Meta'
 import Layout from '../components/Layout'
 import Map from '../components/Map'
 
@@ -49,8 +49,8 @@ export class VenueTemplate extends React.Component {
             {featuredMedia.localFile.childImageSharp ? (
               <Img fluid={featuredMedia.localFile.childImageSharp.fluid} />
             ) : (
-              <img src={featuredMedia.localFile.url} alt={title} />
-            )}
+                <img src={featuredMedia.localFile.url} alt={title} />
+              )}
           </div>
         )}
         <div className="venue-text">
@@ -178,7 +178,10 @@ const VenuePage = ({ data }) => {
 
   return (
     <Layout>
-      <Helmet title={venue.title} />
+      <Meta
+        title={venue.title}
+        image={venue.featured_media}
+      />
       <VenueTemplate
         isSingle
         path={venue.path}