Google Images has an option to filter images based on license.
Each image on my site has a details page, where I have the following link to denote the license:
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/deed.en_US" target="_blank">CC-BY</a>
It's a modified version of the sample code from Creative Commons - Choose a License.
However, I see images that Google has indexed since I added this code do not appear when I select a license filter.
You need to wrap it around a div with an about attribute. Here's an example that Google provides:
<div about="image.jpg">
<img src="image.jpg" alt="" />
<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution Share-Alike 3.0</a>
</div>
So in your case:
<div about="image.jpg">
<img src="image.jpg" alt="" />
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/deed.en_US" target="_blank">CC-BY</a>
</div>
Sources: https://www.youtube.com/watch?v=quyhasVn2jw, http://googlesystem.blogspot.com/2009/08/simple-way-to-specify-image-licenses.html
Related
The following mark up is quite complex, I know, it derives from a typical wordpress site building structure. So I cannot change it. And I wish to reproduce it here completely (leaving out the classes etc.):
<div id="myOuterSection" itemscope itemtype="http://schema.org/CreativeWork">
<meta itemprop="name" content="A name for this section that contains several artworks" />
<meta itemprop="description" content="A brief description also." />
<meta itemprop="url" content="http://www.mywebsite.com/#where-to-scroll-to" />
<div id="myId" class="myClasses">
<div class="container">
<div class="myInnerClasses">
<div class="mySecondInnerClasses">
<div class="myThirdInnerClasses">
<div class="artwork-container" itemprop="workExample" itemscope itemtype="http://schema.org/VisualArtwork">
<meta itemprop="image" content="http://www.mywebsite.com/wp-content/uploads/2017/06/my-svg-replace-image.png" />
<meta itemprop="name" content="My desired share post title" />
<meta itemprop="description" content="The description of the shared stuff I would love to see here also." />
<meta itemprop="url" content="http://www.mywebsite.com/#where-to-scroll-to" />
<div class="svg-code-content-wrapper">
<!-- svg code -->
</div>
<div class="social-share-wrapper">
<ul class="social-share-list">
<li>
<a class="share-btn-google" href="https://plus.google.com/share?url=http%3A%2F%2Fwww.mywebsite.com%2F" target="_blank">
<i class="fa fa-google-plus"></i>
</a>
<!-- some others -->
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
To explain a little why I use meta tags here (well knowing that this technique should be used “sparingly” as I read): I have no visible texts on the artworks and the images are in svg code. However, I want them to be sharable without website context adding some explanation on the shared post. (which is, by the way, very easy to achieve with fb, pinterest, tumblr, twitter etc.)
I also tested the result of this structure in Google testing tool (https://search.google.com/structured-data/testing-tool)
It showes a perfect tree with outer and inner itemscope and all the data (names, description, image url etc.). At least it looks so for me and displays no errors or anything similar. For Google so it seems ok, also, I guess.
Yet, the Google share button which is nested perfectly inside the second (inner) scope does not reflect any of the shown data, neither images nor names or titles when the post opens in the new share tab. The weird thing is that in the beginning sometimes it worked, but later he seemed to fetch only the top first one on the page, later he skipped them all and took the site’s regular title and description with the first real image (img tag) he founds on the page.
I tried also emptying the cache, placed no-cache tags in the website header and so on.
This Google share button casuality stuff drives me nuts.
Is there someone out there with similar experiences? Or someone who scans my code and sees some obvious errors that I am not able to see? False schema.org structure or whatever?
Thanks so much in advance. Any help is much appreciated.
I can also give the real web url if someone likes to see it.
On most pages of my site I make use of Microdata. Some things such as the data blog post was created, and review ratings show up in search results. Other information such as Person and Breadcrumb data doesn't.
Person
On my homepage I have a the following code. Pasting it into the Google Structured Data Testing Tool shows "Abergavenny Wales - Web Developer", but pasting the URL in doesn't show this, any idea why?
<div id="banner" itemscope itemtype="http://schema.org/Person">
<h1>Working Web Solutions</h1>
<h2>
Ruby on Rails, Sinatra & Drupal Development by <br class="responsive" />
Award Nominated <span itemprop="jobtitle">Web Developer</span><br class="responsive" />
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">Based in <span itemprop="addressLocality">Abergavenny</span>, <span itemprop="addressRegion">Wales</span>, <span itemprop="addressCountry">UK</span></span>.
</h2>
</div>
Breadcrumb
The same is also apparent with breadcrumbs. The following code works when pasted into the Google Structured Data Testing Tool but the URL doesn't return the breadcrumb.
<ol id="breadcrumb">
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/services" itemprop="url">
<span itemprop="title">Services</span>
</a> ›
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/services/freelance-ruby-on-rails-development-cardiff-abergavenny-wales-uk" itemprop="url">
<span itemprop="title">Ruby on Rails Development</span>
</a>
</li>
</ol>
Maybe because Google can't show everything in the preview, and it seems that your Google+ profile takes precedence over other metadata.
I've not tested any Person functionality of schema.org yet. But I've had a nice conversation with a person that could explain me, why breadcrumbs are not working with schema.org yet. May that answer is matching for Person too.
Additionaly:
Also this helper can help you create valid microdata: http://www.google.com/webmasters/tools/richsnippets
What is the proper way to index PDF files ? I would like to add semantic information in them, and help search engines present the files more accurately, more precisely (a particular image, text inside the PDF file). I am thinking about using ontologies that engines already understand like Schema.org.
How about using schema.org to link to the PDF file from a web page like this:
<div itemscope itemtype="http://schema.org/Article">
<img itemprop="thumbnailUrl" src="http://www.example.com/how_to_build_a_web_app.jpg"/>
<a itemprop="url" href="http://www.example.com/how_to_build_a_web_app.pdf">
<span itemprop="name">How to Build a Web App</span></a>
by <span itemprop="author">John Smith</span>
<div itemprop="description">This short e-book explains what a web application
is and how to build one.</div>
</div>
This lets you associate a title, image and textual description with the article in the PDF.
I'm new to SEO and heard that using microdata tags in html can dramatically improve SEO. So, for one of my pages, the schema type is an organization... in particular a sports team. One of the properties for a sports team is the members. So, I have the following code:
<div itemscope itemtype="http://schema.org/SportsTeam">
<span itemprop="name">New York Yankees</span>
<span itemprop="members">Derek Jeter</span>
</div>
The "members" itemprop has to be a person itemscope (http://schema.org/Person). What is the format for nesting one itemscope inside of another?
From the Google article on microdata tags:
The example below shows the same HTML, but in this case, it includes the address property.
<div itemscope itemtype="http://data-vocabulary.org/Person">
My name is <span itemprop="name">Bob Smith</span>,
but people call me <span itemprop="nickname">Smithy</span>.
Here is my homepage:
www.example.com.
I live in
<span itemprop="address" itemscope
itemtype="http://data-vocabulary.org/Address">
<span itemprop="locality">Albuquerque</span>,
<span itemprop="region">NM</span>
</span>
and work as an <span itemprop="title">engineer</span>
at <span itemprop="affiliation">ACME Corp</span>.
</div>
Here's how this sample works:
The address property is itself an item, containing its own set of properties. This is indicated by putting the itemscope attribute on the item that declares the address property, and using the itemtype attribute to specify the type of item being described, like this: <span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">.
I would add that microtags are in their infancy, so you cannot guarantee that the specification will remain intact for very long. I personally predict that the blackhat SEO guys are going to be all over this, and it'll be a headache for Google to keep up with the tricks. So, whilst they might provide you a temporary SEO boost, don't rely on them too heavily.
On a more positive note, I can certainly see these microtags being useful for non-SEO purposes, especially in the field of screen-readers. Fun stuff!
A rich snippet example from Schema.org http://schema.org/AggregateRating:
<html>
<div itemscope itemtype="http://schema.org/Product">
<img itemprop="image" src="dell-30in-lcd.jpg" />
<span itemprop="name">Dell UltraSharp 30" LCD Monitor</span>
<div itemprop="aggregateRating"
itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">87</span>
out of <span itemprop="bestRating">100</span>
based on <span itemprop="ratingCount">24</span> user ratings
</div>
</div>
</html>
But http://www.google.com/webmasters/tools/richsnippets won't show a preview.
So, the following words from http://support.google.com/webmasters/bin/answer.py?hl=en&answer=146645 are just lies?
New! schema.org lets you mark up a much wider range of item types on
your pages, using a vocabulary that Google, Microsoft, and Yahoo! can
all understand. Find out more. (Google still supports your existing
rich snippets markup, though.)
It is working absolutely fine.
Google is not obliged to show you preview every time, and here it shows an error when I inserted your give example from schema.org:
The following errors were found during preview generation:
This page does not contain authorship or rich snippet markup.
I have done it in my website's news pieces and it shows fine.