Ghost post sharing gone wrong?

When a webpage gets shared, the "client" getting the page looks at the page code to figure out what to show you as a preview. (The "client" might be Facebook, or LinkedIn, or an email client, or iMessage, or some other phone app, or anywhere you might be sharing your link to, that doesn't want to show it as a plain url...)

Metadata is even responsible for the bookmark card! (Ghost bookmarks are apparently using the Facebook card, if you were wondering.)

Ghost Post: Sharing Gone wrong

Why is your Ghost site might be showing the wrong image when shared, and other tips for making your social previews look great.

Spectral Web ServicesCathy Sarisky, Ghost Expert

Ghost (like most websites) offers several choices that the client displaying a shared link might pick. There's og:image, meant mostly for Facebook, twitter:image (you guessed it), and often a logo and/or image, set within the ld+json schema. You can see all of that if you look at the page source (ctrl-U in your browser). If none of these things are set, a client may instead try to grab another image from the page, rather than showing no image.

Ghost attempts to offer an image for all those image fields. (Mostly – it doesn't include an image in schema on index routes.) If you've set images in the metadata and facebook & twitter sections (right side menu in the post editor, down below where you'd set the tags & authors), it'll use those. If you haven't, it'll use the featured image. If you haven't set a featured image, it'll use the site-wide metadata if you've set it, or the site cover image, as a final fallback.

So, if you're getting the wrong image, there are two possibilities:

• Ghost is offering an image you didn't intend. (Maybe you set the site metadata years ago and forgot it.) You can fix this by removing that image, and making sure that the post has a featured image and/or metadata images set.
• The client is either ignoring what Ghost is offering and picking another image from somewhere on the page, or Ghost has no images available (metadata not set, no cover image, post has no featured image, etc) and so the client is picking some image from the page.

One more wrinkle: Metadata for sharing tends to be cached, so if you've made recent changes, they may not be reflected for existing shares or even for new ones.

If you're trying to debug what you're getting in shares, I recommend this tool from Facebook:

Sharing Debugger - Meta for Developers

Meta for Developers

Another good tool for checking site metadata is this one from Google:

Rich Results Test - Google Search Console

Search Test Tool

If either of these tools is picking up a "wrong" result, either in terms of images or text fields, it's time to take another look at your Ghost site for any missing or outdated metadata. Since we typically don't see the metadata fields while publishing, it's easy for them to get badly outdated.

Deep into the weeds with metadata

Let's take a look at what metadata Ghost is giving us for this post:

    <meta name="description" content="Why is your Ghost site showing the wrong image, and other tips for making your social previews look great.">
    <link rel="icon" href="https://www.spectralwebservices.com/content/images/size/w256h256/2023/08/witch-hat-icon_rev-1-01-3.png" type="image/png">
    <link rel="canonical" href="https://www.spectralwebservices.com/blog/sharing-gone-wrong-2/">
    <meta name="referrer" content="no-referrer-when-downgrade">
    
    <meta property="og:site_name" content="Spectral Web Services">
    <meta property="og:type" content="article">
    <meta property="og:title" content="Sharing gone wrong?">
    <meta property="og:description" content="Why is your Ghost site showing the wrong image, and other tips for making your social previews look great.">
    <meta property="og:url" content="https://www.spectralwebservices.com/blog/sharing-gone-wrong-2/">
    <meta property="og:image" content="https://www.spectralwebservices.com/content/images/2024/12/ghost-with-tools-01.png">
    <meta property="article:published_time" content="2024-12-16T19:58:44.000Z">
    <meta property="article:modified_time" content="2024-12-16T19:58:44.000Z">
    <meta property="article:tag" content="Metadata">
    <meta property="article:tag" content="Search Optimizations">
    <meta property="article:tag" content="Ghost">
    <meta property="article:tag" content="SEO">
    
    <meta property="article:publisher" content="https://www.facebook.com/catherine.sarisky">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Sharing gone wrong?">
    <meta name="twitter:description" content="Why is your Ghost site showing the wrong image, and other tips for making your social previews look great.">
    <meta name="twitter:url" content="https://www.spectralwebservices.com/blog/sharing-gone-wrong-2/">
    <meta name="twitter:image" content="https://www.spectralwebservices.com/content/images/2024/12/repair-ghost-01.png">
    <meta name="twitter:label1" content="Written by">
    <meta name="twitter:data1" content="Cathy Sarisky, Ghost Expert">
    <meta name="twitter:label2" content="Filed under">
    <meta name="twitter:data2" content="Metadata, Search Optimizations, Ghost, SEO">
    <meta property="og:image:width" content="800">
    <meta property="og:image:height" content="800">
  

Ghost also writes the schema:

    <script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "publisher": {
        "@type": "Organization",
        "name": "Spectral Web Services",
        "url": "https://www.spectralwebservices.com/",
        "logo": {
            "@type": "ImageObject",
            "url": "https://www.spectralwebservices.com/content/images/2023/08/witch-hat-icon_rev-1-01-4.png",
            "width": 60,
            "height": 60
        }
    },
    "author": {
        "@type": "Person",
        "name": "Cathy Sarisky, Ghost Expert",
        "image": {
            "@type": "ImageObject",
            "url": "https://www.gravatar.com/avatar/56a265bc6452df20e7047c95b025f1a5?s=250&r=x&d=mp",
            "width": 250,
            "height": 250
        },
        "url": "https://www.spectralwebservices.com/author/cathy/",
        "sameAs": []
    },
    "headline": "Sharing gone wrong?",
    "url": "https://www.spectralwebservices.com/blog/sharing-gone-wrong-2/",
    "datePublished": "2024-12-16T19:58:44.000Z",
    "dateModified": "2024-12-16T19:58:44.000Z",
    "image": {
        "@type": "ImageObject",
        "url": "https://www.spectralwebservices.com/content/images/2024/12/ghost-with-tools-01.png",
        "width": 800,
        "height": 800
    },
    "keywords": "Metadata, Search Optimizations, Ghost, SEO",
    "description": "Why is your Ghost site showing the wrong image, and other tips for making your social previews look great.",
    "mainEntityOfPage": "https://www.spectralwebservices.com/blog/sharing-gone-wrong-2/"
}
    </script>

If I share to LinkedIn, here's what I get:

Facebook:

Reddit:

If I set a separate Facebook card image and title (in right side menu of the post editor), then I start seeing that image and title instead:

I wanted to add a picture of the X share, but X got rid of their sharing debugger tool and apparently adds metadata asynchronously, so 🤷.

Need to change your metadata?

So... what if you don't like what's displaying? First, try updating the fields you control, within Ghost itself. On posts and pages, that's the these options in the right-side menu of the post/page editor:

Sitewide, you also have settings available in /ghost > settings (gear icon):

If that doesn't fix it, there are a couple options.

Code injection

For missing data, add the missing data in the code_injection header. For example, if you want a recipe schema on your post, you can add one (built manually or with another tool).

Edit the theme

If it's an index/tag page that's affected, you could edit the template to add metadata.

You can also tell {{ghost_head}} to not write out the existing metadata, which is useful if the metadata is wrong, instead of just not detailed enough. It'd look like this

{{ghost_head exclude="metadata,schema"}}

That entirely removes metadata and schema, leaving you a blank slate to do what you like. You can pass just metadata or just schema, or something else entirely. See this post for details.

Actually, you probably want to be more surgical, and wrap that in some logic, like:

{{#is "home"}}
  {{ghost_head exclude="metadata,schema"}}
  ... put all your manually-constructed meta tags and ld+json schema here...
{{else}}
  {{ghost_head}}
{{/is}}

That'll let you make Ghost do the hard work most places, but allow you to do something different with your / (home) route.

Happy Ghosting!

Hey, before you go... If your finances allow you to keep this tea-drinking ghost and the freelancer behind her supplied with our hot beverage of choice, we'd both appreciate it!

Buy me a tea ☕️