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/
Related
Im very new to html and im wondering how to do people do this with their site? https://i.leastrio.net/CVUCo5PIR6.png I would like to do this with my site but im very confused. Thanks!
Technical Background
Many social network such as Discord generate link previews by grabbing the metadata of the web page. Most of the time they grab the following metadata.
<meta property="og:type" content="website">
<meta property="og:url" content="https://linkfork.co/">
<meta property="og:title" content="LinkFork | Link Preview Customization">
<meta property="og:description" content="LinkFork lets you shorten, and customize how your link will appear when shared on social media, for free.">
<meta property="og:image" content="https://linkfork.co/images/poster.png">
So to change this for your website you need to be able to modify the HTML source code. Each social network grabs different metadata. Therefor you need to modify it for the all social network you are targeting.
Easy Solution
One easy solution is using a service that allows you to customize the link preview for any link such as LinkFork. LinkFork will allow you customize the image, title, and description of the link preview. It will generate a shorten link that you can post to any social network and have consistent link preview for all your social media.
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...
Sharing certain links on Skype triggers the program to show preview with image from the page. On a website I work on - there are big images on certain pages but Skype picks up the logo of the website instead. I was unable to find what meta tags would make Skype pick up the intended image and preview it.
I have a <link rel="image_src" href="http://www.example.com/path/to/img.png" /> that works for Facebook-sharing preview (img.png is used instead of the logo of the website) but doesn't work for Skype.
So how would you hint Skype which image should be used for preview?
I will need to find some source to support this, but I think that if you have defined some open graph meta data, it will pick the image specified in there. For example, I have these in one of my sites:
<meta property="og:title" content="Site Title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://my.site.com" />
<meta property="og:image" content="http://my.site.com/images/thumb.png" />
<meta property="og:description" content="Site description" />
And the image displayed as the link preview on Skype is the thumb image specified in og:image (that is not available anywhere else on the page).
We are in 2021 and this Skype issue continues! :/
I communicated through Microsoft forum and several users have the same problem.
My open graph metadata is well defined, in fact the link previews fine on Facebook and Twitter, but not on Skype.
I already reported the bug to Skype, hopefully they will answer something ...
I have added the following tag to a website:
<meta property="og:title" content="Support Seekers" />
<meta property="og:description" content="Support Seekers is an online support group where members can share personal problems in an anonymous and safe forum. Everyday our counseling psychologist will post professional recommendations regarding each issue - which is free expert help!" />
<meta property="og:image" content="http://fminteractive.co/projects/supportseekers/wp-content/uploads/2015/01/ss-newlogo.png" />
Still when I share it on Facebook, the title, description and image are different than what is mentioned in here. Why is it so?
Note: I followed the advice here.
Go to: https://developers.facebook.com/tools/debug/ and debug the URL, this will clear Facebook's cache of the meta data and force Facebook to scrape the page again.
Look out for errors of missing OG tags as sometimes these can affect what Facebook outputs.