I am trying to add image url to the meta og:image tag in my ReactJS project, but when I use Facebook Debugger to test it keeps saying invalid image url. Can anyone show me how to fix this?
And my code in public/index.html is
<meta property="og:image:width" content="1500"/>
<meta property="og:image:height" content="786"/>
<meta property="og:image" content="src/asset/img/IMG_0579.png"/>
Related
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:
INFO: Page fetched successfully
INFO: 11 metatags were found
ERROR: No card found (Card error)
I believe my tags are actually ok e.g. Facebook's sharing debugger shows what it sees:
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="#myTwitter">
<meta name="twitter:creator" content="#myTwitter">
<meta name="description" content="My amazing content">
<meta property="og:image" content="https://mys3bucket.s3.amazonaws.com/static/media/myImage.19c87b8d.jpg">
<meta property="og:title" content="My amazing title">
<meta property="og:description" content="My amazing content">
<meta property="og:url" content="https://example.com/whatever/mypage">
<meta property="og:type" content="website">
<meta property="og:locale" content="en_US">
<meta name="author" content="me">
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.
If I turn off the Lambda#Edge and just hard-code the same meta tags into my html.index, 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!
Fixed this - my issue was that when I was replacing the meta tags in the Lambda function, I wasn't specifying a Content-Type header in the response.
So:
const responseHeaders = {
'content-type': [{key:'Content-Type', value: 'text/html'}],
};
and after adding that to the response, social sharing on LinkedIn & Twitter worked.
I'm working on a clips system that serves short video files. I'm trying to have these video's embedded inside Discord so people can just send the link inside a Discord chat and you can watch the video in an embedded video player.
As far as I gathered, this should be possible by using OpenGraph and serving an MP4 video (unless I need my own video player?)
I am currently providing the following OpenGraph tags, and I'm wondering if I'm doing something wrong:
<meta property="og:site_name" content="Outplays">
<meta property="og:url" content="https://outplays.eu/Q5THkfY3">
<meta property="og:type" content="video.other">
<meta property="og:title" content="Mini rengar xD">
<meta property="og:image" content="https://outplays.eu/Q5THkfY3/thumbnail.png">
<meta property="og:video" content="https://outplays.eu/Q5THkfY3/video">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video:secure_url" content="https://outplays.eu/Q5THkfY3/video">
<meta property="og:video:height" content="720">
<meta property="og:video:width" content="1280">
<meta property="og:image:height" content="720">
<meta property="og:image:width" content="1280">
(this is for the following clip: https://outplays.eu/Q5THkfY3)
But once sent in Discord, it comes out like this, without an inline video player:
At the same time I just found out through Sentry that when I send this link in Discord, I get an java.io.IOException: Connection reset by peer exception thrown.
I've spent hours trying to figure this out and googling about it but I can't really seem to find why it doesn't work.
Basically what I want to achieve is to have main blog post image displayed on the link thumbnail while sharing it on social media like twitter, facebook, etc.
The meta tags that I have in <Helmet> are being added to the website, but they are not properly or as I would expect being read while sharing the link. I assume that is because the values are not yet populated at this moment. But how to fix it? Or what is the correct approach to achive this goal?
Here is how I try to inject meta tags inside of my components:
<Helmet>
<meta property="og:type" content="website"/>
<meta property="og:url" content={`https://blackh3art.dev/blog/${slug}`}/>
<meta property="og:title" content={title}/>
<meta property="og:description" content={short} />
<meta property="og:image" content={formatedimage}/>
<meta property="twitter:card" content="summary_large_image"/>
<meta property="twitter:url" content={`https://blackh3art.dev/blog/${slug}`}/>
<meta property="twitter:title" content={title}/>
<meta property="twitter:description" content={short} />
<meta property="twitter:image" content={formatedimage}/>
</Helmet>
But anywhere I will try to inject meta tags inside of my components it's not working. The only meta tags that are working are these that I have staticly declared in my index.html, and image is read to every link from my website.
Right now application is working in this way:
App context is fetching all the blog posts from my API connected with Sanity
Every component has access to the context
My <BlogPostPage/> component is getting all the data from the context
Website is already deployed so you can see if you want:
main page: https://blackh3art.dev/
blog post: https://blackh3art.dev/blog/25-most-common-questions-asked-on-web3-interview-by-vikram
I have a build a React application and deployed it on Heroku. When I try to load my home page "/" I get no errors and the page loads perfectly. But when I try to navigate to a different page "/RegistrationList" I get the Content Security Policy errors:
I have already searched for a solution online and found that I need to specify a Meta tag in the index.html file inside the public folder of my application. So now this file looks as follows:
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
http-equiv="Content-Security-Policy"
content="default-src * 'self' 'unsafe-inline' 'unsafe-eval'"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<link
href="https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght#0,400;0,700;1,400&display=swap"
rel="stylesheet"
/>
...
But at this point I still keep on getting the errors. The strange thing is that the main page ("/") loads perfectly and the second page gives these errors.
Your current CSP within the index.html is useless under a security point of view (you are allowing everything, so this is equivalent as not defining a CSP).
CSP can be defined either in your front-end (index.html) and back-end, and when there is a mismatch, you find all kinds of errors. If you try to remove the CSP meta tag from your index.html and you still get the error, it means the problem is in the server side.
In case of Apache server, this is located in file 'htaccess'. As for Heroku, I don't know exactly where it is. Perhaps this can work:
https://stackoverflow.com/a/57288001/10802411
I have an angular website with these meta tags
<meta property="og:type" content="{{type}}" />
<meta property="og:title" ng-bind-template="{{title}}" />
<meta property="og:description" name="{{description}}"/>
Now the problem is that everytime the crawlers crawls into the page it shows the curly braces. The suggested answer for this issue https://github.com/michaelbromley/angular-social-demo was to create a PHP server side script. But the problem is the backend for the website is node js. Is there any way to create this solution to node js?