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.
Related
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 need to make social networks for example facebook.com to display website logo when someone put link on it in post, message or share it. I have googled this question and found that website should have this:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
and
<meta property="og:image" content="https://www.lucida.construction/wp-content/themes/lucida-theme/images/logo_for_sn.png" />
<meta property="og:title" content="Home - Lucida ConstructionLucida Construction" />
but it doesn't give any result. I tried to do this on Facebook and LinkedIn and both of them either not showing an image at all or display some random image and not the logo that I've set in the <meta property="og:image" /> tag.
Website I try to share are http://www.resolutemarine.com and https://www.lucida.construction
Any help appreciated! Thanks!
What you did is correct. I don't know about other social media channels but facebook caches the information of your page. So if have you shared your link before the results are probably cached before you made the change in your code (inserting the og:image part). I don't know when facebook exactly clears it but you can do it manually by using their tool (again).
I tried it with one site of your linked domain and it works for me.
So if you want to test it use their tool. Otherwise you just need to wait until they grab it automatically.
Here is the link to the tool - just enter the url that you want to be crawled again by the bot: Facebook sharing debugger
I tried to share my website sometime and it kept on showing me the website logo, till I had to uninstall all plugging and it still didn't work not knowing it was the All in one SEO plugging that I selected a default image when shared on social media, so if you have AIOS installed, kindly check the settings=> Social Networks and selected the social media you want to change the profile picture if you have it installed
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.
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/