Meta tags for featured image

General
1

I’m having issues with using og: meta tags to get my pages to display a featured image with a link a la WordPress.

My tags:

    <meta property="og:locale" content="en_US" />
    <meta property="og:type" content="article" />
    <meta property="og:title" content="How To Be Worst Host This Coming Holiday Season &mdash; Peter Bockenthien" />
    <meta property="og:description" content="Being the worst host during the holidays can make you a healthier, happier person." />
    <meta property="og:url" content="https://peterbwrites.com/How To Be Worst Host This Coming Holiday Season" />
    <meta property="og:site_name" content="Peter B Writes" />
    <meta property="article:publisher" content="Peter B Writes" />
    <meta property="article:published_time" content="2020-09-29 09:52:00" />
    <meta property="og:image" content="https://peterbwrites.com/peterb-imgs/wild-turkey.jpg" />
    <meta property="og:image:width" content="auto" />
    <meta property="og:image:height" content="auto" />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:creator" content="@PBockenthien" />
    <meta name="twitter:site" content="@PBockenthien" />

If that doesn’t show up, see this:

Edit: I guess I got it right, but Twitter isn’t noticing it. Damned cache, amiright?
How can this be done in MODX?

Thanks,
Peter

2

You could use a TV of Clientconfig?

3

Running that link through the twitter cards validator seems to work fine.

The og:url in your tags doesn’t seem to be right though, how are you generating that? Looks like that may be using the pagetitle instead of the uri or a [[~[[*id]]? &scheme=`full`]] tag? Perhaps that’s confusing Twitters’ parser.

(Note that to show code, wrap it 3 ticks in a line before and after the code: ``` code ```)

4

FWIW I was having a lot of trouble with Twitter creating correct previews until I realised it wasn’t generating a card unless the image had an alt description. I also had to make sure all fields had a value.

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@twitterhandle" />
<meta name="twitter:creator" content="@twitterhandle" />
<meta name="twitter:title" content="Article title" />
<meta name="twitter:description" content="Article description." />
<meta name="twitter:image" content="https://website.com/image.jpg" />

Also, looking at your code, you don’t have a twitter:image tag and the turkey image url is relative, not absolute, so Twitter probably can’t find it? From my experience above I think if Twitter can’t find a value it breaks the card.