Rich Snippets: rel="nofollow" and RDFa - html

I'm using Rich Snippets to markup my content according to the collections on schema.org. I am using RDFa Lite to do so and am now having a problem with the rel attribute. Some of my links do have the rel="nofollow" attribute/value. As RDFa Lite is a subset of RDFa, the rel attribute gets recognised as additional markup. Please see this upload to Google's Structured Data Testing Tool for the extracted data for the following markup:
<div vocab="http://schema.org/" typeof="SportsTeam">
<span property="name">San Francisco 49ers</span>
<div property="member" typeof="OrganizationRole">
<div property="member" typeof="http://schema.org/Person">
<span property="name">Joe Montana</span>
</div>
<span property="startDate">1979</span>
<span property="endDate">1992</span>
<span property="namedPosition">Quarterback</span>
<a rel="nofollow" href="http://www.google.com/">A Paid Link</a>
</div>
The problem is of course, that the Paid Link shouldn't appear in the structured markup. Any ideas how to solve this?

One possibility is to use prefixes for your Schema.org usage. Because the RDFa Core Initial Context defines schema for http://schema.org/, you can even use it without specifying it in a prefix attribute first:
<div typeof="schema:SportsTeam">
<span property="schema:name">San Francisco 49ers</span>
<div property="schema:member" typeof="schema:OrganizationRole">
<div property="schema:member" typeof="schema:Person">
<span property="schema:name">Joe Montana</span>
</div>
<span property="schema:startDate">1979</span>
<span property="schema:endDate">1992</span>
<span property="schema:namedPosition">Quarterback</span>
<a rel="nofollow" href="http://www.google.com/">A Paid Link</a>
</div>

You can add an empty vocab="" on (or around) the elements that use rel for purposes outside of RDFa. Like:
<div vocab="http://schema.org/" typeof="SportsTeam">
<span property="name">San Francisco 49ers</span>
<div property="member" typeof="OrganizationRole">
<div property="member" typeof="http://schema.org/Person">
<span property="name">Joe Montana</span>
</div>
<span property="startDate">1979</span>
<span property="endDate">1992</span>
<span property="namedPosition">Quarterback</span>
<a vocab="" rel="nofollow" href="http://www.google.com/">A Paid Link</a>
</div>
(Also note that you can use custom (non-URI) rel values alongside RDFa in HTML if you just add a property on the same element (this makes an RDFa processor ignore the rel, as defined in extension 7 of RDFa 1.1 in HTML). E.g. by adding property="author" next to rel="me".)

Related

Is it good to put HTML5 Microdata on preview blocks?

Consider this example:
<section id="news_block_left" class="block" itemscope="" itemtype="http://schema.org/ItemList">
<a href="http://dev.com/index.php?controller=NewsList" title="News" itemprop="url">
<h2 class="title_block" itemprop="name">News</h2>
</a>
<div class="block_content">
<ul class="news-list">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/NewsArticle">
<a href="http://dev.com/index.php?id_news=7&controller=News" title="News Title1" itemprop="url">
<span><span itemprop="datePublished">2015-03-30</span> <em itemprop="headline">News Title1</em></span>
</a>
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/NewsArticle">
<a href="http://dev.com/index.php?id_news=8&controller=News" title="T230 series (1999–2006)" itemprop="url">
<span><span itemprop="datePublished">2015-03-08</span> <em itemprop="headline">T230 series (1999–2006)</em></span>
</a>
</li>
</ul>
<meta itemprop="numberOfItems" content="2">
<a class="more_news" href="http://dev.com/index.php?controller=NewsList" title="More news">
<span>More news</span>
</a>
</div>
</section>
This block exists in the sidebar, it doesn't contain full news element data, only a couple of link this them.
The link "More news" leads to a more complete list with more markup (but still only a list with links to the actual articles).
Is there a benefit in putting Microdata on such preview lists? Or is Microdata intended for complete pages (complete news page with body, product page, etc.)?
P.S. Don't mind the unfriendly URLs, it's only dev version.
That’s fine. It’s in no way required to use Microdata only for certain content. The same goes for the vocabulary Schema.org. The more the merrier.
Thanks to using Schema.org’s url property for each NewsArticle item, consumers have the chance to learn that these items have separate URLs with probably (but not necessarily) more relevant content.
On a side note: You might want to use name instead of headline (or name in addition). The name property, as it can be used on all Schema.org types, has probably more support than the headline property, which can only be used on CreativeWork types. (Currently it gets discussed if headline should be marked superseded by name.)

Why isn't this valid XHTML?

I'm trying to put a block of HTML into a field in a content management system, but it keeps stripping out one of the elements. In particular it is stripping out the <i class="sprite arrowDDnav"></i> from the block below.
<a class="static selected menu-item rootActive" href="/community/presbyterian-healthcare-foundation/Pages/default.aspx">
<i class="sprite arrowDDnav"></i>
<span class="additional-background">
<span class="menu-item-text">Presbyterian Healthcare Foundation</span>
<span class="ms-hidden">Currently selected</span>
</span>
</a>
Any idea why this might be? And any idea how I can "trick" the CMS into preserving the above HTML, or should I resort to using JQuery and document.ready(...) to inject the element in the appropriate place?

How do I write/format HTML with RDFa to be easily human-readable in source?

Adding RDFa is quite fun, but tends to make my source almost impossible to read, (even when the editor has decent syntax highlighting.) For instance:
<div id="me" prefix="foaf: http://xmlns.com/foaf/0.1/ schema:
http://schema.org/Person" typeof="foaf:Person schema:Person"
resource="http://carlboettiger.info#me"> <p> <img property="foaf:depiction"
src="assets/img/carlboettiger.png" alt="Photo of Carl Boettiger"
style="float: right; margin: 10px 10px"/>
I am <a property="foaf:homepage schema:url"
href="http://carlboettiger.info"><span property="foaf:name
schema:name"><span property="foaf:givenName schema:givenName">Carl</span>
<span property="foaf:familyName schema:familyName">Boettiger</span></span></a>, <span
property="schema:jobTitle">a graduate student</span> with <span property="foaf:knows"><span
typeof="foaf:Person"><span property="foaf:name"><a property="foaf:homepage"
href="http://two.ucdavis.edu/%7Eme">Alan Hastings</a>
</span></span></span> in the <a property="foaf:workplaceHomepage"
href="http://www-eve.ucdavis.edu/eve/pbg/">Population Biology</a>
Ph.D program at<span property="schema:affiliation">UC Davis</span>,
working on <span property="foaf:interest">regime shifts</span>
in <span property="foaf:interest">ecology</span> and <span
property="foaf:interest">evolution</span>. Such shifts mark the most
dramatic events in <span property="foaf:interest">complex systems</span>
I mislike dense markup in general, for which reason I frequently prefer to write in markdown, but this seems impossible in the context of adding RDFa markup, such as this example.
It seems like one might exploit whitespace to make this a bit more human readable. Are there any existing tools or conventions for this? (the example below just comes from !fmt wordwrapping in vim, which usually looks decent but seems at a loss in this case).
you should prefer using wide spread ontologies instead of duplicating classes or predicates that already have equivalents (or just produce owl:equivalentClass or owl:sameAs relations)
there are many shortcuts in RDFa 1.1 you have not used, for example vocab or rel properties
you can use indents to beatify markup
According to that, your page can look like:
<body prefix="schema: http://schema.org/"
vocab="http://xmlns.com/foaf/0.1/">
<p typeof="Person" resource="http://carlboettiger.info#me">
<img property="depiction" style="float: right; margin: 10px 10px"
src="assets/img/carlboettiger.png" alt="Photo of Carl Boettiger" />
I am <a property="homepage schema:url" href="http://carlboettiger.info">
<span property="name"><span property="givenName">Carl</span> <span property="familyName">Boettiger</span></span>
</a>, a <span property="schema:jobTitle">graduate student</span> with
<span rel="knows" typeof="Person">
<span property="name"><a property="homepage" href="http://two.ucdavis.edu/%7Eme">Alan Hastings</a></span>
</span> in the <a property="workplaceHomepage" href="http://www-eve.ucdavis.edu/eve/pbg/">Population Biology</a>
Ph.D program at <span property="schema:affiliation">UC Davis</span>, working on
<span rel="interest">
regime shifts in
ecology and
evolution.
Such shifts mark the most dramatic events in <span>complex systems</span>
</span>
</p>
</body>

How to add 'name' and 'url' properties to the same tag?

I'm adding the schema.org Microdata to my website.
My HTML code is like this:
<div itemscope itemtype="http://schema.org/Organization">
<span class="title">Name of the organization</span>
ABC Company
</div>
Since the itemprop "url" and "name" of the Organization are all in the anchor tag. How can I indicate the both "url" and "name" itemprop on the same tag? Must I add extra span tag for this purpose?
I have tried searching some coding examples on this but cannot find any example to show the use of multiple itemprop on the same tag.
At the end, I want to have Microdata like this:
url="http://www.ABCCompany.com", name="ABC Company"
You have to do it by nesting two elements. For example, you can nest a <span> inside the <a> and put the itemprop="name" on that:
<div itemscope itemtype="http://schema.org/Organization">
<a itemprop="url" href="http://www.ABCCompany.com/">
<span itemprop="name">ABC Company</span>
</a>
</div>
I find this site handy for testing such things.
There may be a problem with google. The "rich snippets testing tool" indicates that when you mark an anchor tag as a url, the body of the tag is used as value rather than the href attribute. But nobody wants to display the url inside an anchor tag.
This also works and may look a bit easier to maintain:
<div itemscope itemtype="http://schema.org/Organization">
<span class="title" itemprop="name"><a itemprop="url" href="http://www.ABCCompany.com/">ABC Company</span></a>
</div>
Google's support for schema.org and the google structured data tester have improved considerably since the original question was posted. The code above validates correctly in it.
The OP's original code now seems to work ok. As shown here:
https://search.google.com/structured-data/testing-tool#url=http%3A%2F%2Fmercedes-benzhanoi.com.vn%2Fmercedes-ha-noi.auto%2Fgla-250-4matic.html
<div itemscope="" itemtype="http://schema.org/Organization">
<span class="title" itemprop="name">
<a itemprop="url" href="http://mercedes-benzhanoi.com.vn/mercedes-ha-noi.auto/gla-250-4matic.html">GLA 250 4MATIC</a></span>
</div>

What is the best method to code physical address in html?

What is the best method to code physical address in html ? in Semantic, Accessible and SEO way
Use a Microformats vCard
<div class="vcard">
<span class="fn">Gregory Peck</span>
<a class="org url" href="http://www.commerce.net/">CommerceNet</a>
<div class="adr">
<span class="type">Work</span>:
<div class="street-address">169 University Avenue</div>
<span class="locality">Palo Alto</span>,
<abbr class="region" title="California">CA</abbr>
<span class="postal-code">94301</span>
<div class="country-name">USA</div>
</div>
<div class="tel">
<span class="type">Work</span> +1-650-289-4040
</div>
<div class="tel">
<span class="type">Fax</span> +1-650-289-4041
</div>
<div>Email:
<span class="email">info#commerce.net</span>
</div>
</div>
Accesible: √
Semantic: I guess..
SEO: √ Google announces support for microformats
More examples at http://microformats.org/wiki/hcard-examples
Also check out the Oomph Microformats toolkit that helps you displaying and consuming microformats.
<address> is exactly what you are looking for.
http://www.w3.org/TR/html401/struct/global.html#h-7.5.6