3

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">
                    &copy; 2015 &lt;your company here&gt;
                </div>
            </footer>
        </div>
        <script src='/static/js/site.js?1b160de18a8e16ad4b1d'></script>
        <script src="/static/pinax/js/theme.js"></script>
    </body>
</html>
  • Your title says Schema.org (and according to your markup, you want to use the Microdata syntax for this), but you also write/tagged Microformats (but you don’t seem to use any in your example). Did you mean to tag "microdata" instead of "microformats"? – unor Aug 17 '15 at 12:26
3

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 :

https://schema.org/Photograph

https://schema.org/VisualArtwork

0

Definitely add the http://schema.org/Person for the artist (use author property), including filling out the url property within http://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 http://schema.org/ImageObject - also look at the properties of http://schema.org/CreativeWork and http://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>
      &nbsp;<a href="http://plus.google.com/5425142" itemprop="url">View Profile</a> 
   </span>

</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.