5

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: enter image description here

But the image is not showing in twitter card validator: enter image description here

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

Thank you for helping me.

dvbngln
  • 301
  • 2
  • 12
  • The og:url in your code, https://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. – Rich DeBourke Mar 26 '21 at 03:34
  • Hi @RichDeBourke, I edited the previous code I posted. Here's the the deployed link. https://psgc-api-git-fork-davebanguilan-dev-wareneutron.vercel.app/ – dvbngln Mar 26 '21 at 11:28

3 Answers3

18

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

Alan W. Smith
  • 24,647
  • 4
  • 70
  • 96
Rich DeBourke
  • 2,873
  • 2
  • 15
  • 17
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.

Ayse
  • 31
  • 7
  • 1
    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](/help/how-to-answer). – Community Jan 09 '22 at 06:21
0

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

francoisV
  • 79
  • 3