3

I am trying to make a user-created page using s3. The user submits a photo and a page gets created with a unique id.

My bucket Strucuture:

S3 BUCKET
-231(user-unique id)
  -index.html (generated template. code below)
  -shared.png (user generated canvas image)
-1231
-343
...

Shared link look like this:

https://cloudfront-url-to-my-s3-bucket.com/user-unique-id/

And this is index.html file at the location:

<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html charset=utf-8" />
      <title>title</title>
      <meta name="description" content="description"/>
      <meta name="viewport" content='width=device-width, initial-scale=1.0, minimum-scale=1.0, target-densityDpi=device-dpi, shrink-to-fit=no'/>
      <meta property="og:title" content="ogtitle"/>
      <meta property="og:description" content="ogdescription"/>
      <meta property="og:type" content="website" />
      <meta property="og:url" content="some URL for the project" />
      <meta property="og:image" content="http://url-to-s3bucket/476/shared.png" />
      <meta property="fb:app_id" content="556853245636152" />
      <meta property="fb:pages" content="123172157879988" />
   </head>
   <body>
      This is page
      <img src="./shared.png"/>
   </body>
</html>

Problem is that when shared, only Facebook is not picking up the meta data for social sharing. Twitter, iMessage, and other platforms I could test picked up fine. Is there a solution for this?

screenshots of the test(thumbnail is not displayed because I mistyped URL. but still shows the case):

messenger app I use:

Twitter Card Validator 'Twitter card validator

Facebook debugger Facebook debugger

Improve this question
7
  • 1
    All the og: and fb: meta data has no impact on SEO. That metadata is solely for social sharing. I edited your question to remove "SEO"
    – Stephen Ostermiller ♦
    Sep 26, 2021 at 10:16
  • 1
    What is the size of the image? FB is very sensitive to image size. See buffer.com/library/ideal-image-sizes-social-media-posts It should probably be exactly 1,200 x 628 pixels.
    – Stephen Ostermiller ♦
    Sep 26, 2021 at 10:19
  • size isn't exactly the size you mentioned. and I would understand if facebook didn't pick up just og:image. But facebook also does not pick up title and description. title exposes raw URL of S3 static hosting URL, and description is also just URL. Twitter and other platforms show title and description correctly when shared.
    – milez770
    Sep 27, 2021 at 3:15
  • 1
    Are those Korean (?) characters in the Facebook debugger screenshot appropriate for you and your site? When bots see inappropriate international content on your site it is sometimes a sign that your site has been hacked. I'm wondering if that is the case here.
    – Stephen Ostermiller ♦
    Sep 27, 2021 at 7:42
  • 1
    It sounds like you use the Korean FB interface. That doesn't indicate a hacked site.
    – Stephen Ostermiller ♦
    Sep 27, 2021 at 8:24

1 Answer 1

Reset to default
2

So I figured out what was the issue. Not sure why that is the issue though...

When I uploaded the HTML file through S3 SDK, I thought that Content-Type was a mandatory field. So I tried various types(gzip, identity and etc...) and none of them made any difference, until I deleted the field and specified nothing. I guess the default type is set when field is blank?

That was it. Hope anyone else out there struggling with this find this answer useful.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.