Ghost cms twitter metadata issue

Developer help
1

Hi I am running ghost from the docker image in production. I am using ghost content api and then fetching the posts to be displayed as blogs on our website https://avail.global .

The website is built with next js and I have written out the required metadata over there, so it would change based on the blog/post being rendered and mainly we required this to be able to display a twitter card.

We also set the metadata from ghost cms that sets it for the site deployed by ghost, ours being hosted at https://cms.avail.global . We are having issues with twitter as the metadata is not being fetched correctly and for some reason I believe that is fetching the metadata from the cms not from our website.

The metadata is as follows:

  title: metaData.title,
        description: metaData.excerpt,
        keywords: metaData.meta_title,
        openGraph: {
            images: metaData.feature_image,
            title: metaData.title,
            description: metaData.excerpt,
            url: "https://avail.global/blog/"+metaData.slug,
            siteName: 'Avail Blog',
            type: 'article',
            publishedTime: metaData.published_at,
            authors: metaData.primary_author.name,
        },
        twitter: {
            images: {
                url: metaData.feature_image,
                alt: metaData.feature_image_alt,
                secureUrl:  metaData.feature_image,
                width: 1240,
                height: 620,
            },
            card: 'summary_large_image',
            title: metaData.twitter_title,
            description: metaData.excerpt,
            site: '@avail.global',
            creator: '@availwallet',
        },

That is how it is set on our next.js, the issue we are having is that this is being rendered as summary card type not summary_large_image but on every web page that can be effecting this i.e the blog itself on the cms or the blog at What is Avail? both export metadata as summary_large_image.

Any reason why this would be failing?

2

I think the reason is that you’re still hosting the images on Ghost but in private mode, which sets a restricted robots.txt. That prevents Twitter from fetching the image for the post and falling back to the summary-type card. You can run your URL through Twitter’s validator to check: https://cards-dev.twitter.com/validator

The best strategy here is to host the images along with the Next js content. Otherwise, you can take Ghost out of private mode but use a theme that doesn’t output any content.

3

Hey thanks for the reply,
If I host the images through next is there a way to automatically point ghost to them instead of referencing its private storage or is there some setting to fix this.

And what would removing ghost from private mode imply. We need ghost to output content we write on it through the content api so we can display on our website, if this is what you mean by content, if it’s the site that comes w ghost then yes we don’t need that.

Thanks,
Zack

4

There’s not a straightforward way to point to the images in Next.

A custom storage adapter might work here: Configuration - Adapt your publication to suit your needs.

Alternatively, you could add a step in your Next build where you fetch the images from Ghost to host locally.

Serving Ghost in private mode basically makes the site password-protected and turns off all search engine optimizations: Setting up your Ghost site

Opting for a blank theme is just affecting the display of your content, not its availability through the API. It’s just turning off your site’s theme, nothing else. It does mean that you can’t really preview your content through Ghost, though.

5

Could you upload a custom robots.txt (via the theme) that allows assets to be served but blocks content?

1 Like