Setting google plus snippet info via javascript? - javascript

I'm looking to share things on google plus but I need to be able to populate the snippet info myself as the pages I am sharing are loaded via ajax on my jquery mobile site.
So that being said I need to set the info either via the url (facebook sharer style) or via javascript.

If you are trying to change the rich snippet that appears, you should use the snippet tool to create schema.org that is then placed on your site. The share link would then be that page, which would contain the attributes set to how you want them to appear. You can specify the title, the image, and the description for the content that gets shared.
If you are trying to just create a link to share something, you can create direct links to the share dialog. For example,
Click to share
will create a share link to {your url}.
Because jQuery mobile is rendering a lot of the information on the actual client, you might need to generate a URL, similar to the one above, that would then point to another page that would with the right content in schema and a redirect to your site. When they follow the share link, a user would be redirected to the jQuery mobile page. When Google reached the page you're redirecting from, it would read the schema.org markup and correctly calculate the snippet. The following example works for me:
<html itemscope itemtype="http://schema.org/Article">
<head>
<meta itemprop="name" content="Example">
<meta itemprop="description" content="This is the most awesome thing ever.">
<meta itemprop="image" content="http://placekitten.com/250/250">
</head>
<body>
<script>window.location='http://istoocute.com/#kittens';</script>
<a href='http://istoocute.com/#kittens'>Click here if you're not redirected</a>
There's really nothing to see here, move along...
<img src="http://placekitten.com/250/250" />
</body>
</html>

https://developers.google.com/+/plugins/+1button/#configuration - shows you the configuration settings that you need.

I was able to just go ahead and use the schema.org in my situation. This worked because when you view one of my pages is "promoted" to the first page in the list of cached pages. So even if you were to start on page A and browse to page B and then share page B when google searched the url you have provided page B is now before page A and thus is schema.org meta data is used.
I have no doubts that writing your own redirect page and passing it some thing like this
?redirect_url=http://google.com&img=your_image.jpg&description=its great&title=a product
would work. The only thing to remember is that you will need to use a javascript redirect that way when google looks at the page it see's the page and does not get redirected (bots dont use js) but when a person hits the page it will redirect them to the real page.

Related

Get the open graph image for a webpage? (The way facebook embeds a thumbnail image when you share its link)

On my webpage I want to share a link - let's say to this wikipedia page for Superhero
In the code for that page there is the following code in the head tag:
<meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Connecticut_ComiCONN_Superhero_Mascot..jpg/640px-Connecticut_ComiCONN_Superhero_Mascot..jpg">
This is the thumbnail for that page that is shown if you share the link on social media. (Most pages now have one).
Is there a way to retrieve that image url to embed on my normal webpage page?
I'm using CSS, HTML and Javascript.
You can use https://www.opengraph.io/, for example:
Make request to https://opengraph.io/api/1.1/site/https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FSuperhero?app_id=f6ef4e6b-4162-40d7-8404-b80736d4bd55 (https://opengraph.io/api/1.1/site/${url_encoded_link}?app_id=${your_api_key}
Get image URL from the JSON response, which looks like this:
{
//...
"openGraph":{
"title":"Superhero - Wikipedia",
"type":"website",
"image":{
"url":"https://upload.wikimedia.org/wikipedia/commons/d/d6/Connecticut_ComiCONN_Superhero_Mascot..jpg",
"width":"1200",
"height":"1005"
}
},
//...
}
Note, that the free tier only allows 100 requests per month. And I'm not affiliated with it.
Alternatively, you can use something like open-graph-scraper - never tried, but looks promising, will require running NodeJS server as far as I understand.
This one parse-open-graph can work in browser, if I understand correctly.

SERP is just showing the main page but none of the subpages

Have a look on this search where you can see that just my main page is indexed.
But why does Google/Search engines not take arda-maps.org/about/ and the other subpages? Is my deep linking done in a wrong way? Do the search engines need more time? If they do need more time why is the forum - which came very late - already indexed?
And by clicking the links I'm loading the "subpages" via hiding and showing of layers. Maybe it's because of that?
I didn't see index-follow tag in your html code. It's better to have it
<meta name="robots" content="index, follow">
Also you can do two more things. Go to GWT > Crawl > Fetch as Google and submit some of your pages. Also click on the Sitemaps button in the left menu and submit your sitemap.
Also you can share pages from your site in Twitter or Google+, everything posted there is indexed very fast.
Wish you luck,
Kasmetski
You don't seem to have a robots.txt. It is always good idea to implement one. This might explain your issue, because when Google does not find one it stops crawling websites. Check for warnings or error messages in Google Webmaster Tools.
I have also seen that site:arda-maps.org returns urls with www. You should implement a redirect from www to non-www URLs.
Keep in mind that the site command does not return all indexed pages.
Your About page does not have a NOINDEX tag which is good. I have noticed you have a sitemap.xml and that your About page is in there. If the issue persists, this probably means Google thinks your page is not worth indexing.

Multiple og:image tags not being displayed by share dialog or update status box

