I want to link my web site and github to linkedin, but I found a missing site thumbnail.
To fix that, I need to add tag like
<meta property="og:image" content="image url" />
in gatsby project > components > seo.js.
meta={[
{
name: `description`,
content: metaDescription,
},
{
property: `og:title`,
content: title,
},
{
name: "image",
property: `og:image`,
content: thumbnail,
},
{
name: "description",
property: `og:description`,
content: metaDescription,
},
{
property: `og:type`,
content: `website`,
},
{
name: `twitter:card`,
content: `summary`,
},
{
name: `twitter:creator`,
content: site.siteMetadata?.author || ``,
},
{
name: `twitter:title`,
content: title,
},
{
name: `twitter:description`,
content: metaDescription,
},
].concat(meta)}
Since both title and description are data loaded from gatsby-config.js.
So I try to add image into configuration. However, the image path can not be transpiled correctly.
The correctly way to do that is import image:
import thumbnail from '../images/monster.png'
After redo, I have thumbnail shown now.
No comments:
Post a Comment