I have the following html page which i share on facebook
<head>
...
<meta property="og:title" content="my title" />
<meta property="og:description" content="" />
...
</head>
...
I don't want the og:description in my shared link.
When i removed the og:description tag, it filled the description part from my post body. this also occurred when i set it's value to an empty string or space.
How can i make it work with empty og:description?
Use HTML Escape Characters
The meta field og:description is mandatory. When it's empty the default behavior is to fill it up with text from the page's <body>.
However, you can hack it with HTML escape characters:
<head>
...
<meta property="og:description" content=" " />
...
</head>
Useful escape characters in this context;
- space
… - horizontal 3 dots (as #idomusha suggested, +1)
This is a solution:
<meta property="og:description" content="…" />
From the docs:
Basic Tags: These are the most basic meta tags that you should use for
all content types.
og:description is one of them, which is probably why you cannot set it to empty.
Related
I am trying to modify dc tags element for blogger, the tags is something like this:
<meta name="DC.Title" content="title" />
<meta name="DC.Creator" content="creator" />
<meta name="DC.Description" content="description" />
But this tags can only be applied in one page(static), if say, I have 100 pages then all of the pages will be using the same tags and hence the wrong ones.
I am trying to automatically generate the tags according to the page info and to get the meta description from the template, I am using below code:
<meta expr:content='data:blog.metaDescription' name='description'/>
So I modify it to something like this:
<meta name="DC.Title" content="<data:blog.pageTitle/>" />
<meta name="DC.Description" content="data:blog.metaDescription" />
I am trying this, so that the tags chang automatically according to the pages, and the same tags info isn't repeated in all pages. But it isn't working.
Use the following code instead -
<meta name="DC.Title" expr:content="data:blog.pageName" />
<meta name="DC.Description" expr:content="data:blog.metaDescription" />
You will notice that we have added expr: in front of the content attribute. This is needed for telling the Blogger XML parser to replace the data layout tag with its dynamic value according to the page being viewed
This content="<meta name="DC.Title" content="<data:blog.pageTitle/>" />" and <meta name="DC.Description" content="data:blog.metaDescription" /> will insert a static value for the DC.title tag and DC.description tag respectively instead of inserting a dynamic value. This is also a coding error and to fix that expr:content should be used.
<meta expr:content='data:blog.pageName' name='dc.title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='dc.description'/>
<b:else/>
<meta expr:content='data:post.snippet' property='dc.description'/>
</b:if>
I have included the meta tags in the head section of the page
Og:url
Og:image
like this:
<title>villas</title>
<meta property="og:url" content="https://louverturetravels.com/h/villas/v/i/villas/store_systeme144.html?NxTy=110464" />
<meta property="og:image" content="http://louverturetravels.com/h/villas/dx577khz83dc.cloudfront.net/3330/280a471c-2661-4dd5-b8e5-6fc6876654fd.jpg" />
<meta property="og:image:secure_url" content="https://louverturetravels.com/h/villas/dx577khz83dc.cloudfront.net/3330/280a471c-2661-4dd5-b8e5-6fc6876654fd.jpg" />
In the debugger -scraped URL - See exactly what our scraper sees for
your URL
Now when I follow the scraped URL - I can clearly see the image tag.
like this:
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --><title>villas</title>
<meta property="og:url" content="https://louverturetravels.com/h/villas/v/i/villas/store_systeme144.html?NxTy=110464">
<meta property="og:image" content="http://louverturetravels.com/h/villas/dx577khz83dc.cloudfront.net/3330/280a471c-2661-4dd5-b8e5-6fc6876654fd.jpg">
<meta property="og:image:secure_url" content="https://louverturetravels.com/h/villas/dx577khz83dc.cloudfront.net/3330/280a471c-2661-4dd5-b8e5-6fc6876654fd.jpg">
Based on the raw tags, we constructed the following Open Graph properties.
All properties like
OG:url
OG:type
OG:title
OG:description
All are all correctly retrieved except
OG:image.
Am I missing anything?
This Facebook post https://www.facebook.com/damnlolcom/posts/812448255487528 looks like a photo post but is actually link, it clicks through to an external site.
I have tried sharing a link, removing all og metatags from my site except image path but it doesn't look like that.
The closest I can get is the default link behaviour without any title description, so just an image with the url besides/below rather than displayed over the top of the bottom of the image.
So what sort of post is this?
Thanks for any help.
Check out the url in linter .
raw tags found on page
Meta Tag <meta property="fb:app_id" content="172220699476208" />
Meta Tag <meta property="og:site_name" content="Damn! LOL" />
Meta Tag <meta property="og:title" content="Turns Out My Friend's Mom Is A Racist" />
Meta Tag <meta property="og:description" content="Click for your daily dose..." />
Meta Tag <meta property="og:url" content="http://www.damnlol.com/turns-out-my-friends-mom-is-a-racist-47206.html" />
Meta Tag <meta property="og:image" content="http://www.damnlol.com/pics/998/d6c09d2cc01d04bc5e47483e85774aee.jpg" />
Meta Tag <meta property="og:type" content="article" />
Everything looks normal here . They are not using anything special . It is just facebook presents links in slightly different designs on feed on different times .
ps : try setting property="og:type" content="article"
I have included opengraph tags on my page header like so:
<meta property="og:image" content="http://image1.jpg" />
<meta property="og:image" content="http://image2.jpg" />
Image 1 is also displayed in body tag and perhaps this causes image 1 to be grabbed again, producing duplicates in the Facebook Sharer. I thought only those images with og meta tags are supposed to appear. Facebook Debug Linter shows correctly only those two images. Any help?
you should use the code to get image from the current page. Here is the code:
<meta property="og:image" content="<?php echo $image; ?>" />
I am trying to make a Facebook share button on my site. Everything goes well except Facebook garbles non-ascii symbols obtained from meta tags. For example:
I am sharing a page with URL http://example.com/facebook/.
The page at http://example.com/facebook/ has the following meta tags inside its HTML:
<head>
...
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
...
<meta name="title" content="John Smith won £10000!" />
<meta name="description" content="Wanna be next John Smith?" />
<link rel="image_src" href="http://example.com/img/logo.jpg" />
...
</head>
The problem is that a pound (£) sign is shown as � symbol in Facebook share pop-in, that's not a desired behaviour.
I would be grateful for any thoughts.
I would recommend replacing the pound-sign with the equivalent entity, i.e. £ = £. You may also need to add a charset definition, e.g. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> In fact, you might be able to get away with just the meta tag -- just put it before the others.