og:see_also Array An array of URLs of related resources
How to use this, I mean how should the array look like?
og:see_also - Used to supply an additional link that shows related content to the object.
The Markup will look like this,
<meta property="og:see_also" content="http://www.website.com"/>
If a tag can have multiple values, just put multiple versions of the same tag on your page. The first tag (from top to bottom) is given preference during conflicts.
<meta property="og:see_also" content="http://example.com/page1" />
<meta property="og:see_also" content="http://example.com/page2" />
Checkout this Open Graph Portal
Related
I have a specific page in my application where I want a user to be able to share certain selections they have made on a previous page, selection which I am receiving from my database.
So, for example - I have a user - Barry. I can access his name using ${user}.
He have been asked a question:
What is the first thing that comes to your mind when I ask about ${animals}
The answers they have chosen have been submitted to the DB, and I now want the answers to appear as the sharing description for Facebook. Obviously, the answer for each user will be unique - so I cannot hard code any information in here.
The code I have is the following:
<meta property="og:description" content="${user} thinks:%0A%0A<c:forEach var='animal' items='${animals}' >${animal} - ${animal.thoughts}%0A</c:forEach> />
When I view the source code for the page, I see this:
<meta property="og:description" content="Barry thinks:%0A%0AElephant - Gray%0ABird - Chirpy%0AMonkey - Funny%0ADog - Loyal />
However, when attempting to share the content on Facebook, the description is just empty, as though no description exists.
Unfortunately, this page is only available when the user is logged in, so using the Facebook scraper https://developers.facebook.com/tools/debug/ simply shows me the og data of the logged out landing page.
Am I missing something here?
EDIT
Based on #Cbroe's comments below, I have now adapted the code to be shared on a public page (IE one that you do not need to be logged in to see).
I have also set the description and image location as parameters in the URL - so that anybody who shares this page will see a description and an image relevant to them.
When running the full URL through Facebook scraper, I see the exact results I am after:
However, when actually sharing the link from the application, the dynamic info from the URL is being ignored.
<meta property="og:description" content="${param.description}" />
<meta property="og:image" content="${param.image}" />
My og:url contains the full URL, including the dynamic parameters. If anyone else has any ideas, I would love to hear them.
EDIT 2
Link that helped CBroe debug has been removed due to company policy. Example link provided in my answer.
With massive thanks for #CBroe for baring with me through this process and helping me out in the comments, I have now got a solution to this problem.
Firstly, I created a client facing page that did not require the user to be logged in in order to view. This would act as the page that the dynamic content would be shared from.
The code that I have now looks something like this:
Meta tags
<meta property="og:title" content="My Title" />
<meta property="og:url" content="${pageUrl}" /> // generates FULL URL including all parameters
<meta property="og:description" content="${param.description}" />
<meta property="og:image" content="${param.image}" />
Sharing generator (using jQuery)
var currentLink = encodeURIComponent(window.location.href); // NB to use encodeURIComponent instead of just encodeURI
var tWindow;
$('.facebookShare').on('touchstart click', function(){
tWindow = window.open('about:blank', 'sharer', 'toolbar=0,status=0,width=548,height=325');
tWindow.location.href = 'https://www.facebook.com/dialog/share?app_id=${facebookAppId}&display=popup&href=' + currentLink;
});
The link that was then used to share the page looked something like this:
https://[myURL]?description=My%20favourite%20animals:%20Elephant%20-%20gray%20%7C%20Dog%20-%20Cute%20%7C%20Cat%20-%20Cant%20be%20trusted%20%7C%20Leopard%20-%20Never%20changes%20its%20spots&image=[url_to_my_image]
Using this code, when sharing the page, the correct (and dynamic) image and description were generated each time.
Once again, big ups to #CBroe for helping me get to the bottom of this - and I hope that this can help somebody else in the future.
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.
I have two different products "Prod_A" and "Prod_B" on the same page, say
www.xyz.com/index1.html
On this page are two images for these products and small descriptions.
I need two like buttons for both products, both like buttons should refer to the page where they are located ( www.xyz.com/index1.html ), but both buttons should have different og:images and descriptions.
I have found some solutions for multiple buttons, but they refer to different pages and don't have pictures included.
thanks!
PS:
A small working example would be greate
Edit:
#DMCS said (see comment) that this is not possible. would it work, when I create a dummy page for the second product www.xyz.com/index2.html which would redirect to the page www.xyz.com/index1.html?
I this case I would have two pages is it then possible?
Yes this is possible, you need to create as many dummy pages as you have like buttons on your main page. Each of these pages includes all the OG tags you need including descriptions and images. You then use a redirect to take the user back to the page with the buttons.
Use the facebook like button tool to create the buttons using the url of each dummy page. Here's an example dummy page:-
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>This is a dummy page to hold the OG tags</title>
<meta property="og:title" content="This is the text the like button will show in FB when liked"/>
<meta property="og:site_name" content="the site name shown, the from name in FB"/>
<meta property="og:url" content="http://www,yoursite.com/dummp_01.html" />
<meta property="og:image" content="http://www,yoursite.com/dummyimage01.jpg" />
<meta http-equiv="refresh" content="0;url=http://www.redirect_to_url_that_has_all_the_like_buttons.com">
</head><body></body></html>
Could you add some variable to the address, and then do some switching using php?
For example
Like 1 links to: http://xyz.com/index.php?like1=true
Like 2 links to: http://xyz.com/index.php?like2=true
then in php on the index.php page just use an if statement...
<?php if (isset($_GET['like1']) { ?>
[your like 1 og tags here]
<?php } else if (isset($_GET['like2']) { ?>
[your like 2 og tags here]
<?php } ?>
NOTE Of course this solution would work also for other languages besides php
when I create a dummy page for the second product
www.xyz.com/index2.html which would redirect to the page
www.xyz.com/index1.html? I this case I would have two pages is it then
possible?
Yes, this is a good idea. The facebook linter does not run any javascript, so it would pick up the og tags properly. And when a user comes to that page, they will get redirected by javascript and see the page with the two products.
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
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' />