Issue with Twitter and LinkedIn meta tags with Cloudfront & Lambda@Edge

Question

I'm using a Lambda@Edge function (triggered on origin request) to change the meta tags for a react site, hosted on S3 with Cloudfront, for rich social sharing. It works perfectly for Facebook, but doesn't for Twitter or LinkedIn.

LinkedIn errors (from their post inspector):
* We encountered a server error while trying to inspect the URL.
* (URL Redirect Trail) 500 Failure

and Twitter card validator error:

1. INFO: Page fetched successfully
2. INFO: 11 metatags were found
3. ERROR: No card found (Card error)

I believe my tags are actually ok e.g. Facebook's sharing debugger shows what it sees:

```

My question is - is Cloudfront the issue i.e. could it be stopping the Twitterbot / however LinkedIn does it? I have ran:

```
curl -A TwitterBot https://www.example.com
```

and it does return html with the correct tags, so I'm not sure.

Also - if I turn off the Lambda@Edge and just hardcode the tags in my index.html, Twitter and LinkedIn sharing work fine.

I can't see anything in the AWS docs of anything I should be doing to allow Twitter/LinkedIn bots.

Any help appreciated!

Accepted Answer

It's possible that CloudFront is causing the issue with the social sharing on Twitter and LinkedIn.

When a request is made to CloudFront, it checks the cache for a response before forwarding the request to the origin. If a cached response is found, CloudFront returns it to the viewer without forwarding the request to the origin. In your case, since the Lambda@Edge function is modifying the meta tags for rich social sharing, it's possible that the cached response does not contain the updated meta tags.

One way to test this is to invalidate the cache for the specific pages that contain the meta tags for rich social sharing. This will force CloudFront to forward the request to the origin, which will then trigger the Lambda@Edge function to update the meta tags.

Another thing you can do is to check the headers sent by the Twitterbot or LinkedIn bot and make sure the headers match the headers sent by other clients.

You can also check the CloudFront access logs to see if there are any errors related to the requests made by the Twitterbot or LinkedIn bot.

If none of the above solutions work, it's possible that the issue is with the Lambda@Edge function and the way it's modifying the meta tags. You can try to check the logs of the Lambda function to see if there are any errors that could cause the problem.

Finally, you can also try using another caching option instead of CloudFront, like using a CDN (Content Delivery Network) such as Cloudflare or Akamai, that might work better with your use case.

Issue with Twitter and LinkedIn meta tags with Cloudfront & Lambda@Edge

Relevant content