search

LekoArts / gatsby-themes

Get high-quality and customizable Gatsby themes to quickly bootstrap your website! Choose from many professionally created and impressive designs with a wide variety of features and customization options.
https://themes.lekoarts.de
MIT License
1.88k stars 544 forks source link

How do I change SiteDescription and siteImage in gatsby-config.js? #205

Closed ghost closed 4 years ago

ghost commented 4 years ago

As per title. My website keeps defaulting to the generic lekoarts banner and description.

LekoArts commented 4 years ago

You overwrite the values in your gatsby-config.js file:

module.exports = {
  siteMetadata: {
    siteDescription: `Your description.`,
    siteImage: `/your-image-path.jpg`,
  },
}
LekoArts commented 4 years ago

Thank you for opening this!

I'm marking this issue as answered and closing it for now but please feel free to comment here if you would like to continue this discussion. Thanks for using my themes!

jidicula commented 4 years ago

Thanks for creating this theme!

I'm having the same issue. I first tried adding my own banner.jpg image in static/, but my site continued to default to the LekoArt banner with my own site's description:

image

Then, I tried changing the value in gatsby-config.js to point to a PNG version of my banner instead: siteImage: "/banner.png", which is also in the static/ dir. This leads to no banner being shown in link previews:

image

I'm not quite sure what I'm doing wrong here. I cloned my repo from a friend's site repo, and he had just added a new banner.jpg in the same location without changing the value of siteImage (which I tried first, described above), and his site's link previews show his banner as expected:

image

Does anyone have a fix for this?

LekoArts commented 4 years ago

This is probably an intermittent issue with the scraping for the preview (cached response). Changing the file should be enough.

jidicula commented 4 years ago

This is probably an intermittent issue with the scraping for the preview (cached response). Changing the file should be enough.

Good to know! And just to clarify, the preview image is format-agnostic, right? It should be ok to use a PNG instead of a JPG?

LekoArts commented 4 years ago

As long as you overwrite the siteImage property, yeah.

mohammedpatla commented 4 years ago

I tried clearing cache and building the repo again (on Netlify), but does not seem to work for me I still get the default banner. Although I already replaced it with a new banner.

siteMetadata: {
    // Used for the title template on pages other than the index site
    siteTitle: `Secure Secrets`,
    // Default title of the page
    siteTitleAlt: `Securing the secentralized web`,
    // Can be used for e.g. JSONLD
    siteHeadline: `Secure your Secrets`,
    // Will be used to generate absolute URLs for og:image etc.
    siteUrl: `https://securesecrets.network`,
    // Used for SEO
    siteDescription: `Securing the decentralized web using Secret Network`,
    // Will be set on the <html /> tag
    siteLanguage: `en`,
    // Used for og:image and must be placed inside the `static` folder
    siteImage: `/banner.jpg`,
    // Twitter Handle
    author: `@mohammedpatla`,
    // Navigation links
  }

image

Any suggestions @LekoArts

Were you able to get yours to work @jidicula ?

jidicula commented 4 years ago

I tried clearing cache and building the repo again (on Netlify), but does not seem to work for me I still get the default banner.

Although I already replaced it with a new banner.


siteMetadata: {

    // Used for the title template on pages other than the index site

    siteTitle: `Secure Secrets`,

    // Default title of the page

    siteTitleAlt: `Securing the secentralized web`,

    // Can be used for e.g. JSONLD

    siteHeadline: `Secure your Secrets`,

    // Will be used to generate absolute URLs for og:image etc.

    siteUrl: `https://securesecrets.network`,

    // Used for SEO

    siteDescription: `Securing the decentralized web using Secret Network`,

    // Will be set on the <html /> tag

    siteLanguage: `en`,

    // Used for og:image and must be placed inside the `static` folder

    siteImage: `/banner.jpg`,

    // Twitter Handle

    author: `@mohammedpatla`,

    // Navigation links

  }

image

Any suggestions @LekoArts

Were you able to get yours to work @jidicula ?

Not exactly, the link preview still doesn't show my banner image, but it's not displaying the template banner anymore.

mohammedpatla commented 4 years ago

@jidicula I think I fixed the issue, by creating a copy of the banner.jpg in the src/../sections/ folder

Update nope, it fixes it on some platforms like discord, but not on others like LinkedIn, Telegram for example.

jidicula commented 4 years ago

