How to display image when pasting site url in Twitter or Teams-CodePudding

On my blog I try to have an image displayed when I paste it in Twitter of Teams, but it just does not appear. I tried the twitter:card properties and og:* properties but no image is displayed.

My blog is on https://www.sergevandenoever.nl with an example post: https://www.sergevandenoever.nl/XM_Cloud_rendering_host_options_and_fast_local_development/.

CodePudding user response：

The image that you are referencing for your meta tags is duplicating the domain in the content URI:

https://www.opengraph.xyz/url/https://www.sergevandenoever.nl

For example you have:

<meta
  property="og:image"
  content="https://sergevandenoever.nlhttps:/www.sergevandenoever.nl/static/profile-pic-7fc88750bde9a9a7561d84e85802d892.jpg"
/>

And you want:

<meta
  property="og:image"
  content="https:/www.sergevandenoever.nl/static/profile-pic-7fc88750bde9a9a7561d84e85802d892.jpg"
/>

CodePudding user response：

Here a working snippet from a page on my site. You want to use 1200x1200px image(s). There's a validator you can use to check it. https://cards-dev.twitter.com/validator

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@telecomputing">
<meta property="og:site_name" content="High Tekk">
<meta property="og:type" content="website">
<meta property="og:url">
<meta property="og:title" content="Cisco ASA5506-K9 for $533.07 from High Tekk LLC">
<meta property="og:description" content="Cisco, Meraki, Routers, Switches, WiFi, Firewalls, Fast Delivery, Automated Ordering, Hassle Free Returns">
<meta name="description" content="Cisco, Meraki, Routers, Switches, WiFi, Firewalls, Fast Delivery, Automated Ordering, Hassle Free Returns">
<meta property="og:image" content="https://www.cisco.com/c/dam/assets/swa/img/sec/asa-5506-x-firepower-services.jpg">
<meta property="twitter:image:alt" content="High Tekk">