I am currently working a new feature to allow users to select the thumbnail they would like to use when sharing an page on Facebook. The user should be able to use the Facebook widgets like the send dialog or share buttons as well as simply cutting and pasting the URL into their udpate status dialog on Facebook.
I have read much of the documentation, which seems to indicate that I simply need to add multiple og:image tags in the page being shared. I have done this and run the page through the linter so the cache gets updated.
When passing the page to the share.php directly, effectively removing any of my client side code and letting the dialog present what it is scraping, I am seeing 3 images from the page available.
I am not sure what I am doing wrong here.
Here is the linter result, the graph object, the sharer.php link and the page. Anyone have ideas of what I could be doing incorrectly?
I have confirmed that at least the og:title tag is being respected by the share dialog. I have also tested the size of the images, and included file extensions as suggested below.
I know this works because buzzfeed has the exact functionality I am going for. I have reduced my example down to only the core pieces I think should work. You can find the full source here.
Could it be the XML namespace in the top HTML tag?
In the BuzzFeed article, it's:
xmlns:og="http://opengraphprotocol.org/schema/"
In your page its:
xmlns:og="http://ogp.me/ns#"
On the Buzzfeed article, the content attributes in the og:image links point to named .jpg files, vs your links which do not have a filename/extension at the end.
It may be required to include a filename in the links, especially if it's basing image detection on the file extension.
EG:
Buzzfeed:
<meta property="og:image" content="http://s3-ak.buzzfeed.com/static/campaign_images/webdr02/2013/3/18/11/10-lifechanging-ways-to-make-your-day-more-effici-1-2774-1363621197-4_big.jpg" />
Yours:
<meta property="og:image" content="http://statics.stage3.cheezdev.com/mediumSquare/3845/4AC356E3/1"/>
After some tests, I guess it's a caching issue.
Looks like the sharer is caching the graph, using the og:url as a key, so that different querystrings in the sharer won't bypass the cache, if they do not impact the og:url value.
Obviously, the debug tool don't use such cache.
If I'm right (this is just an insight), you can either wait that the cache entry expires or try with a different og:url. Moreover, to ease the test, keep the new og:url equal to the new page location.
So funny story, I'm a developer at BuzzFeed and came across this while trying to figure out why our share dialogs suddenly stopped showing the thumbnail picker.
It looks like Facebook disabled the functionality. It briefly made a reappearance on 1/14/2014 but they introduced a bug that prevented sharing from any pages with multiple og:image tags defined. (See: https://developers.facebook.com/bugs/1393578360896606/)
They fixed the bug, but as of 1/22/2014 it still looks like the thumbnail picker is disabled.
The Sharer.php script on the Facebook site doesn't support all the OG tags as far as I know. The images are scraped from the page content itself, so if you want your three images to appear on the Sharer.php script, include them in your content.
Sharer.php has been officially deprecated by Facebook, so I wouldn't be surprised if certain functionality does not work with it. While it still works, it was always the simplest option and I'm guessing they never built the link image scraping from the og items into it.
I was able to find this article, which shows one way that you can specify exactly what images are available to the sharer.php share page. You can specify one (or multiple) images to share with a URL structure like the following:
http://www.facebook.com/sharer.php?s=100
&p[url]=http://bit.ly/myelection
&p[images][0]=http://election.gv.my/assets/vote.png
&p[title]=My customized title
&p[summary]=My customized summary

load a code as the first thing in a webpage?

How do I make the followings code load the first thing in my website ? as matter of fact I want the href to load the first thing.
<link rel="image_src" href="" id="ShareImageID"/>
<script>
var ShareImageIdVar = location.href.match(/\d+/);
document.getElementById('ShareImageID').href = "http://www.mysite.com/Images/"+ ShareImageIdVar +".jpg";
</script>
what I am trying to do is, when some one share this page on facebook I want facebook to load this picture as thumbnail. So i want this herf to be filled out as soon the page loads out.
what I am trying to do is, when some one share this page on facebook I want facebook to load this picture as thumbnail.
I don't think this request makes sense. Loading order will not influence what Facebook offers as a preview icon for a page. Images inserted by JavaScript will likely not be visible to Facebook at all.
If you want to make Facebook choose a specific preview icon, use the Open Graph Protocol, namely
og:image - An image URL which should represent your object within the graph.
an example from the OGP web site:
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
The Open Graph protocol and Facebook Object Debugger have some information.
Does this have to be done in JavaScript? If you can use PHP, you can get the image ID from the query string and insert the dynamic link element before Facebook parses the document.
This works for me:
<?php
echo "<link rel=\"image_src\" href=\"" . $_GET['id'] . ".png\"/>";
?>
You would use a URL like:
http://mysite.com/index.php?id=12345
I'm not saying it's impossible in JavaScript, but I tried and Facebook didn't see the inserted image.
You can test using the Facebook debugger. Specifically, take a look at See exactly what our scraper sees for your URL and you'll see that it doesn't incorporate the JavaScript insertion.

Google plus one : Does anyone know how it specify which image to display?

when i press the button + google i have a thumbnail (picture of a site) randomly generated, Does anyone know how it specify which image to display ?
Google has a support answer for it. https://developers.google.com/+/plugins/+1button/#plus-snippet
Basically, it goes like Microdata, OpenGraph, Meta and, if all else fail, page content.
Facebook provided an open microformat standard about this and called it: OpenGraph.
I would find it strange if google ignored it altogether. Haven't tested that, though.
Opengraph uses an og:image attribute.
Try something like this:
<meta property="og:image" content="http://example.com/post/13371312/picture.jpg" />
in the <head> section.
If it doesn't work, I'd suggest also checking out on the Google Opensocial site. (if you didn't already)
It's a pretty labyrinthic site and more about apps and oauth interaction, but you could get lucky.
I believe Google hasn't provided a way to select the image that is going to be selected like Facebook does with the tag on the head of the HTML.

Categories

Resources