Add other Open Graph meta

twilightscapes commented 5 years ago

I am trying to customize your theme a bit and since my site will be for a photography site, having correct image previews when posts are shared on Facebook, etc... is pretty important. Your current SEO.js file doesn't have support for og:url, og:type, og:title, og:image, og:description, fb:app_id according to FB.

I've tried to add these; well actually just tried to add OG:image but I am not having much luck as I am very new to React and Gatsby.

Any help you could provide would be awesome... love your theme btw.

scottopolis commented 5 years ago

Thanks Todd! If you look at the SEO.js file, it does have all of those except og:image: https://github.com/scottopolis/gatsby-theme-publisher/blob/master/src/components/SEO.js

It gets those from the config file, did you change those values in your theme? https://github.com/scottopolis/gatsby-theme-publisher/blob/master/config.js

twilightscapes commented 5 years ago

I did see that, I should have been more clear, sorry. When I mentioned that, that was what FB sharing tool was indicating. I’ve tried adding the image in the config (but that would be a static image correct? Not the featured image from Wordpress?)

I apologize, as I am very new to React and I’m sure I’m doing something stupid.

Here is what I am getting in my header: <meta name="description" content="Blog posts" data-react-helmet="true"> <meta property="og:title" content="Latest Additions" data-react-helmet="true”> <meta property="og:description" content="Blog posts" data-react-helmet="true”> <meta property="og:type" content="website" data-react-helmet="true"> <meta name="twitter:card" content="summary" data-react-helmet="true"> <meta name="twitter:creator" content="Urban Fetish" data-react-helmet="true"> <meta name="twitter:title" content="Latest Additions" data-react-helmet="true"> <meta name="twitter:description" content="Blog posts" data-react-helmet="true"> <meta name="keywords" content="wordpress" data-react-helmet="true">

AND MY CONFIG:

const config = { title: Urban Fetish, description: Urban Fetish, author: Urban Fetish, twitter: toddlambert, wordPressUrl: https://mywpsite.com/, siteUrl: https://mysite.com, dynamicComments: true, gaTrackingId: 'UA-140479230-1', mailChimpEndpoint: '', image: 'images/urban-fetish.jpg', }

module.exports = config

AND MY SEO.JS

import React from "react" import PropTypes from "prop-types" import Helmet from "react-helmet" import { StaticQuery, graphql } from "gatsby"

function SEO({ description, lang, meta, keywords, title, image }) {

return ( <StaticQuery query={detailsQuery} render={data => { const metaDescription = description || data.site.siteMetadata.description const titleText = title ? ${title} | ${data.site.siteMetadata.title} : data.site.siteMetadata.title return ( <Helmet htmlAttributes={{ lang, }} title={titleText} titleTemplate={%s} meta={[ { name: description, content: metaDescription, }, { property: og:title, content: title, }, { property: og:description, content: metaDescription, }, { property: og:type, content: website, }, { name: twitter:card, content: summary, }, { name: twitter:creator, content: data.site.siteMetadata.author, }, { name: twitter:title, content: title, }, { name: twitter:description, content: metaDescription, }, { name: og:image, content: image, }, ] .concat( keywords.length > 0 ? { name: keywords, content: keywords.join(,), } : [] ) .concat(meta)} /> ) }} /> ) }

SEO.defaultProps = { lang: en, meta: [], keywords: [], image: [], }

SEO.propTypes = { description: PropTypes.string, image: PropTypes.string, lang: PropTypes.string, meta: PropTypes.array, keywords: PropTypes.arrayOf(PropTypes.string), title: PropTypes.string.isRequired, }

export default SEO

const detailsQuery = graphql query DefaultSEOQuery { site { siteMetadata { title description author image } } }

-- Todd Lambert

From: Scott Bolinger notifications@github.com notifications@github.com Reply: scottopolis/gatsby-theme-publisher reply@reply.github.com reply@reply.github.com Date: September 15, 2019 at 7:29:47 AM To: scottopolis/gatsby-theme-publisher gatsby-theme-publisher@noreply.github.com gatsby-theme-publisher@noreply.github.com Cc: Todd ihatespam@gmail.com ihatespam@gmail.com, Author author@noreply.github.com author@noreply.github.com Subject: Re: [scottopolis/gatsby-theme-publisher] Add other Open Graph meta (#1)

Thanks Todd! If you look at the SEO.js file, it does have all of those except og:image: https://github.com/scottopolis/gatsby-theme-publisher/blob/master/src/components/SEO.js

It gets those from the config file, did you change those values in your theme? https://github.com/scottopolis/gatsby-theme-publisher/blob/master/config.js

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/scottopolis/gatsby-theme-publisher/issues/1?email_source=notifications&email_token=AAMS2MZTAOSFXUSX74YPKF3QJYTDTA5CNFSM4IW2DJ5KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD6XPZRQ#issuecomment-531561670, or mute the thread https://github.com/notifications/unsubscribe-auth/AAMS2MZU26WZSBQYHW5ZJYTQJYTDTANCNFSM4IW2DJ5A .

scottopolis commented 5 years ago

That looks pretty close, did you try using a full path in the config.js file? http://mysite.com/images/my-image.jpg

scottopolis / gatsby-theme-publisher

Add other Open Graph meta #1