Amazon S3 base64 Image is not working on og:image tags though bucket is public

Question

Please give me some pointers for solving the issue which is listed below.

I have an issue on og tags for fetching the image. I am using the React with Razzle for server side rendering. All the site images is stored on aws bucket which has public access on for fetching the image.

These are the tags which I am using under the specific page through Helmet.

<Helmet>
          <title>{this.props.data.title+" | by "+this.props.data.username} </title>
          {/* facebook open graph tags */}
          <meta data-rh="true" property="og:locale" content="en_US" />
          <meta data-rh="true" property="og:url" content="http://somedomain.com/view/Some title of the post" />
          <meta data-rh="true" property="og:title" content="Some title of the post" />
          <meta data-rh="true" property="og:type" content="article" />
          <meta data-rh="true" property="og:description" content="Description of the post" />
          <meta property="og:image" content="https://s3.ap-south-1.amazonaws.com/bucketname/somerandomnameofimage.png" />
          <meta property="og:site_name" content="SiteName" />  
        </Helmet>

After some findings i used a random image from google in the og tag url and worked fine but i when i using s3 bucket link for the same image or different image it doesn't work.

What I am thinking is it will not fetch the aws s3 image. But if that is the case then how other people do.

I checked many sites og tags and found that they will use some subdomain.domain.com/someimagename.extension, If this is the only case then how I achieve this. And my question is then why we use image hosting provider if we have to do it like the ancient programming way.

Please suggest me how to solve this. Any help or suggestion is really appreciated.

UPDATE I have dig into this and found that there will be some issue on image as my image is uploaded from FE to backend through Base 64 image. Backend upload that image on s3.

I have checked my image URL through curl command ie

curl -i "mybucket-imageurl"

so on that I found

HTTP/1.1 200 OK
x-amz-id-2: ***********************************************************
x-amz-request-id: ****************
Date: Mon, 13 Oct 2020 08:37:31 GMT
Last-Modified: ************************
ETag: "*********************"
Content-Encoding: base64
x-amz-version-id: ***********************
Accept-Ranges: bytes
Content-Type: image/jpeg
Server: AmazonS3
Content-Length: 1095517

Then I have uploaded one image directly on amazon S3 and used that url and getting the og:image. curl response is

HTTP/1.1 200 OK
x-amz-id-2: ***********************************************************
x-amz-request-id: ****************
Date: Mon, 13 Oct 2020 08:37:31 GMT
Last-Modified: ************************
ETag: "*********************"
x-amz-version-id: ***********************
Accept-Ranges: bytes
Content-Type: image/png
Server: AmazonS3
Content-Length: 569666

I have checked that just above response not have content-encoding column.

Can anyone suggest me what to do as on my bucket there is around 500+ image which are uploaded by base 64 and have same issue.

What is the best and efficient way to do this

Answer 1

It really bad that no one suggested me.

So what my findings and what is the solution that resolved my issue is that when we upload the base64 image from server to s3 then there is a header attached on the image which is

content-encoding: base64

We need to remove this from the image on s3. Tested it and it now show on og tags.