The meta tags inside my Head component are not recognized by LinkedIn inspector but when I check the html all tags are where they are expected to be.
Can someone explain how it works, please?
<Head>
<title>Full Stack Developer</title>
<meta
name="description"
property="og:description"
content="Generated by create next app"
/>
<meta name="title" property="og:title" content="Full Stack Developer" />
<meta
name="image"
property="og:image"
content="some links"
/>
<meta name="author" content="Me" />
<link rel="icon" href="/favicon.ico" />
</Head>
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.
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.
I don't know why I get this error when I validate my site, but clearly I am doing something wrong because I get the following error too:
"An body element start tag seen but an element of the same type was already open"
<!DOCTYPE html>
<html lang="en-uk">
<head>
<title> Erasmus+</title>
<meta name="author" content="" />
<meta name="dcterms.rights" content="" />
<meta name="" />
<meta name="keywords" content="" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href="" type="text/css" />
<link href="" type="text/css" />
<link rel="stylesheet" type="text/css" href="" />
<link rel="shortcut icon" type="image/x-icon" href="" />
<?php wp_head();?>
<!--[if !IE]><!-->
<style>
</style>
<!--<![endif]-->
<script>
</script>
</head>
<body class="home blog">
It is a wordpress website: www.erasmus-plus.ro
I can't find what I am doing wrong.
Thanks!
Edit: I see that if I remove
<?php wp_head();?>
the error is gone, but isn't it needed for wordpress files?
That's not the complete HTML code. Looking at the source, apparently you have:
<input type='hidden' value='http://erasmus-plus.ro/wp-content/plugins/form-maker' id='form_plugins_url' />
In line 41. That's "displayable" code, so I think it's making that the head part closes and opening the <body> implicitly, and hence complaining when it gets to your explicit tag.
I guess that some stray plugin is misbehaving using wp_head to insert that into your . Try disabling your plugins one by one and you'll probably find the culprit. Probably something related to forms?