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.
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 have this post: https://tikex-dev.com/kubl/szkg/j1vd/7w68
it has og:img: https://t44-post-cover.s3.eu-central-1.amazonaws.com/v56o
If you load it in a browser it animates, but not on Facebook, why?
And I have those headers:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta property="og:title" content="555">
<meta property="og:description" content="555">
<meta property="og:image" content="https://t44-post-cover.s3.eu-central-1.amazonaws.com/v56o">
<meta property="og:image:width" content="1920">
<meta property="og:image:height" content="1080">
<meta property="og:image:type" content="image/gif">
<meta property="og:type" content="website">
<meta property="fb:app_id" content="402670860613108">
<meta property="og:url" content="https://tikex-dev.com/kubl/szkg/j1vd/7w68">
<meta name="next-head-count" content="11">
</head>
Giphy uses mp4 as og:video. Do I really need video to show an animation?
Tenor uses webm format in og:video. Is og:video really needed?
What I've done so far:
Checked https vs http
placed images in root vs sub-folder
removed/added og:image:secure_url
resizing and compressing image
png vs jpg
cleared caches
I was working at one point, but then stopped, and its unclear when, so hard to diagnose what broke it.
site is https://www.jaredzimmerman.com
OG Image is located at https://www.jaredzimmerman.com/public/avatar_crop_1200_og.png
and OG Header is
'''
<link href="https://www.jaredzimmerman.com" rel="canonical">
<meta name="robots" content="max-snippet:-1, max-image-preview:large, index, follow">
<meta name="googlebot" content="index,follow">
<meta name="author" content="Jared Zimmerman">
<meta property="og:type" content="website">
<meta property="og:locale" content="en_US">
<meta property="og:url" content="https://www.jaredzimmerman.com">
<meta property="og:url" content="https://www.wikidata.org/wiki/Q29918442">
<meta property="og:title" content="Jared Zimmerman">
<meta property="og:site_name" content="Jared Zimmerman">
<meta property="og:description" content="Award winning product design leader, educator, and speaker ✨">
<meta property="og:image" content="https://www.jaredzimmerman.com/public/avatar_crop_1200_og.png">
<meta property="og:image:secure_url" content="https://www.jaredzimmerman.com/public/avatar_crop_1200_og.png">
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:alt" content="portrait illustation of Jared Zimmerman drawn by Sara Lee">
<meta property="twitter:card" content="summary">
<meta name="twitter:creator" content="#jaredzimmerman">
<meta property="twitter:creator" content="#jaredzimmerman">
<meta property="twitter:url" content="https://www.jaredzimmerman.com/">
<meta property="twitter:title" content="Jared Zimmerman">
<meta property="twitter:description" content="Award winning product design leader, educator, and speaker✨">
<meta property="twitter:image" content="https://www.jaredzimmerman.com/public/avatar_crop_1200_og.png">'''
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.
I am having trouble with internationalization of my open graph objects. I am providing the og:locale as well as the og:locale:alternate tags, but Facebook does not scrape my objects in different locales. In the object debugger at http://developers.facebook.com/tools/debug i can see the og:locale:alternate are parsed and it shows them as an array. But clicking one of them results in a scrape without any parameter. Neither fb_locale nor locale nor the header X-Facebook-Locale are provided.
Here is one of the example objects:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta property="og:locale" content="en_US">
<meta property="og:locale:alternate" content="de_DE">
<meta property="og:locale:alternate" content="en_US">
<meta property="og:locale:alternate" content="fr_FR">
<meta property="fb:app_id" content="181576101937079">
<meta property="og:type" content="APP_NAMESPACE:level">
<meta property="og:url" content="http://apps.facebook.com/APP_NAMESPACE/?ogObjType=level&ogObjId=0_0&ogObjVariant=">
<meta property="og:title" content="Tree House Level 1">
<meta property="og:description" content="">
<meta property="og:determiner" content="the">
<meta property="og:image" content="https://URLTOIMAGE">
</head>
<body>
...
</body>
</html>
And when I add fb_locale=de_DE by hand, it returns.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta property="og:locale" content="de_DE">
<meta property="og:locale:alternate" content="de_DE">
<meta property="og:locale:alternate" content="en_US">
<meta property="og:locale:alternate" content="fr_FR">
<meta property="fb:app_id" content="181576101937079">
<meta property="og:type" content="APP_NAMESPACE:level">
<meta property="og:url" content="http://apps.facebook.com/APP_NAMESPACE/?ogObjType=level&ogObjId=0_0&ogObjVariant=">
<meta property="og:title" content="Baumhaus Level 1">
<meta property="og:description" content="">
<meta property="og:determiner" content="the">
<meta property="og:image" content="https://URLTOIMAGE">
</head>
<body>
...
</body>
</html>
Can anyone tell why Facebook does not scrape the localized versions of my objects?
I have same problem.
OG-tags:
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="ru_RU" />
If I did
curl -X POST -F "id=http://gorokhovsky.nampohui.ru" -F "scrape=true" -F "locale=en_GB" "https://graph.facebook.com"
or locale=en_US
my server got request from FB, and I receive a correct answer.
{"url":"http:\/\/gorokhovsky.nampohui.ru\/","type":"website","title":"Surfingbird - your personal web!","locale":{"locale":"en_us","alternate":["en_gb","ru_ru","fr_fr"]},"image":[{"url":"http:\/\/surfingbird.ru\/img\/logo-mailru2.gif?v=1"}],"description":"We pick interesting websites, photos and videos that you\u2019ll like.","site_name":"Surfingbird.ru","updated_time":"2013-02-27T15:04:20+0000","id":"356024197844717","application":{"id":"179736405468568","name":"Gorokhovsky2","url":"http:\/\/www.facebook.com\/apps\/application.php?id=179736405468568"}}
But if I set locale=fr_FR or ru_RU, I receive
"error":{"message":"Unsupported post request.","type":"GraphMethodException","code":100}
My server didn't get request from FB
If I set locale=ru_ru or fr_fr, it worked like locale=en_US
I think FB incorrect working with case of locale's characters
Try using the lower case for locale en_us instead of en_US.