Skip to content

Instantly share code, notes, and snippets.

@mlangone

mlangone/schema-org-structured-data-markup-using-microdata.html

Forked from milanaryal/schema-org-structured-data-markup-using-microdata.html
Created April 16, 2018 18:02
Show Gist options
  • Save mlangone/63e2f6ae9df5850321cdaeb1255ed76a to your computer and use it in GitHub Desktop.
Save mlangone/63e2f6ae9df5850321cdaeb1255ed76a to your computer and use it in GitHub Desktop.
Download ZIP
An example of how to mark up a HTML5 webpage using the schema.org schemas and microdata.
Raw
schema-org-structured-data-markup-using-microdata.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Site Title</title>
<link rel="stylesheet" href="/assets/css/style.min.css">
</head>
<body itemscope itemtype="http://schema.org/WebPage">
<header class="site-header" role="banner" itemscope itemtype="http://schema.org/WPHeader">
<div class="wrap">
<hgroup class="title-area">
<h1 class="site-title" itemprop="name">Site Title</h1>
<h2 class="site-description" itemprop="description">Site Description</h2>
</hgroup>
</div>
</header><!-- /.site-header -->
<nav class="site-navbar" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
<div class="wrap">
<ul class="site-navbar-nav">
<li><a itemprop="url" href="http://mysite.com/"><span itemprop="name">Home</span></a></li>
<li><a itemprop="url" href="http://mysite.com/about/"><span itemprop="name">About</span></a></li>
</ul>
</div>
</nav><!--/.site-navigation -->
<main class="site-content" role="main" itemscope itemprop="mainContentOfPage">
<article class="post" itemscope itemtype="http://schema.org/Article">
<header class="post-header">
<h1 class="post-title" itemprop="name headline"><a href="http://mysite.com/post">Post Title</a></h1>
<p class="post-meta"><time class="post-time" itemprop="datePublished" datetime="2015-01-07T07:07:21+00:00">January 7, 2015</time> by
<span class="post-author" itemprop="author" itemscope itemptype="http://schema.org/Person">
<a itemprop="url" href="http://mysite.com/author" class="post-author-link">
<span class="post-author-name" itemprop="name">Author Name</span>
</a>
</span>
</p>
</header>
<div class="post-content" itemprop="articleBody">
<p>This is a article body.</p>
</div>
<footer class="post-footer">
<p class="post-meta">
<span class="post-categories">Filed Under: <a href="/category/category1/" title="View all posts in Category">Category 1</a></span>
<span class="post-tags">Tagged With: <a href="/tag/tag1/">tag 1</a>, <a href="http://mysite.com/tag/tag2/">tag 2</a></span>
</p>
</footer>
<section class="post-comments" id="comments">
<h3>Comments</h3>
<ol class="comment-list">
<li class="comment even thread-even depth-1" id="comment-123">
<article itemprop="comment" itemscope itemtype="http://schema.org/UserComments">
<header class="comment-header">
<p class="comment-author" itemprop="creator" itemscope itemtype="http://schema.org/Person">
<span itemprop="name"><a href="http://authorswebsite.com" rel="external nofollow" itemprop="url">Comment Author</a></span>
</p>
<p class="comment-meta">
<time itemprop="commentTime" datetime="2014-09-15T13:22:51+00:00">September 15th, 2014 at 13:22</time>
</p>
</header>
<div class="comment-content" itemprop="commentText">
<p>some comment text etc etc...</p>
</div>
</article>
</li>
</ol>
</section><!-- /.post-coments -->
</article><!-- /.post -->
<nav>
<ul class="pagination" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
<li><a itemprop="url" href="/page1/"><span itemprop="name">Newer Posts</span></a></li>
<li><a itemprop="url" href="/page2/"><span itemprop="name">Older Posts</span></a></li>
</ul>
</nav>
</main><!-- /.site-content -->
<aside class="site-sidebar" role="complementary" itemscope itemtype="http://schema.org/WPSideBar">
<section class="widget-wrap">
<h4 class="widget-title" itemprop="name">Site Sidebar Widget 1</h4>
<div class="widget-text">
<p>This is the Site Sidebar Widget 1</p>
</div>
</section>
<section class="widget-wrap">
<h4 class="widget-title" itemprop="name">Site Sidebar Widget 2</h4>
<div class="widget-text">
<p>This is the Site Sidebar Widget 2</p>
</div>
</section>
</aside><!-- /.site-sidebar -->
<footer class="site-footer" role="contentinfo" itemscope itemtype="http://schema.org/WPFooter">
<div class="wrap">
<p class="back-to-top"><a title="Back to top" href="#wrap">Back to top</a></p>
<p class="copyright">&copy; <span itemprop="copyrightYear">2015</span> <span itemprop="copyrightHolder" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Site Holder Name</span></span>.</p>
</div>
</footer><!-- /.site-footer -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/assets/js/scripts.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment