Simplify your rich link preview markup
OpenGraph and Twitter Cards are the two most popular ways to suply metadata for rich link previews.
Web sites usually provide metadata to both by using separate <meta> elements:
<meta property=og:image content=https://tess.oconnor.cx/2022/09/maxresdefault.jpg>
<meta name=twitter:image content=https://tess.oconnor.cx/2022/09/maxresdefault.jpg>I used to do this too, but my markup is simpler. Since Twitter Cards use <meta name>, while OpenGraph uses <meta property>, you can supply both on the same element, like this:
<meta property=og:image name=twitter:image content=https://tess.oconnor.cx/2022/09/maxresdefault.jpg>Don’t forget to also supply an image description via og:image:alt and twitter:image:alt!
<meta property=og:image:alt name=twitter:image:alt content="The image is split in half. On the left, the words “Rick Astley - Never Gonna Give You Up” appear. On the right, a ginger-haired man is singing into an old-timey microphone.">