@mohammedpatla where is the src/.../sections/ folder? I'm using the minimal blog theme, my project repo can be seen here.

Good to hear that it works fine on Discord, so that means that LinkedIn and Telegram might be slower to refresh their caches for unravelling link previews?

mohammedpatla commented 4 years ago

Um not too sure where this would be for you @jidicula But I think you can place it in /components or /src and try.

jidicula commented 4 years ago

@LekoArts could this issue be reopened? I dug into my site a bit more and found that the React Helmet is still pulling the banner image from https://minimal-blog.lekoarts.de. I found the following tags when viewing the source of my site, https://forcepush.tech : 

<meta data-react-helmet="true" name="image" content="https://minimal-blog.lekoarts.de/banner.png"/>
...
<meta data-react-helmet="true" property="og:image" content="https://minimal-blog.lekoarts.de/banner.png"/>
...
<meta data-react-helmet="true" name="twitter:image" content="https://minimal-blog.lekoarts.de/banner.png"/>

This explains why I stopped seeing a card image altogether when using banner.png or any other filename in the siteImage property my gatsby-config.js – since it's just appending the siteImage to the siteURL, which for some reason is stuck on https://minimal-blog.lekoarts.de!

I want to point out that I cloned my repo https://github.com/jidicula/forcepush from https://github.com/krubenok/nerd-ramblings, which is published at nerd-ramblings.com. When viewing the page source of Nerd Ramblings, the banner tags are correct:

<meta data-react-helmet="true" name="image" content="https://nerd-ramblings.com/banner.jpg"/>
...
<meta data-react-helmet="true" property="og:image" content="https://nerd-ramblings.com/banner.jpg"/>
...
<meta data-react-helmet="true" name="twitter:image" content="https://nerd-ramblings.com/banner.jpg"/>

The only difference between @krubenok's usage of your template and my usage of your template is that I'm on version 2.4.0 of gatsby-theme-minimal-blog, while he's on version 2.3.10, so I'm wondering if something changed with your usage of gatsby-plugin-react-helmet and how siteURL is generated? It doesn't seem to be read from gatsby-config.js as expected.

The entire head of the page is:

