I have integrated the Google +1 button into a website ( http://www2.highpoint.edu ).
I tried to use schema.org <meta> tags to provide Name, Description, and Image for the +Snippets information, but it doesn't work.
When I use the +1 button and try to post to Google+ about the website, it picks an image that I don't want. And it won't pick the image I have set with the <meta> tag.
My questions:
How do I get the +Snippet data populated from schema.org metadata?
For a page with 2 or more +1 buttons, can I have different name/description/image for each +1 button? Or must every +1 button on the page use the same metadata?
EDIT
I think it is best to use Open Graph Protocol instead of schema.org. That is, schema.org shouldn't be used at all. Facebook supports Open Graph Protocol, so you can kill 2 birds with 1 stone this way.
More importantly, Facebook provides a great debugging tool that tells you what exactly is getting parsed for a given URL: http://developers.facebook.com/tools/debug
I am still not sure about having multiple +1 buttons on the same page with each +1 button having distinctly different meta data.
In response to question 1:
I checked your page. It looks like you have a normal meta title and description. This should work for the +1 button, but it may take some time for the +1 button to pick up the changes you've made.
If you'd like control of the image, though, you will need to use schema.org markup or open graph as described in the official FAQ: http://code.google.com/apis/+1button/#plus-snippet
And for question 2:
If you are using schema.org markup, the +1 button will read the content for the itemscope nearest the top of the page's source code.
It does not work for me either. I have both Schema.org and Open Graph in the web page (eg. http://r.mycrep.net/3Nkh/), Multiple validators (Facebook's and one other) read info correctly.
I guess that Google still does not support metadata for everybody :-(
Related
I am trying to share a post from my website(blog) onto Google plus but it isn't showing the featured image of the article, instead it is just showing the title and link of the article. I have microdata and also "og" tags for my page. When tested using Google Structured data testing tool, it is showing all good. I expect to get some help here. If I am trying to share the home page, it is showing an image, however if I am trying to share any post from the website, it is not showing any image. Please help, let me know if you need any more info, would be happy to provide.
One of post's from website
The og:image meta tag is being used by google plus rather than the image property within your http://schema.org/BlogPosting -as #abraham pointed out this is a broken link, it should go to http://top10grocerysecrets.com/Top-10-foods-for-releiving-inflammation.jpg - currently it includes /wp-content/uploads/sites/17/2015/07/ which isn't part of the image's path.
In the structured data it is valid, but not correct: BlogPosting has an image set but without a full path which may be why it gets ignored: the source should begin http:// etc. This is also needed if you want the image to appear in the google search results preview.
The WebPage element does not have an image set: only the BlogPosting does. Consider setting the same image property using a meta tag inside the WebPage element if fixing the BlogPosting image's path does not resolve the structured data issue, e.g.
<meta itemprop="image" content="http://top10grocerysecrets.com/Top-10-foods-for-releiving-inflammation.jpg" nt-post-thumbnail wp-post-image" alt="Print" />
In the structured data there are two unrelated mistake
the BlogPosting has author set to a link with fixed IP address http://162.244.66.231/top10grocerysecrets/author/cyoung this will reduce the chance of it connecting the blog with C Young's profile on the website.
the file name http://top10grocerysecrets.com/Top-10-foods-for-releiving-inflammation.jpg has 'releiving' in it, which is not the spelling used in the text on the image itself. This doesn't matter a great deal.
What i am trying to do is to use a photosphere on my website so that it shows up on full screen as a website cover page. The problem is the the code to embed a photosphere in a webpage given here by google
https://developers.google.com/photo-sphere/web/
lets only the photosphere size to be hardcoded as
displaysize="600,400"
what ever the values but its still hardcoded. What i want is that it gets adjusted to the screen of the user and gets displayed in the whole browser window. Any one got an idea how to pull it off? I didn't find any stuff about 'photosphere on web' other than the google link i gave above.
Indeed the API is currently designed to take static values. I think it's a good point that users might want to set the dimensions to 100% and let it resize dynamically.
I put it on the TODO list and will try to get to it shortly.
In the meantime, one work around is the following: After the viewer loads you will find an iframe on the page which contains it. You can change it's dimensions dynamically to your liking and the viewer should adapt.
The API provided by Google wraps the whole photosphere in layers of iFrames.
You can use the API to request a certain photosphere but only use the response to parse it for the values you need. Then you create your own request and the result can be shown fullscreen.
An example link is this
I created this link dynamically from the JSON response from the elements
media$group media$content 0 url
Hope it helps.
Can't you take the raw image and just use webgl to project it on the inside of a sphere?
i developed a radio stations widget (see it at my site). the problem is, i dont know how to make it persistent same like on the http://josephbeeson.com/gwapdemo/gwap.html . it's like facebook chatbar which not reload when navigate to any page. i have try n look for the demo codes but still not understand. please give step by step tutorial. i want to implement it on my social website http://www.heypy.com.
The whole page does not get reloaded, the new content is just loaded via AJAX and displayed within the current document.
To make it look to the user like he’s navigated to some other URL, the address bar content is updated using the HTML5 History API.
please give step by step tutorial.
Happy to give you the relevant keywords, so you can do research on them yourself. But won’t provide a private tutorial here, that’s not the purpose of this site. Thanks for your understanding.
I just found out that Google recently decided to start using their own "title" when they display their search results. Also, after checking Yahoo and Bing I saw that the way they are displaying their results are the same but in completely different way than Google.
I guess my question would be, if there is an actual "correct" way of adding titles to my pages in order for Google to display what I want them to and this way get the same results with Yahoo/Bing that are currently using the page's title as a search result (sometimes they pick up the first tag and use it as title).
Any recommendations or links to follow for more studying would be appreciated.
There's nothing you can really do about it. Google will choose what title to display based on criteria they have not made public. This usually is the page's title as found in the <title> tag but if Google feels a different title better summarizes the page's content they may choose to display something else.
You can try to change your page titles to better reflect the page's content and see if that helps.
Using optimal keyword prominency in meta tags according to guidelines... and Google will pick up your meta tags. See our news portal's source and metas (keywords: hírek, választás 2014, etc.): http://valasztas2014.hir24.hu/
It seems that Google only offers code to embed the +1 button.
However, there are heavy privacy concerns (plus quite some load time) associated with it.
For some pointers about the privacy and legal issues associated with Facebook like and Google +1, see: Like button and privacy concern
A common workaround seems to be a two-click solutionGerman (also discussed on slashdotEnglish), where the first click enables the button (loading the javascript from Google), the second then is on the regular +1 button.
However, I do not want to implement this two-click solution either. Largely because the Google +1 button is ugly as hell, and doesn't fit to the page layout.
What I'm really looking for is a separate web page, where the user can essentially confirm that he likes the page. This page can live on google.com, and essentially this would be the second click. I'm not trying to trick people into +1'ing the page. The second click is all fine with me. I just don't want to force them to load the plusone button (and I don't like its looks).
There seems to be the option of
https://plus.google.com/share?url=<URL>
which however is a share on Google+, not a +1.
I've seen this URL, too:
https://plusone.google.com/_/+1/confirm?hl=en&url=<URL>
(see e.g. here: Adding a Google Plus (one or share) link to an email newsletter) but I cannot submit this form (i.e. doesn't seem to work).
The best working solutions seems to be the two-click approach. :-(
Update: the url, https://plusone.google.com/_/+1/confirm?hl=en&url=<URL> actually does seem to work. It was just my privacy proxy breaking it. Then it seems to be more of a "Google+ share" dialog. I'm not yet happy with this result (in particular, since this doesn't seem to be an advocated approach for Google, and they can at any point consider to ban the site, I guess)
The only officially supported method of +1'ing a URL is with the +1 button. Either always loading or loading it on a second click.
The approach that I'm now looking into is fairly trivial:
I've set up a Google Plus page for the web site, and the "plus" button sends user there. In fact just like the Facebook icon I'm using. Then the users get the full choice of interaction options, including +1, but also circling and sharing.
First of all, this obviously should not violate any g+ policies. Secondly, it is a fairly transparent behaviour for the users. The "plus" button takes them to Google plus, where they see the usual plus UI.
Secondly, it's still just two clicks to "+1". So it is not worse than any other data privacy compliant solution.
I found the solution here.
The problem is, social sites accepts your own "share" forms, but only if the link is URL encoded.
In Wordpress, a custom Google+ button that I'm using without the official API, and it's currently working, is this following code:
google+
Hope it helps, go to the link above for a list of the rest of the social sites links. :)