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.
Related
I'am working with a large project with lot of images. to increase it's page speed, chrome "lighthoues" recommend me to differ images. But my company gives priority to the ranking of the page. I'am not sure how this effect for google crawlers.
As you know after dffer the images, there is no real image url under the "src" attribute. So how can google understand and optimize my images? can some one provide me a realiable resource to understand the problem?
above is a sample differed image tag. As you can see src tag doesn't contain the actual image. actual image is under data-src attribute which will be loaded to the site using javascript.
I just wanna know how does this affect to our SEO/Page-ranking?
I thought I had read somewhere that lazy-loading is fine for SEO but to be sure I did some googling and found the following. Spoiler alert; googlebot will render the full page and thus all images will have populated src="" attributes.
https://yoast.com/ask-yoast-lazy-load/
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 have been looking at rich snippets in google. Google lists the following schema.org items as being supported:
Reviews
People
List item
Products
Businesses and organizations
Recipes
Events Music
I have noticed that in search results, Google displays Rich Snippets for Article and BlogPosting. When clicking on the link and using Firebug to check the source code, I can see that the schema.org being used is indeed BlogPosting.
I've tried adding BlogPosting to my sample code and using Google's Rich Snippet tool to check the results but I cant get an image to display. I am using the following code:
<html>
<body> etc etc....
<div itemscope="" itemtype="http://schema.org/BlogPosting">
<img itemprop="image" href="/images/test.jpg" item>
</div>
...
Although it doesn't show the image in the Rich Snippet tool, it does recognize that an image has been set and displays the url text in the "Extracted rich snippet data from the page" box. I have tried using the SoftwareApplication schema and then I get an image to show.
My question is: Does the Rich Snippet tool restrict the images it shows based on the schemas listed above, and actually once in the live search results, Rich Snippets for Article and BlogPostings will be shown?
Google has introduced Rich Snippet for Articles, so you can now use articles snippet for your article/blog post.
See this official document from Google on implementing rich snippet for your articles: https://developers.google.com/structured-data/rich-snippets/articles
And as far as your image issue is concerned, try to apply the snippet code as per the document above and it should show the image. I tested it and all worked fine.
As of now, Google is not going to display product images in SERPS for schema.org/Article or schema.org/BlogPosting item types. It's going to show the Author profile image that it pulls from Google+ using one of two methods:
https://plus.google.com/authorship
... think about it. Everyone would be trying to attach add some (spammy) image next to their blog post in SERPS. Google only wants to show verified authorship by their authentification methods (via G+) -- not just from any "author" tag in microdata.
Yes, the rich snippet tool will not show you what the actual SERP will always look like, because it depends on the query. In fact they say
Note that there is no guarantee that a Rich Snippet will be shown for
this page on actual search results.
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 :-(
Google image search seems to do a poor job on a site I run in identifying which image on a page should be indexed. In addition it doesn't seem to link that image with lots of the associated data.
Are there any ways of focusing attention for spiders on particular images and associated data, do they need to be within the same tags, or adjacent on the page?
A few tips:
Use a descriptive name, i.e. "tabby-cat.jpg" instead of "img02396.jpg".
Use alt tags on images.
Use descriptive text on the page and around the image.
Make sure the images are in the generated source, i.e. if you click "View source" in your browser, you see <img> tags.
It's also useful to validate your site at http://validator.w3.org in case there are major errors like missing brackets etc that could prevent a spider from parsing the page. (Note: I wouldn't worry about making everything 100% valid since Google is fine with invalid code)
Images in CSS (i.e. backgrounds) are not indexed AFAIK. However I'd suggest using CSS backgrounds for "design" images (a subtle way of getting Google to ignore site headers, custom borders, shadows, etc).
Nor are any images generated from Javascript.
Make sure you're not blocking images through robots.txt. I know that Joomla does this by default.
Sign up at Google Webmaster Tools, add your site, then allow it to be used in Google's "Image Labeller" game which should help tag images.
All images on a page should be indexed. If they aren't then improve your alt tags and possibly rename the image file. There really isn't anything more you can do since search-engines do not read any other context for the image itself except size. If google thinks the image is a duplicate it won't index it either.
Of course if images really do inherit context from the surrounding page then you could just use less images or move them into CSS.
I think Search robot can not read images as we do, so the simple and must thing you should do to your images is using descriptive names, so that spider could know what this image all about. Second one is using ALT tags on images, put in keywords relating to the images.
Those thing are what I do.