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

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" Sep 26 '21 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. Sep 26 '21 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 '21 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. Sep 27 '21 at 7:42
  • 1
    It sounds like you use the Korean FB interface. That doesn't indicate a hacked site. Sep 27 '21 at 8:24
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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