Our website meta tag contains special characters such as "í and é" and when I share the website on Facebook the special characters show in a weird way, image attached. How can this be fixed?
Include the Open Graph XML namespace extension to your HTML declaration
< html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
Inside your use the following meta tag to define the image you want to use
< meta property="og:image" content="your_image_here" />
3.Visit https://developers.facebook.com/tools/debug/ and follow the instructions to change the final image for the preview.
Related
I used to have my website hosted through Shopify, and when I linked to it in my LinkedIn job description the logo showed up. I've since moved my website to GitHub Pages, and now the logo is blank when I link to it in LinkedIn (or anywhere else for that matter). Is there something I can do to fix this, or is it just a con of GH Pages?
It always helps to include a link to the codebase for reference, but it looks like you're likely working with this repo on your GitHub profile.
It's possible that Shopify or a theme you were using before included these by default, but typically you have to specify the preview image in your site's metadata. The preview images for formatted links are pulled from an Open Graph image property, which you define in a meta tag in your HTML's <head> section (see the OG documentation here). So, in your head include file, you'd add a meta tag like this:
<meta property="og:image" content="https://graemeharrison.com/assets/img/logo.png" />
Then, ideally, you'll include this head file in each layout file so that it's included in each page's HTML.
A couple of things that worked for me:
Put your image in your 'public' directory near index.html, and in your meta tag retrieve it with content="http://yourdomain.com/yourimage.png". (https didn't work for me but http did)
Also, https://www.linkedin.com/post-inspector is a good tool to check your og image appears.
I'm using MODX Revolution 2.5.7 version for my site.
But unable to update the Meta tags. I searched a YouTube video & follow their given steps But still no success.
I have attached below 2 snaps..
1st for updating the Meta tags & second is published page after saving the metas.
Picture of Dashboard while updating the Meta tags:
Picture after updating the Meta Tags:
It seems as you have confused template tags in your html. It should be
<meta name="description" content="[[*description]]"/>
And you are likely to have:
<meta name="description" content="[[*longtitle]]"/>
that's why you see long title where description should go.
it looks to me like your cache needs to be cleared. (both browser & modx) - if you are using a CDN (i.e. cloudflare) or other caching service - clear that too.
your tags should look like:
<meta name="description" content="[[*description]]"/>
<meta name="keywords" content="[[*introtext]]"/>
...for the setup you are using.
You could also setup a template variable for the keywords (or any other meta information) and out put it like this:
<meta name="keywords" content="[[*keywords]]"/>
(assuming you named the variable "keywords")
There are also quite a few SEO/Meta extras available for modx ~ just search the extras directory.
When the user click "Recommend" button on my page, I'd like to post on his wall title and part of the article from my page. How can I change the information which is send to the user wall/timeline? I've found a tip that I should add open graph meta tags, but when I set og:title and og:description in META:
<meta content="Title" property="og:title">
<meta content="Description" property="og:description">
nothing change.
Any other ideas? Or maybe I do sth wrong?
[Edited]
My code:
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<meta content="Test1" property="og:title">
<meta content="website" property="og:type">
<meta content="*Link to my web page*" property="og:url">
<meta content="*Link to my image*" property="og:image">
<meta content="Description" property="og:description">
<title>Page Title</title>
[...]
</head>
In the Object Debugger I get such messages:
Warnings That Should Be Fixed
Inferred Property: The og:url property should be explicitly provided,
even if a value can be inferred from other tags.
Inferred Property: The og:title property should be explicitly
provided, even if a value can be inferred from other tags.
Inferred Property: The og:locale property should be explicitly
provided, even if a value can be inferred from other tags.
Open Graph Object Properties
og:url: Link to my web page
og:type: website
og:title: Page Title
og:updated_time: 1319793567
Raw Open Graph Document Information
Canonical URL: Link to my web page
So it seems that the debugger gets only info from my page (e.g. <title>), not from Open Graph tags.
What I do wrong?
Probably I've found the reason of my problem - I render my page using JavaScript and then I set my META. Is there any way to set META (dynamically) visible for FB?
Did you run your page through the debug tool at http://developers.facebook.com/tools/debug ?
The debug tool clears Facebook's cache of your page as well as checking the syntax of your meta tags.
There are more tags required than the two you listed there
No, you can't dynamically create meta-tags. You need your server to render those meta-tags correctly when facebook decides to probe it (usually soon after a share/like/recommend operation).
EDIT : To make it clear -
There is no way to control the rendering of meta tags from the client.
If you want different URLs of your app to have different og:title, og:image etc.. you have to make sure your SERVER serves the html with the right meta tags for each URL.
Either put all the info you want in the URL in the first place, for example http://example.com/?title=shalom+world&image=shalom.png and then when you serve the page, parse the URL and render the meta-tags correctly OR..
Have some ID in the URL according to which you will go fetch a corresponding db record and render the head tag of the html you serve with info from that record as meta tags, for example: http://example.com/DB-RECORD-ID-X123
I am using code found in http://www.facebook.com/share_partners.php/
It says to replace with the URL I want to share.
The page where the share icon is placed is NOT the URL I want to share. The URL I want to share I enter as
However, first it worked, but now it is pulling the meta value AND the URL from the actual page!
My concern is that it is grabbing the URL from the page, not what I input because of:
u=location.href;t=document.title
On the page (both the one with the share icon AND the actual shared page) I tried to define the preview image with:
<link rel="image_src"
This is located between the tags...doesn't seem to do anything.
Thoughts?
You can only change the title
everything else is fetched directly from the shared url.
i dont 100% understand what you want to do
<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script>
Share
replace the u=location.href with u= and t=document.title with the given title. additionally replace in the href="" of the link with the correct url
any other info is fetched by the meta tags of the target url
<link rel="image_src" href="http://www.onjd.com/design05/images/PH2/WableAFC205.jpg" />
the href="" links to the correct image
the tag needs to be within those meta tags (in the area)
Is it possible to post a description/comment variable to the facebook sharer url? It's only possible for url and title as far as I can figure out.
The parameters that you can pass to the actual sharer.php are "u" and "t" which are url and title. You can add meta tags to your page to get more info to appear in the sharer. To quote the docs (make sure you click the advance partners link):
In order to make sure that the preview
is always correctly populated, you
should add the tags shown below to
your html. An example news story could
have the following:
<meta name="title"
content="Smith hails 'unique' Wable legacy">
<meta name="description"
content="John Smith claims beautiful football ..." />
<link rel="image_src"
href="http://www.onjd.com/design05/images/PH2/WableAFC205.jpg" />
As shown, title contains the preview
title, description contains the
preview summary and image_src contains
the preview image. Please make sure
that none of the content fields
contain any html markup because it
will be stripped out. For
consistency's sake, please use the
<meta> tag to provide text data for
the preview, and the <link> tag for
any source urls.
The title and summary tags are the
minimum requirements for any preview,
so make sure to include these two.
You can actually pass custom title, url, image and comment/description using:
http://www.facebook.com/sharer.php?s=100&p[title]=titlehere&p[url]=http://www.yoururlhere.com&p[summary]=yoursummaryhere&p[images][0]=http://www.urltoyourimage.com
As shown, title contains the preview title, description contains the preview summary and image_src contains the preview image. Please make sure that none of the content fields contain any html markup because it will be stripped out. For consistency's sake, please use the <meta> tag to provide text data for the preview, and the <link> tag for any source urls.
Facebook sharer use the description meta tag to add a description in your post for the pictures. I don't really know how it works but I think it uses this tag in your header:
<link rel='image_src' href='http://www.yourwebsite/dir1/dir2/picture.jpg' />