After deploying my react app, I noticed that when I am sharing it on whatsapp for example, The link looks really basic.
Title is "React App" and descriptions is "website created with create-react app".
I have managed to change title and description from the meta inside index.html and got something like:
My App
My description
I am trying to make it look like that:
I have read about React helmet but I did not understand if it is right for my case.
Thanks in advance!
For determining what your website looks like on social media, you'll want to add more meta tags containing Open Graph data.
// These are the 4 required properties, but there's more
<meta property="og:title" content="My Title">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.mycanonicalurl.com">
<meta property="og:image" content="mymainimage.jpg">
Using this protocol you can tell crawlers what properties to use to make up those previews on WhatsApp, Facebook, etc.
Here's the docs for all the available properties:
https://ogp.me/
React helmet is helpful if you need to customise the meta data on a per page basis, if you just need one set of data to be shown for your entire site it's not necessary for you to use it.
You should look into Open Graph tags. To break down the example image you provided there is 4 noteworthy sections (taken from their source code):
<meta property="og:title" content="National Geographic: Stories of Animals, Nature, and Culture">
<meta property="og:image" content="https://www.nationalgeographic.com/content/dam/ngdotcom/rights-exempt/homepage/nationalgeographicog.ngsversion.1530540626597.adapt.1900.1.jpg">
<meta property="description" content="Explore National Geographic. A world leader in geography, cartography and exploration.">
<meta property="og:url" content="https://www.nationalgeographic.com">
You can take a look at the page source to see this information and match it up if you would prefer to learn by seeing.
If you do look, you'll notice there is a seeming repetition of some tags, e.g. twitter:image, this allows you to provide images in different aspect ratios for these platforms to pull.
Note: It can sometimes take time for the crawler to pick up on changes to your meta tags, so be aware changes might not be immediately reflected.
I am trying to share an article on linkedin. Everything is okay but linkedin does not recognize featured image.
I put my article URL on Linkedin Post inspector tool
Post inspector tool result: It took too long to get a response for this URL, so we will not scrape this content
screenshot of linkedin post inspector tool result
I search on google why linkedin can not pull featured Image. I find a solution described in this article
https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=en
I placed og tag accordingly.
I changed image width to 1200px height to 800px.
I kept image size under 5MB but it does not fix the problem.
Then I changed file permission to server.
I changed permission of storage->app->public->posts to 755. Image file permission generates 644 by default. I used laravel framework to my blog website if this information is helpful.
I also checked facebook debugger tool that works fine
screenshot of facebook debugger tool result
This is my open graph API implementation
<!-- open graph api start -->
<meta property="og:title" content="Finding the best website design and development company in Dhaka Bangladesh" />
<meta property='og:description' content="As you are reading this post, I am assuming you are looking for a website design and development company in Bangladesh or you are enthusiastic in a web design and development career. Whatever is the case, I am going to.... Finding the best website design and development company in Dhaka Bangladesh"/>
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.chotosite.com/finding-the-best-website-design-and-development-company-in-dhaka-bangladesh" />
<meta property="og:image:secure_url" content="https://www.chotosite.com/storage/posts/1577983797Best-website-design-and-development-company-in-Bangladesh.png" />
<meta property="og:image" content="https://www.chotosite.com/storage/posts/1577983797Best-website-design-and-development-company-in-Bangladesh.png" />
<!-- open graph api end -->
And this is my article URL: https://www.chotosite.com/web-design-company
If you need more information please View source code. I am beginner in programming. I think there might be a problem somewhere in the code. Help me please. Thank you...
I have a website that triggers a warning when clicked through a link shared on Facebook. The warning says:
Possible problem with this link
We have detected that this link: http://www.example.online/ may be malicious.
To keep your account and device secure, only follow links you trust."
I ran the Facebook debug tool and I get the following error message:
Inferred Property
The og:image property should be explicitly provided, even if a value can be inferred from other tags.
I Googled this issue and I understand it is caused by some lack of meta information in the site header, but my site's code has the following in the header:
<meta http-equiv="etag" content="2efdc27c8967f14e2c829e601f7a1228"/>
<meta property="og:title" content="South Jersey Aerial Photograpahy"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.example.online/"/>
<meta property="og:image" content="https://static.example.com/media/56a444_9273e80a60684dc8b38e56025059f356%7Emv2_d_3200_1800_s_2.png"/>
<meta property="og:site_name" content="South Jersey Aerial Photograpahy"/>
<meta property="og:description" content="South Jersey Aerial Photography is South Jersey's premier aerial photography and aerial videography company. Fully licensed and insured. Contact us today!"/>
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE"/>
I have no idea how to fix this error message. The property metatag is clearly there.
In short, you should re-fetch your website information using this tool:
https://developers.facebook.com/tools/debug/
Paste your URL and press Debug. Then either do Fetch, or press Scrape Again.
This will refresh Facebook cache, and your html-page will be reloaded.
Some additional info: https://stackoverflow.com/a/44453472/4899346
Following the already mentioned link to the Facebook object debugger, make sure that your og tags are written RIGHT AFTER the opening <head> tag.
Not sure why this happens but I used to run into the exact same issue until I moved them right after it and then clicked once again on "Fetch new scrape information".
Hope this helps!
Check for og:url tag and see whether the url is correct or not. In my case the url was not correct and so it was causing this type of error.
Ran into the same issue today. It would appear that it's a bug on Facebook's end.
Just by refreshing the Sharing Debugger will show me different error messages after each reload, including "Image Too Big", which clearly was not the case, and "Meta Tags In Body" which also was not correct.
As long as the correct image shows up in the Link Preview, I think you're good to go.
Had same issue today
'og:image' property should be explicitly provided, even if a value can
be inferred from other tags
somehow my linter replaced "(quotation mark) to ”(right double quotation mark), therefore https://developers.facebook.com/tools/debug/sharing/ was showing issue,
cause of that, these meta properties were not visible to fb-bot. After this correction it works fine
Even if you have a proper OG tag on a page, can Facebook still ignored og:image value.
On my Magento 2 website, I use Magento 2 Facebook Open Graph by Magefan and had this issue too even all OG tags look good :-(
After I contacted them (magefan), they fixed the issue and released the module update v2.0.12
It turned out that Facebook only looks for og:image in the first 50Kbs of the page source.
So if you are using inline CSS, or some JS in the the og:image will not be seen by Facebook. That was the reason in my case.
The solution is to put OG tags as high as possible in the node.
Added the
<meta property="og:image:secure_url" content="https://abc/image.jpg" />
in order for the facebook debug to actually show my issue that the image was not 200x200. Corrected that and had to completely refresh the debug to resolve.
OG tags should be property instead of name for those of you who copy/paste from other tags like twitter, who uses name.
Eg
<meta property="og:image" content="..." />
<meta name="twitter:image" content="..." />
If you're using a plugin like W3 Total Cache, Just purge your cache and go back to Facebook object debugger page mentioned by #Alex C and then click on Fetch new scrape information.
This solved the issue for me
`<meta property="og:image" content="https://static.wixstatic.com/media/56a444_9273e80a60684dc8b38e56025059f356%7Emv2_d_3200_1800_s_2.png"/>`
<meta property="og:image:width" content="2500"/>
<meta property="og:image:height" content="1330"/>
1200 pixels x 627 pixels
The most frequently recommended resolution for an OG image is 1200 pixels x 627 pixels (1.91/1 ratio). At this size, your thumbnail will be big and stand out from the crowd. Just don't exceed the 5MB size limit.
Double check your img file size.
Remember you need to add og:image:secure for "https"
2.og:image only works with "http".
Try
<meta property="og:image" content="http://example.com/image">
<meta property="og:image:secure" content="https://example.com/image">
I had og:url content as http://... when my site always redirected to https://.... Updating this fixed the issue for me.
I have had success by using https://developers.facebook.com/tools/debug/sharing/batch/ to invalidate the FB cache, then using https://developers.facebook.com/tools/debug/ to refresh it.
This seems to help if a page/post has been previously shared, say, and then an og image or other og element was added.
I have a customized share button using this code:
<i class="social fa fa-facebook-square fa-3x social-fb"></i>
and I'm specifying what I would like it to say and display here:
<!--facebook share directions-->
<meta property="fb:app_id" content="1234567890" />
<meta property="og:type" content="website" />
<meta property="og:url" content="url here" />
<meta property="og:title" content="title here" />
<meta property="og:image" content="image here" />
<!--facebook share directions-->
but when I go to share it pulls a random picture and random text to appear in the post, is there any way for me to force this? could it be stuck in cache? I'm completely stuck
Instead of using sharing, you will could use the feed dialog, that's the only way to define what will be shared in your story. But if you really want to use Open Graph, you will have to implement it correctly and sometimes need to wait a few days. I would need to take a look at the website, or at least see your full head code, are you using any Canonical URL tag? If the implementation is all correct, you need to wait a couple days, and try sharing it again. If you still having the same share, you can now use Facebook url scraper , the Open Graph object debugger, its on the platform website. But, my friend, honestly, sharing with "" is not functional, have a very bad user experience, popup blocking, and lots of other issues. Please, implement Facebook JS SDK, even if you choose to keep using share instead of FEED .
I need to create custom share buttons for Facebook, Twitter and Google +.
At the moment I have the following:
Facebook
facebook
Google
google
Twitter
twitter</li>
This seems to be working. But I still have a few problems:
How to specify the title of the page being sent in each service?
In Google + I there is the following on the url: "confirm?hl=en" ...
If the site is not in English should I change "en" to the site's language?
Thank You,
Miguel
Social networking services look for Open Graph metadata when a page is shared. To specify what this data is, you have to include the meta tags in the head of your page. The following should be your bare minium tags to include. For the rest, google them and you will find them easily enough:
For the page title:
<meta property="og:title" content="Title Here" />
For the URL
<meta property="og:url" content="http://www.example.com/" />
For the image that is typically displayed when someone shares a page to their wall:
<meta property="og:image" content="http://example.com/image.jpg" />
Description text that is generally included when someone shares a page:
<meta property="og:description" content="Description Here" />
However, I'm not exactly sure what "confirm?hl=en" does, but if you want to tell a search engine to crawl a site in a different language, then you can do so with the locale property.
That's a bit more complicated, though. Check out this article for more info on internationalization.
https://developers.facebook.com/docs/opengraph/guides/internationalization/