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">
Related
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">'''
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.
When i try to post url http://appleinsider.com/articles/17/05/02/apple-cruises-past-old-market-capitalization-record-may-hit-800-billion-before-earnings
i did not get any preview in StockTwits,
while it looks good in Twitter
On other hand when i post some YouTube video to StockTwits it show preview
https://www.youtube.com/watch?v=uLzJ3OGU07A
Question: Which of OpenGraph meta-tags support StockTwits?
I have already added
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<meta property="og:locale" content="en_US" />
<meta property="og:site_name" content="site Inc." />
<meta property="og:image" content="http://test.com/image/279205d5-9a89-40d1-9c13-5fb255b16754?t=42855.682442245372"/>
<meta property="og:type" content="article" />
<meta property="og:url" content="http://test.com:80/279205d5-9a89-40d1-9c13-5fb255b16754" />
<meta property="og:title" content="My Title" />
<meta property="og:description" content="My description"/>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="http://test.com/image/279205d5-9a89-40d1-9c13-5fb255b16754?t=42855.682442245372"/>
It works for Twitter, but does not help for StockTwits =(
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.