Twitter Open Graph image not showing

Question

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.

Sesqui

The og:url in your code, docs.wareneutron.com/psgc-api works on Twitter and Facebook, but the image is different from your example. If you can share your exact code with URL, it would help to understand what’s happening. – Thaumaturgy

Hi @RichDeBourke, I edited the previous code I posted. Here's the the deployed link. psgc-api-git-fork-davebanguilan-dev-wareneutron.vercel.app – Sesqui

Answer 1

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).

Thaumaturgy

Answer 2

I had to host my image (I chose S3 bucket), and it only worked once I supplied a url as my content rather than my local file.

Hyperplane

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Rik

Answer 3

Replace "/" by "%2F" in your sharing link.

Bond