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.
Related
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.
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.
We have a site that supports multiple locales, but currently as most of our requests are routing through the Swedish data centre, all of our opengraph metadata is coming back in Swedish.
I've updated our code to look for the X-Facebook-Locale request header and fb_locale query param and set the locale of the site based upon that. I've also added meta properties of all of the locales that our site supports.
The site is:
http://mixrad.io/mixes/seeded/?artists=Madonna%2CSheryl%20Crow%2CKylie%20Minogue&s=fb8e5e45-a82c-4577-a01a-81ab358a5a81
And our opengraph tags are:
<meta name="description" content="MixRadio. It’s like having your own personal radio station. #MixRadio">
<meta property="og:site_name" content="MixRadio"/>
<meta property="og:locale" content="en_GB"/>
<meta property="og:locale:alternate" content="de_AT"/>
<meta property="og:locale:alternate" content="de_CH"/>
<meta property="og:locale:alternate" content="de_DE"/>
<meta property="og:locale:alternate" content="en_AU"/>
<meta property="og:locale:alternate" content="en_CA"/>
<meta property="og:locale:alternate" content="en_GB"/>
<meta property="og:locale:alternate" content="en_IE"/>
<meta property="og:locale:alternate" content="en_IN"/>
<meta property="og:locale:alternate" content="en_SG"/>
<meta property="og:locale:alternate" content="en_US"/>
<meta property="og:locale:alternate" content="en_ZA"/>
<meta property="og:locale:alternate" content="es_ES"/>
<meta property="og:locale:alternate" content="es_MX"/>
<meta property="og:locale:alternate" content="fi_FI"/>
<meta property="og:locale:alternate" content="fr_CA"/>
<meta property="og:locale:alternate" content="fr_CH"/>
<meta property="og:locale:alternate" content="fr_FR"/>
<meta property="og:locale:alternate" content="id_ID"/>
<meta property="og:locale:alternate" content="it_IT"/>
<meta property="og:locale:alternate" content="nb_NO"/>
<meta property="og:locale:alternate" content="nl_NL"/>
<meta property="og:locale:alternate" content="pl_PL"/>
<meta property="og:locale:alternate" content="pt_BR"/>
<meta property="og:locale:alternate" content="pt_PT"/>
<meta property="og:locale:alternate" content="ru_RU"/>
<meta property="og:locale:alternate" content="sv_SE"/>
<meta property="og:locale:alternate" content="th_TH"/>
<meta property="og:locale:alternate" content="tr_TR"/>
<meta property="og:locale:alternate" content="vi_VN"/>
<meta property="og:locale:alternate" content="zh_CN"/>
<meta property="twitter:card" content="summary"/>
<meta property="twitter:site" content="#MixRadio"/>
<meta property="og:description" content="MixRadio. It’s like having your own personal radio station."/>
<meta property="twitter:description" content="MixRadio. It’s like having your own personal radio station."/>
<meta property="og:title" content="Madonna,Sheryl Crow,Kylie Minogue"/>
<meta property="twitter:title" content="Madonna,Sheryl Crow,Kylie Minogue"/>
<meta property="twitter:image:src" content="http://asset.ent.nokia.com/asset/artists/200x200/372444.jpg"/>
<meta property="og:image" content="http://asset.ent.nokia.com/asset/artists/200x200/372444.jpg"/>
<meta property="og:image:type" content="image/jpeg"/>
<meta property="og:image:width" content="200"/>
<meta property="og:image:height" content="200"/>
<meta property="og:type" content="music.radio_station"/>
<meta property="og:url" content="http://www.mixrad.io/gb/en/mixes/seeded/?s=fb8e5e45-a82c-4577-a01a-81ab358a5a81"/>
<meta property="og:audio" content="http://www.mixrad.io/gb/en/mixes/seeded/?s=fb8e5e45-a82c-4577-a01a-81ab358a5a81"/>
<meta property="og:audio:type" content="audio/vnd.facebook.bridge"/>
When it's scraping from the Swedish data centre, the "og:locale" is sv_SE.
Now I've put all the og:locale:alternate properties in, the facebook debugger gives me this message:
Object at URL 'http://www.mixrad.io/se/sv/mixes/seeded/?s=47a36fcd-235b-4b20-9088-6f89353a9728' of type 'music.radio_station' is invalid because the given value 'de_at' for property 'og:locale:alternate' could not be parsed as type 'enum'.
Is anyone able to help me figure out how to get our metatags rendering in the correct language for a user?
Thanks
Update:
The 'de_at' enum problem is caused by the fact that Facebook doesn't support that locale, removing locales that facebook doesn't support has got rid of that particular error, but everything is still turning up in Swedish.
Facebook doesn't support every locale, here's their list of which ones they do: https://www.facebook.com/translations/FacebookLocales.xml
To my knowledge, Facebook initially scrapes your site without specifying a locale, then scrapes once per locale your meta tags indicate you support. As you've mentioned, you'll need to dynamically change the content attribute of each meta tag when your sever sees that X-Facebook-Locale header or their query parameter.
You're in charge of how you render your page, you probably want to be using the headers sent in requests from your users to determine language. Facebook doesn't look at the content of the page if you have opengraph locale support, it just looks at the meta tags and caches what it finds to display to its users within Facebook when rendering previews.
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.