Exist way add schema.org autocompletion to PHPStorm ?
For example I want autocompletion for
itemscope itemtype="http://schema.org/Article"
yes. For the code like
<div itemscope itemtype="http://data-vocabulary.org/Person">
My name is <span itemprop="name">Smith</span>
<span itemprop="<ctrl+space here>" itemscope itemtype="http://data-vocabulary.org/Address">
<span itemprop="locality">Albuquerque</span>
<span itemprop="region">NM</span>
</span>
</div>
completion suggests the corresponding properties. But you need to fetch the resource to make it work - hit Alt+Enter on the URL and choose 'Fetch external resource'
Related
I want to create a breadcrumb navigation with the Microdata format.
So I'm using following BreadcrumbList markup and Google Structured Data Testing Tool recognized it:
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/home">
<span itemprop="name">Home</span>
</a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/home/fashionn">
<span itemprop="name">Fashion</span>
</a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span itemprop="name">Coats</span>
<meta itemprop="position" content="3">
</li>
</ol>
But from Bing Markup Validator I receved following message:
We are not seeing any markup on this page. Please ensure the markup has been implemented correctly.
Regarding Bing documentation the following markup is correct for breadcrumb:
<ol>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a itemprop="url" href="https://example.com/home">
<span itemprop="title">Home</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a itemprop="url" href="https://example.com/home/fashion">
<span itemprop="title">Fashion</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">Coats</span>
</li>
</ol>
So is there a way to create a breadcrumb navigation with Microdata format which would be valid both for Google and Bing?
To rephrase your goal, as far as I understand it: You want to markup your breadcrumbs
with Microdata
using two vocabularies (Schema.org and Data-Vocabulary.org)
without duplicating your content
so that Bing’s and Google’s testing tool still validate it.
Microdata makes it hard to mix vocabularies:
In itemtype, you can only use types from the same vocabulary.
In itemprop, you can mix properties from different vocabularies, but only the properties from one vocabulary can be specified in the shorter string form, while the properties from all other vocabularies have to be specified as absolute URIs.
(This isn’t a problem if consumers support the absolute URI form for the properties they recognize.)
(By the way, RDFa supports mixing vocabularies way better, so you might want to consider using RDFa instead of Microdata.)
A way to avoid the problem, maybe.
Use Data-Vocabulary.org for Bing and Google.
While the vocabulary Data-Vocabulary.org is deprecated and deleted (I wonder why Bing is still recommending it), Google still seems to support it, too (probably because it’s still used on many websites from back then, when Google recommended it, too).
I don’t know if it really works, but at least Google’s SDTT doesn’t give any warnings/errors for your Data-Vocabulary.org snippet.
Solutions, maybe.
Unfortunately, I can’t test it in Bing’s tool (because an account is required), so the following snippets don’t necessarily work.
itemref + absolute URIs for Data-Vocabulary.org’s title
This snippet uses Schema.org as primary vocabulary. An empty div outside of Schema.org’s BreadcrumbList is used to create the item for Data-Vocabulary.org’s Breadcrumb. This item references the a elements via itemref. It reuses the url property (because it’s named the same in both vocabularies) and provides Data-Vocabulary.org’s title property as absolute URI.
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb" itemref="b1 b2">
</div>
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span itemprop="item" itemscope itemtype="http://schema.org/WebPage">
<span itemprop="name">
<a itemprop="url" href="https://example.com/" id="b1">
<span itemprop="http://data-vocabulary.org/Breadcrumb/title">Home</span>
</a>
</span>
</span>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span itemprop="item" itemscope itemtype="http://schema.org/WebPage">
<span itemprop="name">
<a itemprop="url" href="https://example.com/fashion" id="b2">
<span itemprop="http://data-vocabulary.org/Breadcrumb/title">Fashion</span>
</a>
</span>
</span>
<meta itemprop="position" content="2" />
</li>
</ol>
It works in Google’s SDTT (it should be fine to ignore the warning that Breadcrumb/title is not recognized; it’s specified as absolute URI, so it can be used everywhere).
Whether it works in Bing’s testing tool depends on if Bing recognizes http://data-vocabulary.org/Breadcrumb/title as title property.
As the vocabulary is deleted, I’m not sure if it really was http://data-vocabulary.org/Breadcrumb/title instead of http://data-vocabulary.org/title, but if I remember it correctly, it should have been the first one.
itemref + absolute URIs for Schema.org’s name
Same idea like in the snippet above, but this time Data-Vocabulary.org would be the primary vocabulary, while Schema.org’s BreadcrumbList gets created in an empty div.
This is harder, because Schema.org’s structure requires more properties, so you have to create more empty elements.
<div itemscope itemtype="http://schema.org/BreadcrumbList">
<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span itemprop="item" itemscope itemtype="http://schema.org/WebPage" itemref="b1">
</span>
<meta itemprop="position" content="1" />
</div>
<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span itemprop="item" itemscope itemtype="http://schema.org/WebPage" itemref="b2">
</span>
<meta itemprop="position" content="2" />
</div>
</div>
<ol itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<li itemprop="title">
<a itemprop="url" href="https://example.com/" id="b1">
<span itemprop="http://schema.org/name">Home</span>
</a>
</li>
<li itemprop="title">
<a itemprop="url" href="https://example.com/fashion" id="b2">
<span itemprop="http://schema.org/name">Fashion</span>
</a>
</li>
</ol>
It works in Google’s SDTT (it should be fine to ignore the warning that name is not recognized; it’s specified as absolute URI, so it can be used everywhere).
If my company do it product (website, design, app), what should I apply Microdata to my HTML, if HTML structure look like below:
<div>
<h1>Company name</h1>
<p>Below is our portfolio</p>
<div itemscope itemtype="http://schema.org/???">
<h2>1. Website name</h2>
<p>Website info here...</p>
</div>
</div>
It depends on what this content is exactly about.
If it’s something your Organization offers (so the portfolio item is a placeholder for what your business offers), you could use:
makesOffer → Offer
If it’s something your Organization owns (so the portfolio item is something your business wants to show), you could use:
owns → Product
From the perspective of the CreativeWork, you could link to your Organization using the properties author/creator, contributor, copyrightHolder, provider, or publisher.
1- You can use, Like Unor said, the Organization, but there is some specific types of organizations.
You can use LocalBusiness and in your case, I will use another specific type of LocalBusiness wich calls https://schema.org/ProfessionalService. (provider)
An exemple of use :
<span itemscope itemtype="http://schema.org/ProfessionalService" style="display:none;">
<span itemprop="name">company name</span>
<span itemprop="description" style="display:none;">Description </span>
<img itemprop="logo" src="http://logo-url" alt="">
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">Address</span>,
<span itemprop="addressLocality">Locality</span>
<span itemprop="addressCountry" >Canada</span>
<span itemprop="addressRegion">State_or_province</span>
<span itemprop="postalCode">Postal_code</span>
</span>
<span itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">
<meta itemprop="latitude" content="45.5354467" />
<meta itemprop="longitude" content="-73.505216" />
</span>
</span>
I advise you to use the GeoCoordinates, because Google should promote your web site in your local area.
You can hide this information for users by an style="display:none".
2- For your portfolio, you have another schema : CreativeWork
3- For the use of offer : you have to indicate the price that could be show directly in search results. But in your case, I don't think you want it :).
Microdata can change the appearance of your page directly in search results. For more information, Google Developers
I have a website where people can compare driving schools. I've added alle the details (name, description, location, pricerange, etc.) I know about these schools to their pages on my website, using the schema.org markups.
Since a few weeks, people can also buy (read: book) their first driving lesson offered by the schools on my website, directly on my website. I was searching for a way to add this to the schema.org markup at my pages, but I don't really know what to use in my case.
I think of the two following possibilties. Can you tell me which one I should use? Or that you may think of a better solution?
<div itemscope itemtype="http://schema.org/LocalBusiness">
<div itemprop="name">...</div>
<div itemprop="description">...</div>
<div itemprop="priceRange">...</div>
<div itemprop="makesOffer" itemscope itemtype="http://schema.org/Offer">
<div itemprop="name">...</div>
<div itemprop="price">...</div>
<div itemprop="priceCurrency">...</div>
</div>
</div>
Or
<div itemscope itemtype="http://schema.org/LocalBusiness">
<div itemprop="name">...</div>
<div itemprop="description">...</div>
<div itemprop="priceRange">...</div>
<div itemprop="owns" itemscope itemtype="http://schema.org/Product">
<div itemprop="name">...</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div itemprop="price">...</div>
<div itemprop="priceCurrency">...</div>
</div>
</div>
</div>
At last, I was looking for a better schema type for driving schools, but I don't think they have specified driving schools. Do you think it is better to use ProfessionalService instead of LocalBusiness?
I think both of your examples are possible.
If you don’t have any specific requirements from consumers you expect to make use of your markup, I’d go with the first example: LocalBusiness → makesOffer → Offer.
It seems that you don’t really need the Product item, as you are only using the name property, which could be used on the Offer instead.
We are developing a new site and I'm keen to implement rich snippets and more descriptive meta data for our products and services pages in the form of Rich Snippets.
My problem is that our products and services cannot be purchased directly from the website as they are bespoke and custom built based upon users requirements. As a result they don't have a price and stock level.
I notice from the Google guidelines that they state:
The product should be available for purchase directly on the page
My question is, what is the best and most appropriate way to use rich snippets to describe these products and services? Can I use rich snippets at all to describe these products and services?
Consider using schema.org/AggregateOffer for Product Rich Snippets. Although main use case for it is marking one product available from different sellers, it seems suitable for you as well. It allows to indicate lowest and highest price - I guess you have some price limits even for bespoke products.
If you have reviews for those products on your site Review Rich Snippets are applicable for you. Use schema.org/Review or schema.org/AggregateRating for this.
Example for both:
<div itemscope itemtype="http://schema.org/Product">
<img itemprop="image" src="cute_dress.jpg" />
<span itemprop="name">Very Cute Dress</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 itemprop="offers" itemscope itemtype="http://schema.org/AggregateOffer">
<span itemprop="lowPrice">$1250</span>
to <span itemprop="highPrice">$1495</span>
</div>
</div>
will give you
Breadcrumbs is another option for you. Use data-vocabulary.org for this purpose since breadcrumbs in schema.org are messy and incomplete.
Example:
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/dresses" itemprop="url">
<span itemprop="title">Dresses</span>
</a> ›
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/dresses/real" itemprop="url">
<span itemprop="title">Real Dresses</span>
</a> ›
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
<span itemprop="title">Real Green Dresses</span>
</a>
</div>
will give you
I am currently trying to implement RDFa breadcrumbs to my webpages. I think that I am following the example for multiple breadcrumbs on one page correctly, however in the testing tool and search results the breadcrumbs are not processed as expected (are extracted, but the breadcrumbs are not displayed).
Can you plese give me a hint what am I doing wrong.
Thanks.
Page with the breadcrumbs
<div class="breadCrumb">
<span typeof="v:Breadcrumb">
Algoritmy.net >
<span rel="v:child">
<span typeof="v:Breadcrumb">
<a ref="v:url" property="v:title" href="/category/39974/Mathematics">Mathematics</a> >
<span rel="v:child">
<span typeof="v:Breadcrumb">
<a ref="v:url" property="v:title" href="/category/48669/Primality">Primality</a> >
<span rel="v:child">
<span typeof="v:Breadcrumb">
Rabin-Miller test
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</div>
"ref" isn't a valid RDFa or HTML attribute, make sure you spell it right: rel.
ref="v:url" should be rel="v:url"