<title data-react-helmet="true">Beth Aitman on writing effective documentation at LeadDev Berlin 2019 | force push</title>
<link data-react-helmet="true" rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link data-react-helmet="true" rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link data-react-helmet="true" rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<meta data-react-helmet="true" name="description" content="I recently re-read Joel Chippindale&#x27;s  fantastic post about telling stories through your commits  and I noticed that it was actually part of…" />
<meta data-react-helmet="true" name="image" content="https://minimal-blog.lekoarts.de/banner.png" />
<meta data-react-helmet="true" property="og:title" content="Beth Aitman on writing effective documentation at LeadDev Berlin 2019" />
<meta data-react-helmet="true" property="og:url" content="https://minimal-blog.lekoarts.de/beth-aitman-on-writing-effective-documentation-at-lead-dev-berlin-2019" />
<meta data-react-helmet="true" property="og:description" content="I recently re-read Joel Chippindale&#x27;s  fantastic post about telling stories through your commits  and I noticed that it was actually part of…" />
<meta data-react-helmet="true" property="og:image" content="https://minimal-blog.lekoarts.de/banner.png" />
<meta data-react-helmet="true" property="og:type" content="website" />
<meta data-react-helmet="true" property="og:image:alt" content="I recently re-read Joel Chippindale&#x27;s  fantastic post about telling stories through your commits  and I noticed that it was actually part of…" />
<meta data-react-helmet="true" name="twitter:card" content="summary_large_image" />
<meta data-react-helmet="true" name="twitter:title" content="Beth Aitman on writing effective documentation at LeadDev Berlin 2019" />
<meta data-react-helmet="true" name="twitter:url" content="https://minimal-blog.lekoarts.de/beth-aitman-on-writing-effective-documentation-at-lead-dev-berlin-2019" />
<meta data-react-helmet="true" name="twitter:description" content="I recently re-read Joel Chippindale&#x27;s  fantastic post about telling stories through your commits  and I noticed that it was actually part of…" />
<meta data-react-helmet="true" name="twitter:image" content="https://minimal-blog.lekoarts.de/banner.png" />
<meta data-react-helmet="true" name="twitter:image:alt" content="I recently re-read Joel Chippindale&#x27;s  fantastic post about telling stories through your commits  and I noticed that it was actually part of…" />
<meta data-react-helmet="true" name="twitter:creator" content="Johanan Idicula" />
<meta data-react-helmet="true" name="gatsby-theme" content="@lekoarts/gatsby-theme-minimal-blog" />
<link rel="alternate" type="application/rss+xml" title="force push" href="/rss.xml" />
<link rel="sitemap" type="application/xml" href="/sitemap.xml" />
<link rel="icon" href="/favicon.svg?v=bd2d07a849f78d1fca0e5b288ff78fbd" type="image/svg+xml" />
<link rel="icon" href="/favicon-32x32.png?v=bd2d07a849f78d1fca0e5b288ff78fbd" type="image/png" />
<link rel="manifest" href="/manifest.webmanifest" />
<meta name="theme-color" content="#000000" />
<link rel="apple-touch-icon" sizes="48x48" href="/icons/icon-48x48.png?v=bd2d07a849f78d1fca0e5b288ff78fbd" />
<link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png?v=bd2d07a849f78d1fca0e5b288ff78fbd" />
<link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png?v=bd2d07a849f78d1fca0e5b288ff78fbd" />
<link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png?v=bd2d07a849f78d1fca0e5b288ff78fbd" />
<link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png?v=bd2d07a849f78d1fca0e5b288ff78fbd" />
<link rel="apple-touch-icon" sizes="256x256" href="/icons/icon-256x256.png?v=bd2d07a849f78d1fca0e5b288ff78fbd" />
<link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.png?v=bd2d07a849f78d1fca0e5b288ff78fbd" />
<link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png?v=bd2d07a849f78d1fca0e5b288ff78fbd" />
<link as="script" rel="preload" href="/webpack-runtime-5f5d5e1b5d78050bc672.js" />
<link as="script" rel="preload" href="/framework-a38040c4749cf445737f.js" />
<link as="script" rel="preload" href="/app-5c50c4bededc30882f45.js" />
<link as="script" rel="preload" href="/styles-8d3db5124725dcff78a7.js" />
<link as="script" rel="preload" href="/1bfc9850-7250d09ce14a30bf01f5.js" />
<link as="script" rel="preload" href="/da6a68a6c1226df4cda7fc37d81ad4013f27123d-f8e8204a1b22d6841839.js" />
<link as="script" rel="preload" href="/aed2e917f30c051bccba91aa15989a75fd0bd633-816f4f86b6d8a75e70a4.js" />
<link as="script" rel="preload" href="/component---node-modules-lekoarts-gatsby-theme-minimal-blog-core-src-templates-post-query-tsx-f2c1eae5dff9c988cd09.js" />
<link as="fetch" rel="preload" href="/page-data/beth-aitman-on-writing-effective-documentation-at-lead-dev-berlin-2019/page-data.json" crossorigin="anonymous" />
<link as="fetch" rel="preload" href="/static/d/318001574.json" crossorigin="anonymous" />
<link as="fetch" rel="preload" href="/static/d/3787687951.json" crossorigin="anonymous" />
<link as="fetch" rel="preload" href="/static/d/3787687951.json" crossorigin="anonymous" />
<link as="fetch" rel="preload" href="/page-data/app-data.json" crossorigin="anonymous" />
</head>
krubenok commented 4 years ago

PSA: I'm on 2.4.0 of the theme so it should be the same?

jidicula commented 4 years ago

PSA: I'm on 2.4.0 of the theme so it should be the same?

Oops, I had been looking at your yarn.lock instead of package.json

jidicula commented 4 years ago

Update: seems fine for me now, with the banner card being generated as expected.

yeliudev commented 4 years ago

Update: seems fine for me now, with the banner card being generated as expected.

Hi @jidicula! Thank you for pointing out the issue. I meet the exact same issue as yours. May I ask that how you solved the problem? Are you still placing the banner.jpg at static/?

jidicula commented 4 years ago

Update: seems fine for me now, with the banner card being generated as expected.

Hi @jidicula! Thank you for pointing out the issue. I meet the exact same issue as yours. May I ask that how you solved the problem? Are you still placing the banner.jpg at static/?

I am, and it fixed itself somehow - I think it's some kind of black-box caching on each platform that does card previews. You can see my site repo here.

yeliudev commented 4 years ago

@jidicula Thanks for your kind reply! I'll check the cache.