{"action":"created","issue":{"url":"https://api.github.com/repos/JugglerX/gatsby-serif-theme/issues/4","repository_url":"https://api.github.com/repos/JugglerX/gatsby-serif-theme","labels_url":"https://api.github.com/repos/JugglerX/gatsby-serif-theme/issues/4/labels{/name}","comments_url":"https://api.github.com/repos/JugglerX/gatsby-serif-theme/issues/4/comments","events_url":"https://api.github.com/repos/JugglerX/gatsby-serif-theme/issues/4/events","html_url":"https://github.com/JugglerX/gatsby-serif-theme/issues/4","id":447324356,"node_id":"MDU6SXNzdWU0NDczMjQzNTY=","number":4,"title":"Request: Add og:image to SEO/Metadata","user":{"login":"elijahio","id":22265271,"node_id":"MDQ6VXNlcjIyMjY1Mjcx","avatar_url":"https://avatars0.githubusercontent.com/u/22265271?v=4","gravatar_id":"","url":"https://api.github.com/users/elijahio","html_url":"https://github.com/elijahio","followers_url":"https://api.github.com/users/elijahio/followers","following_url":"https://api.github.com/users/elijahio/following{/other_user}","gists_url":"https://api.github.com/users/elijahio/gists{/gist_id}","starred_url":"https://api.github.com/users/elijahio/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/elijahio/subscriptions","organizations_url":"https://api.github.com/users/elijahio/orgs","repos_url":"https://api.github.com/users/elijahio/repos","events_url":"https://api.github.com/users/elijahio/events{/privacy}","received_events_url":"https://api.github.com/users/elijahio/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2019-05-22T20:18:50Z","updated_at":"2019-05-22T21:46:13Z","closed_at":"2019-05-22T21:46:13Z","author_association":"NONE","body":"As you can see, [Facebook](https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fgatsby-serif.netlify.com%2F) and [Twitter's social card debugger ](https://cards-dev.twitter.com/validator)isn't picking up any image(s) in the metadata (should be in the og:image format). The og:title and og:description seem to be pulling from the regular site metadata just fine. I hate to open an issue (a request) for this, but I have been banging my head against this issue for awhile now and can't seem to figure it out. The SEO.js file isn't in a format I'm familiar with even though I've worked with Gatsby before. I have even tried to add a meta tag manualy to the index.js layout to no avail. Sorry if this is lacking detail or isn't a feature you're looking to add – feel free to close if that's the case and I'll keep working on it/post a solution back here in a PR if I figure it out."},"comment":{"url":"https://api.github.com/repos/JugglerX/gatsby-serif-theme/issues/comments/494986008","html_url":"https://github.com/JugglerX/gatsby-serif-theme/issues/4#issuecomment-494986008","issue_url":"https://api.github.com/repos/JugglerX/gatsby-serif-theme/issues/4","id":494986008,"node_id":"MDEyOklzc3VlQ29tbWVudDQ5NDk4NjAwOA==","user":{"login":"elijahio","id":22265271,"node_id":"MDQ6VXNlcjIyMjY1Mjcx","avatar_url":"https://avatars0.githubusercontent.com/u/22265271?v=4","gravatar_id":"","url":"https://api.github.com/users/elijahio","html_url":"https://github.com/elijahio","followers_url":"https://api.github.com/users/elijahio/followers","following_url":"https://api.github.com/users/elijahio/following{/other_user}","gists_url":"https://api.github.com/users/elijahio/gists{/gist_id}","starred_url":"https://api.github.com/users/elijahio/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/elijahio/subscriptions","organizations_url":"https://api.github.com/users/elijahio/orgs","repos_url":"https://api.github.com/users/elijahio/repos","events_url":"https://api.github.com/users/elijahio/events{/privacy}","received_events_url":"https://api.github.com/users/elijahio/received_events","type":"User","site_admin":false},"created_at":"2019-05-22T21:46:13Z","updated_at":"2019-05-22T21:46:13Z","author_association":"NONE","body":"Sorry, I think I might just be an idiot lol.\r\n\r\nSo, Helmet already enables this, I think I was just confused by the syntax at first.\r\n\r\nSo, I added a unique og:image to my homepage by adding this to my `index.js` file:\r\n\r\n`<meta property=\"og:image\" content=\"/example-image.png\"/>`\r\n\r\nThis was added underneath the `<meta name=\"description\" content=\"...\"` part within `<Helmet></Helmet>` of the index.js file (around line 14 from this repo).\r\n\r\nTo add a dynamic og:image on the individual service pages, for example:\r\n\r\n1. Import Helmet to the `service.js` template (`templates/service.js`) like so: `import Helmet from 'react-helmet';`\r\n2. Create a Helmet like so, below the `<Layout bodyClass=\"page-service\">` opening around line 12:\r\n```\r\n<Helmet>\r\n        <meta property=\"og:image\" content={ image }/>\r\n        <meta property=\"og:image:width\" content=\"1200\"/>\r\n        <meta property=\"og:image:height\" content=\"630\"/>\r\n</Helmet>\r\n```\r\n\r\n_It's important to include the og:image:width and :height because of some issue with Facebook not being able to render it otherwise._ I went kinda quick and forgot/can't find the exact error message it gave me, but the specified width/height fixes it."}}
{"actor":{"display_login":"elijahio"}}