Twitter Open Graph image not showing

I am trying to implement OpenGraph in a website. Here’s my metadata code:

<!-- open-graph basic tags -->
<meta property="og:title" content="Philippine Standard Geographic Code API" />
<meta property="og:site_name" content="Wareneutron - PSGC API" />
<meta property="og:description" content="API used for listing all the region, province, city, municipality, barangay, and its data. Philippine Standard Geographic Codes (PSGC) data came from Philippine Statistics Authority." />
<meta property="og:url" content="https://psgc-api.wareneutron.com/" />
<meta property="og:type" content="website" />
<meta property="og:image" content="/assets/wareneutron_psgc_api_opengraph.jpg" />
<meta property="og:image:alt" content="PSGC Banner" />
<meta property="og:image:width" content="1280" />
<meta property="og:image:height" content="640" />
<!-- Twitter open-graph tags -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:image:alt" content="PSGC API Banner" />

It works fine with Facebook sharing debugger here’s the output:

But the image is not showing in twitter card validator:

The image I’m trying to show is in my assets folder, here’s the structure:

Thank you for helping me.

Answer

Twitter likes name, not property (the OG meta tags use property).

<!-- Twitter open-graph tags -->

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image:alt" content="PSGC API Banner">
<meta name="twitter:title" content="Philippine Standard Geographic Code API">
<meta name="twitter:description" content="API used for listing all the region, province, city, municipality, barangay, and its data. Philippine Standard Geographic Codes (PSGC) data came from Philippine Statistics Authority.">
<meta name="twitter:image" content="https://psgc-api.wareneutron.com/wareneutron_psgc_api_opengraph.jpg">

One thing with the Twitter card validator — sometimes is doesn’t seem to rescrape your site when you click the Preview Card button. To test if the changing the code would work, I uploaded a copy of your page to the server for my site, and then scraped it. At first, I got a summary card with no image, but I restarted my browser (closed and reopened) and rescraping the URL and it worked (showed a large image).

Advertisement

Answer