enter image description hereI have added image in my website. I want to show that image when I share my website link.It is showing only in whatsapp not in facebook and skype.
My website link is: https://www.telotrovo.it/
I have tried this code:
<meta property="og:image:secure_url" content="https://www.telotrovo.it/wp-content/uploads/2016/02/siteimage.jpg"/>
<meta property="og:image" content="http://www.telotrovo.it/wp-content/uploads/2016/02/siteimage.jpg"/>
Facebook,Skype and others are using Open Graph Protocol to get those. 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.website.com" />
<meta property="og:image:url" content="http://my.website.com/images/thumb.png" />
<meta property="og:description" content="Site description" />
And the image displayed as the link preview on Skype and Facebook is the thumb image specified in og:image:url.
These four should be present in your tag. Also make sure you add the XML NameSpace to the tag:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
You can try following ,
<meta property="og:image" content="https://www.telotrovo.it/wp-content/uploads/2016/02/siteimage.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="200">
<meta property="og:image:height" content="200">
Image width should specify, minimum 200 X 200 , you can change it though
Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images.
Related
On my webpage I have all the required OG tags, and on facebook preview this is working, on android and other messaging app also the preview is working, but only on iMessage the preview is broken. Do we need to add any extra tags to fix this?
please see the tags I have right now:
<meta property="og:title" content="My site title">
<meta property="og:site_name" content="mysitename.com">
<meta property="og:url" content="https://mysite.parentsite.com/">
<meta property="og:description" content="Here is a description of my site that will show up in the Facebook card.">
<meta property="og:image" itemprop="image" content="https://mysite.parentsite.com/wp-content/uploads/2022/07/pf-fb-test.jpg">
<meta property="og:image:secure_url" content="mysite.parentsite.com/wp-content/uploads/2022/07/pf-fb-test.jpg" />
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="826" />
<meta property="og:image:height" content="539" />
<meta property="og:image:alt" content="This is a sample profile pic">
<meta property="og:type" content="website">
I'm trying to get the large image card to work with a website. The metadata is being read correctly, but it's displaying the small summary card, instead.
My metadata:
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="volkischexe.com">
<meta property="twitter:url" content="/germania/index.php">
<meta name="twitter:title" content="Germania: An Introduction">
<meta name="twitter:description" content="...">
<meta name="twitter:image" content="http://volkischexe.com/res/cards/germania-intro.png?605a78eeba1aa">
<!-- OpenGraph Card -->
<meta property="og:type" content="website">
<meta property="og:url" content="/germania/index.php">
<meta property="og:title" content="Germania: An Introduction">
<meta property="og:image" content="http://volkischexe.com/res/cards/germania-intro.png?605a78eeba1ae">
<meta property="og:description" content="...">
<!-- HTML Meta -->
<title>Germania: An Introduction</title>
<meta property="og:url" content="http://volkischexe.com/germania/">
<meta property="og:image" content="http://volkischexe.com/res/cards/germania-intro.png?605a78eeba1b1">
<meta property="og:title" content="Germania: An Introduction">
<meta property="og:description" content="...">
<meta name="description" content="...">
<title>Germania: An Introduction</title>
Twitter seems to see my metadata correctly, too:
What am I missing here?
ETA: The validator doesn't show my cards correctly, but if I actually tweet them, they show up just fine. So there's something going on with the validator, but as long as my cards show up on Twitter, I'm good.
There are a few things that could be stopping Twitter from sharing a large card for your site:
A couple of your twitter meta settings use “content,” but twitter wants “name.”
Your site is redirecting to https, so use the secure version for the URLs in your meta information.
It’s good to include the image sizes for Facebook.
And you don’t need the index.php file name – your server will automatically serve up the index.php file.
Try replacing your code with this:
<!-- OpenGraph Card -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://volkischexe.com/germania/">
<meta property="og:title" content="Germania: An Introduction">
<meta property="og:image" content="https://volkischexe.com/res/cards/germania-intro.png?605e46b26abc5">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:description" content="From where does the modern Western world derive its values and morals?">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:domain" content="volkischexe.com">
<meta name="twitter:url" content="https://volkischexe.com/germania/">
<meta name="twitter:title" content="Germania: An Introduction">
<meta name="twitter:description" content="From where does the modern Western world derive its values and morals?">
<meta name="twitter:image" content="https://volkischexe.com/res/cards/germania-intro.png?605e46b26abc1">
One thing (that may or may not be impacting Twitter) is the start of your page is missing DOCTYPE and some other stuff:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Germania: An Introduction</title>
<meta name="description" content="From where does the modern Western world derive its values and morals?">
<link rel="preload" href="/res/AndBasR.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="/res/CelticHand.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="/res/Norse-Bold.otf" as="font" type="font/otf" crossorigin>
<link rel="stylesheet" href="/res/main.css">
<script src="/res/main.js"></script>
One thing with the Twitter card validator — sometimes is doesn’t rescrape your site when you click the Preview Card button. You may need to restart your browser (closed and reopened) and rescrape a couple of times to get it to load the new version.
DEMO URL - http://maz.node1357.speedyrails.net/webreader/803
The page has open graph tags where the open graph image is served though HTTP from S3 is of 240px width and 320px height.
<meta property="og:url" content="http://maz.node1357.speedyrails.net/webreader/803">
<meta property="og:title" content="sharetest_4">
<meta property="og:site_name" content="MAZ">
<meta property="og:description" content="test pdf 10 page">
<meta property="og:image" content="http://s3.amazonaws.com/maz_staging2/staging2env1/issues/00022/webreader/thumbs/staging2env1_00022_thumb_0001#2x.gif" />
Why does the Image Preview switcher appear here ? The first image seems to be the one specified by the og:image tag, but the second image never seems to load although there are many images in the page which are of bigger sizes than the ones specified by Linkedin.
I checked some other websites. Linkedin Sharing from this post on Techcrunch shows no switcher - CLICK HERE
But sharing from this one does - CLICK HERE
Both of these URL have images of width=680px and height > 300px. Any guidelines on how the image fetching from open graph tags on Linkedin work ?
Per the LinkedIn Developer Reference, you need the Open Graph namespace in the html tag.
<html prefix="og: http://ogp.me/ns#">
<head>
<meta property="og:title" content="My Shared Article Title" />
<meta property="og:description" content="Description of shared article" />
<meta property="og:url" content="http://example.com/my_article.html" />
<meta property="og:image" content="http://example.com/foo.jpg" />
</head>
<body>
…
</body>
</html>
It's ASP.NET-MVC. Trying to share an article on facebook.
_Layout.cshtml:
#RenderSection("Title", false)
<title>#(helper.Title)</title>
Details.cshtml:
#section Title{
<title>#(helper.ArticleName) - #(helper.Narrator)</title>
<meta property="og:title" content="#(helper.ArticleName)" />
<meta property="og:type" content="article" />
<meta property="og:image" content="#(helper.ArticleImage)" />
<meta property="og:url" content="#(helper.ArticleUrl)" />
}
On Facebook, it displays the main logo of the site, which is placed under "~\Content\Images\Page" folder, instead of the image set "#(helper.ArticleImage)". I tried to put the image's url: https://fastercvstorage.............../115d26b0-60c0-7bc6-8f11-08d12d2dff6a.jpg. Didn't make any difference.
Working on adding open graph tags to the individual pages of our wedding photography site for use by the Facebook Like button. I'm close, but I still get one warning
Extraneous Property: Objects of this type do not allow properties named og:sitename.
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<meta name="generator" content="jAlbum 9, http://jalbum.net">
<meta property="fb:admins" content='1591068265'>
<meta property="og:type" content="website">
<meta property="og:sitename" content="Dawn Kelly Photography">
<meta property="og:url" content="http://www.DawnKellyPhotography.com/edgarvaht/galleries/FBalbum/fbindex.php?show=slides/NodownLoad.html">
<meta property="og:image" content="http://www.DawnKellyPhotography.com/edgarvaht/galleries/FBalbum/slides/NodownLoad.jpg">
<meta property="og:title" content="Facebook Test Gallery - NodownLoad.jpg">
<meta property="og:description" content="Facebook Test Gallery, image: NodownLoad.jpg">
Since it is saying it is extraneous, does that mean I don't need the sitename tag? As for the type, is "website" a good choice, or should I pick "product" or something else since the page is a page to purchase the image.
A page like that should definitely not use the website type as that's intended for whole sites and not individual pages on a site, product is probably a more appropriate type. Additionally, the correct property is og:site_name and not og:sitename so that is probably what is causing your issue.