Question posted in 
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.
3
Answers
Twitter likes name, not property (the OG meta tags use property).
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).
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.
Replace "/" by "%2F" in your sharing link.