Skip to content

Instantly share code, notes, and snippets.

@danielantelo

danielantelo/microdata_business.html

Last active August 2, 2018 00:13
Show Gist options
  • Save danielantelo/255a7f64f8cfc456c13e to your computer and use it in GitHub Desktop.
Save danielantelo/255a7f64f8cfc456c13e to your computer and use it in GitHub Desktop.
Download ZIP
HTML5 Microdata Business Template
Raw
microdata_business.html
<!DOCTYPE html>
<html>
<head>
<!-- Meta conf -->
<meta charset="UTF-8">
<!-- Meta info -->
<title>HTML5 Microdata Business Template</title>
<meta name="description" content="An example of how to layout a semantic html5 page for a business with products">
<meta name="keywords" content="template, html, semantic, microdata, business">
</head>
<body itemscope itemtype="http://schema.org/LocalBusiness">
<header>
<span itemprop="name">local business name</span>
<img itemprop="logo" alt="company logo" src="/images/logo.png">
<!-- External navigation -->
<ul id="social-links">
<li><a itemprop="url" id="twitter" href="https://twitter.com/localbusiness">twitter</a></li>
<li><a itemprop="url" id="facebook" href="https://www.facebook.com/pages/localbusiness">facebook</a></li>
</ul>
<!-- Main navigation -->
<nav id="primary-navigation">
<a class="active" href="/">Home</a>
<a href="/about">About us</a>
<a href="/contact">Contact us</a>
</nav>
</header>
<main>
<h1>Section title</h1>
<p itemprop="description">Business description Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam enim convallis,
scelerisque justo ut, facilisis arcu. Curabitur faucibus odio quis justo volutpat fringilla.
Ut ornare lectus quis dolor luctus, ut laoreet ante pellentesque. Duis erat nisl, vehicula
ac eros ac, pulvinar efficitur nibh. Nam tristique elit congue, molestie eros a, scelerisque libero.
Curabitur bibendum tellus vel erat semper, in pellentesque elit elementum.</p>
<section itemscope itemtype="http://schema.org/ItemList">
<h2 itemprop="name">New Products</h2>
<article itemprop="itemListElement" itemscope itemtype="http://schema.org/Product">
<h3 itemprop="name">Product 1</h3>
<img alt="Product 1" itemprop="image" src="/images/prodcuts/cache/product1.jpg">
<p itemprop="description">description for product 1</p>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price" content="99.00">99</span><span itemprop="priceCurrency" content="EUR">€</span>
<link itemprop="itemCondition" href="http://schema.org/NewCondition">New
<link itemprop="availability" href="http://schema.org/InStock">Available
<a itemprop="url" href="/products/product-1">More info</a>
</div>
</article>
<article itemprop="itemListElement" itemscope itemtype="http://schema.org/Product">
<h3 itemprop="name">Product 4</h3>
... some content ...
</article>
</section>
<section itemscope itemtype="http://schema.org/ItemList">
<h2 itemprop="name">Highlights</h2>
<article itemprop="itemListElement" itemscope itemtype="http://schema.org/Product">
<h3 itemprop="name">Product A</h3>
... some content ...
</article>
<article itemprop="itemListElement" itemscope itemtype="http://schema.org/Product">
<h3 itemprop="name">Product B</h3>
... some content ...
</article>
</section>
</main>
<footer>
<div itemprop="location" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">Rúa Ramón y Cajal 31</span><br>
<span itemprop="postalCode">15006</span>
<span itemprop="addressLocality">A Coruña</span><br>
<span itemprop="addressRegion">Galicia</span>
<span itemprop="addressCountry">ES</span>
<a itemprop="telephone" href="tel:+34981295611">981 295 611</a>
<a itemprop="email" href="mailto:[email protected]">[email protected]</a>
</div>
<span itemprop="geo" itemscope itemtype="https://schema.org/GeoCoordinates">
<meta itemprop="latitude" content="43.3562457">
<meta itemprop="longitude" content="-8.4013645">
</span>
<div id="copyright">
&copy; company. All rights reserved.
</div>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment