: Maximizing Structured Data (Schema.org) in an Artist's Page For a very long time I've been trying to make use of microformats, microdata, and general markup enhancements for SEO purposes. Lately
For a very long time I've been trying to make use of microformats, microdata, and general markup enhancements for SEO purposes. Lately structured data is really starting to "take" and I would like to unquestionably do it right this time.
I'm creating a page that displays an artist's work (digital art) and it contains a main image, a transparency preview, as well as keywords, caption, about, etc.
I'm showing the HTML of my prototype page and am wondering what I might do to really maximize this so that it is a true masterpiece of structured data application.
I hope this is not excessively against the spirit of SE, but I feel many users like myself only understand minimal basics of this new data science and do not use it to the full.
That being said, how can I maximize this structured data which can apply to those of digital art or photography?
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<title>This is the SEO Title | example.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='/static/css/gecko-bootstrap.css?1b160de18a8e16ad4b1d' rel='stylesheet' />
<link href='/static/css/styles.css' rel='stylesheet' />
<!-- HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
</head>
<body class="product" id="" >
<div class="">
<header>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="fa fa-bars"></span>
</button>
<a class="navbar-brand" href="/">example.com</a>
</div>
<div class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav pull-right">
<p class="navbar-text">
<i class="fa fa-user"></i> leo
</p>
<li>
<a href="/account/settings/"><i class="fa fa-cog"></i> Settings</a>
</li>
<li>
<a id="account_logout" href="/account/logout/"><i class="fa fa-power-off"></i> Log out</a>
</li>
</ul>
<form id="accountLogOutForm" style="display: none;" action="/account/logout/" method="POST">
<input type='hidden' name='csrfmiddlewaretoken' value='G5qPsBb1Ap4Y4Whwpl7Sppx52CdnK3f9' />
</form>
</div>
</div>
</div>
</header>
<div itemscope itemtype="http://schema.org/ImageObject" id="">
<h1 itemprop="name">Orange Man Contractor Pointing Or Presenting Left</h1>
<!--SHOWCASE-->
<div id="showcase">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#preview-1" aria-controls="preview-1" role="tab" data-toggle="tab">
Image
</a>
</li>
<li role="presentation" class="">
<a href="#preview-2" aria-controls="preview-2" role="tab" data-toggle="tab">
Transparent png
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="preview-1">
<img itemprop="representativeOfPage" alt="This is the alt title" height="700" width="364" src="/media/previews/orange-man-contractor-pointing-or-presenting-left-129.jpg" />
</div>
<div role="tabpanel" class="tab-pane fade " id="preview-2">
<img alt="This is the alt title" height="700" width="700" src="/media/previews/orange-man-contractor-pointing-or-presenting-left-130.jpg" />
</div>
</div>
</div>
<!--//SHOWCASE-->
<div class="container">
<h2>Small description h2</h2>
<div itemprop="caption">
Orange man contractor Pointing to left side, presenting an idea, design, product, or object.
</div>
<h3>Long description h2</h3>
<div itemprop="about">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
<a itemprop="license"></a>
</div>
<div>
<a itemprop="keywords" href="/stock/keyword/occupation/">occupation</a>
<a itemprop="keywords" href="/stock/keyword/graphic/">graphic</a>
<a itemprop="keywords" href="/stock/keyword/man/">man</a>
<a itemprop="keywords" href="/stock/keyword/manage/">manage</a>
<a itemprop="keywords" href="/stock/keyword/render/">render</a>
<a itemprop="keywords" href="/stock/keyword/3d/">3d</a>
<a itemprop="keywords" href="/stock/keyword/worker/">worker</a>
<a itemprop="keywords" href="/stock/keyword/contractor/">contractor</a>
<a itemprop="keywords" href="/stock/keyword/orange-man/">orange man</a>
<a itemprop="keywords" href="/stock/keyword/person/">person</a>
<a itemprop="keywords" href="/stock/keyword/engineer/">engineer</a>
<a itemprop="keywords" href="/stock/keyword/cute_1/">cute</a>
<a itemprop="keywords" href="/stock/keyword/design/">design</a>
<a itemprop="keywords" href="/stock/keyword/helmet/">helmet</a>
<a itemprop="keywords" href="/stock/keyword/isolated/">isolated</a>
<a itemprop="keywords" href="/stock/keyword/left/">left</a>
<a itemprop="keywords" href="/stock/keyword/mascot/">mascot</a>
<a itemprop="keywords" href="/stock/keyword/construction/">construction</a>
<a itemprop="keywords" href="/stock/keyword/pointing/">Pointing</a>
<a itemprop="keywords" href="/stock/keyword/offer/">offer</a>
<a itemprop="keywords" href="/stock/keyword/communication/">communication</a>
<a itemprop="keywords" href="/stock/keyword/communcating/">communcating</a>
<a itemprop="keywords" href="/stock/keyword/presenting/">presenting</a>
<a itemprop="keywords" href="/stock/keyword/character/">character</a>
<a itemprop="keywords" href="/stock/keyword/pose/">pose</a>
<a itemprop="keywords" href="/stock/keyword/professional/">professional</a>
<a itemprop="keywords" href="/stock/keyword/gesture_1/">Gesture</a>
<a itemprop="keywords" href="/stock/keyword/direction/">direction</a>
<a itemprop="keywords" href="/stock/keyword/cartoon/">cartoon</a>
<a itemprop="keywords" href="/stock/keyword/supervise/">supervise</a>
<a itemprop="keywords" href="/stock/keyword/safety/">safety</a>
<a itemprop="keywords" href="/stock/keyword/direct/">direct</a>
<a itemprop="keywords" href="/stock/keyword/orange/">orange</a>
<a itemprop="keywords" href="/stock/keyword/command/">command</a>
<a itemprop="keywords" href="/stock/keyword/abstract/">abstract</a>
</div>
<hr />
<a title="edit" href="/gecko-admin/edit-images/product-115/">Edit</a>
</div>
</div>
22
<hr />
<footer>
<div class="container">
© 2015 <your company here>
</div>
</footer>
</div>
<script src='/static/js/site.js?1b160de18a8e16ad4b1d'></script>
<script src="/static/pinax/js/theme.js"></script>
</body>
</html>
More posts by @Rivera981
2 Comments
Sorted by latest first Latest Oldest Best
Definitely add the schema.org/Person for the artist (use author property), including filling out the url property within schema.org/Person with a social media link (google plus or facebook ideally).
I don't see a link to related art works, related links can be set with the properties.
There's also no image property set inside ImageObject.
A full list of useful properties and examples can be found on schema.org/ImageObject - also look at the properties of schema.org/CreativeWork and schema.org/Thing (Thing's properties applies to everything, CreativeWork's properties apply to ImageObject).
These fields are especially important:
headline
image
datePublished
thumbnailUrl
description
name
url
caption
author
Also useful:
mentions
associatedArticle - link to news article about artwork
height
width
uploadDate
Nesting a Person within the ImageObject and setting image and author properties
<div itemscope itemtype="http://schema.org/ImageObject">
<span itemprop="headline">Moonlight in New Orleans</span>
<img src="moonlight.png" alt ="Moonlight in New Orleans" itemprop="image"> by
<span itemprop="author" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">J.S. Olson</span>
<a href="http://plus.google.com/5425142" itemprop="url">View Profile</a>
</span>
</div>
May be this example will help you
<div itemscope itemtype="http://schema.org/VisualArtwork">
<link itemprop="sameAs" href="http://rdf.freebase.com/rdf/m.0439_q" />
<h1 itemprop="name" lang="fr">La trahison des images </h1>
<p>
A <span itemprop="artform">painting</span> also known as
<span>The Treason of Images</span> or
<span itemprop="alternateName">The Treachery of Images</span>.
</p>
<img itemprop="image" src="http://http://upload.wikimedia.org/wikipedia/en/b/b9/MagrittePipe.jpg" />
<div itemprop="description">
<p>
The painting shows a pipe. Below it, Magritte painted,
<q lang="fr">Ceci n'est pas une pipe.</q>, French for
"This is not a pipe."
</p>
</div>
<ul>
<li>Artist:
<span itemprop="creator" itemscope itemtype="http://schema.org/Person">
<a itemprop="sameAs" href="https://www.freebase.com/m/06h88">
<span itemprop="name">René Magritte</span>
</a>
</span>
</li>
<li>Dimensions:
<span itemprop="width" itemscope itemtype="http://schema.org/Distance">940 mm</span> ×
<span itemprop="height" itemscope itemtype="http://schema.org/Distance">635 mm</span>
</li>
<li>Materials:
<span itemprop="artMedium">oil</span> on <span itemprop="artworkSurface">canvas</span>
</li>
</ul>
</div>
read more at :
schema.org/Photograph schema.org/VisualArtwork
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.