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
Related
For some years I'm using on products pages the hreview microformat for product's reviews. Accordingly, to Google's Structured data testing tool, everything is fine with the hreview but I got some warnings for the Product and among those warnings, I got one for the "review" section. I want to get rid of that warning. I'm using schema.org microdata for the product page and I tried to add the schema.org "Review" item type for the reviews, along with the hreview.
So my question is: is there a problem or a bad practice to combine hreview with review microdata from schema.org?
I created an example of my review section:
<div class="hreview review-wrapper" itemprop="review" itemscope itemtype="http://schema.org/Review">
<div class="hidden item">
<a class="url fn" href="product.com">
<img src="/images/product.jpg" alt="umbrella" class="photo" />
</a>
</div>
<div class="vcard reviewer">
<div class="author">
Review added by: <span class="fn" itemprop="author">John Doe</span>
</div>
<div class="adr">
<div class="locality"><span>from Paris</span></div>
</div>
</div>
<div class="rating" itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<span itemprop="ratingValue">5</span>
</div>
<div class="write-date">
Written on <abbr class="dtreviewed">15th february 2019</abbr>
<meta itemprop="datePublished" content="2019-02-15">
</div>
<div class="review-content">
<div class="description">
<p>
<span itemprop="description">This is the best umbrella ever</span>
</p>
</div>
</div>
</div>
What's wrong with this code? Google's structured data tool says "telephone [Unspecified type]:" The rest of the schema works fine. I'd love to know why it's kicking it out.
<div class="columns small-12 medium-4 contact" vocab="http://schema.org/" typeof="LocalBusiness">
<a property="telephone" class="phone" href="tel:+15032418234">503 241 8234</a><br />
info#moderninterface.com<br/>
<a property="address" typeof="PostalAddress" class="addy map" href="http://maps.apple.com/?daddr=1001+SE+Water+Ave,Portland,OR">
<span property="streetAddress">1001 SE Water Avenue, Suite 330</span><br />
<span property="addressLocality">Portland</span>,
<span property="addressRegion">Oregon</span>
<span property="postalCode">97214</span>
</a>
</div>
It wants a content property for the phone number. It has the same problem with email addresses.
<a property="telephone" class="phone" href="tel:+15032418234" content="+15032418234">503 241 8234</a>
I have added the necessary Schema markup for the JobPosting schema to my job board website. However, the rich snippets are not showing up in SERPs unlike one of my competitors.
Am I missing any mandatory fields?
I have checked the webmaster tools Structured Data tool and everything looks fine.
Here is an example screenshot:
Any helps greatly appreciated.
My URL: http://www.backpackerjobboard.com.au/jobs-in/sydney/
EDITED: acode snippet added
<ul class="jobs-list">
<li class="group" itemscope itemtype="http://schema.org/JobPosting">
<div class="inner">
<span class="status"><span>·</span> New</span>
<h3><span itemprop="title">Qualified Joiners and Cabinet Makers wanted Immediate start</span></h3>
<span class="company-name" itemprop="hiringOrganization" itemscope itemtype="http://schema.org/Organization"><span itemprop="name">NSW Joinery Pty Ltd</span></span>
<span class="location"><i class="icon"> </i>
<span itemprop="jobLocation" itemscope itemtype="http://schema.org/Place">
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="addressRegion">Sydney</span>
</span>
</span>
</span>
<span class="time-posted" itemprop="datePosted">Job posted: 21st November 2014</span>
</div>
<span class="category" itemprop="employmentType">Full-time</span>
</li>
...
</ul>
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".)
I have an address that is going to be displayed on a webpage, but it is not the address for the author of the page. How should this be coded to be semantic given the w3c recommendation of:
The ADDRESS element may be used by authors to supply contact information for a document or a major part of a document such as a form. This element often appears at the beginning or end of a document.
You could use the hCard Microformat to describe your address. The advantage of Microformats is that you can use them in your existing documents to enrich them.
Here’s an example derived from the example from the Microformats wiki:
<address class="vcard">
<span class="adr">
<span class="street-address">169 University Avenue</span>
<span class="locality">Palo Alto</span>,
<abbr class="region" title="California">CA</abbr>
<span class="postal-code">94301</span>
<span class="country-name">USA</span>
</span>
</address>
The answer by Gumbo is missing an ingredient. An hcard/vcard is required to have a name (fn).
http://microformats.org/wiki/hcard#Property_List
Also the address tag should not be used in this case as it is specifically used to relate to the author of the page it is displayed on.
<div class="vcard">
<span class="fn">Tristan Ginger</span>
<span class="adr">
<span class="street-address">169 University Avenue</span>
<span class="locality">Palo Alto</span>,
<abbr class="region" title="California">CA</abbr>
<span class="postal-code">94301</span>
<span class="country-name">USA</span>
</span>
</div>
Most business wanting to display their address on their website should use the following:
<address class="vcard">
<span class="fn org">Tristan Ginger Inc</span>
<span class="adr">
<span class="street-address">69 University Avenue</span>
<span class="locality">Great Bookham</span>,
<span class="region">Surrey</span>
<span class="postal-code">KT22 9TQ</span>
<span class="country-name">UK</span>
</span>
</address>
you can use RDFa, eg:
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:foaf="http://xmlns.com/foaf/0.1/"
xmlns:address="http://schemas.talis.com/2005/address/schema#"
xml:lang="fr" lang="fr"
>
<head>...</head>
<body>
<div typeof="foaf:Person" about="http://you.openid.com#me">
<span id="name" property="foaf:name">First Name, Last Name</span>
<address property="address:streetAddress">My Street, My City</address>
</div>
</body>
</html>
You can use the Schema.org vocabulary's PostalAddress item for this. It can be used via Microdata, RDFa, or JSON-LD.
For example, using RDFa:
<div vocab="http://schema.org/" typeof="PostalAddress">
<span property="name">Google Inc.</span>
P.O. Box<span property="postOfficeBoxNumber">1234</span>
<span property="addressLocality">Mountain View</span>,
<span property="addressRegion">CA</span>
<span property="postalCode">94043</span>
<span property="addressCountry">United States</span>
</div>
AFAIK, this should also be valid with <address> in place of the enclosing <div>:
<address vocab="http://schema.org/" typeof="PostalAddress">
<span property="name">Google Inc.</span>
P.O. Box<span property="postOfficeBoxNumber">1234</span>
<span property="addressLocality">Mountain View</span>,
<span property="addressRegion">CA</span>
<span property="postalCode">94043</span>
<span property="addressCountry">United States</span>
</address>