CODEWITHSUNDEEP
htmlmicrodataphotography
Matt Tilghman
Matt Tilghman

Reputation: 11

Microdata for photography website

I'm new to all things webmaster... HTML, CSS, and definitely structured data. I'm trying to learn at a breakneck pace, and this website more than any other has been an insanely valuable resource. However, trying to outfit my website with structured data last left me lightly lost as to whether I'm doing it right. There are so few examples online, and next to none for my type of photography gallery website. I'd really appreciate any insight as to whether I'm close-to-on-point, or way off.

Right now I'm concerned with structuring the data on my pages that display a single photo, not the pages with thumbnails. The example I'm using here is from http://www.matttilghman.com/Passage-Through-Time.html

The itemtypes I use are ItemPage for the whole page, and it gets an Author itemtype (me!). Also on the page is a photograph itemtype, and it gets an author itemtype, and a location itemtype. That's really all I'm using for these pages that simply display a single photo.

I describe the ItemPage using meta content in the head. I know it's best to use visible content for the microdata, but I think my visible content is best saved for the itemtype Photograph later on.

I then define the itemtype Photograph in the div that displays the photo. For the keywords of the photo, I try to snipe them from the visible description. But that's really the only visible text I want to have on the page, and I've saved it for the keywords (which I expect to be the most important). I've also doubled it as the "text" itemprop (does doubling it cause any flag?). Things like genre, description, detailed location, I want structured data on that, but I don't want them cluttering up the page, so it's all meta (which is what Schema recommends for data that is not meant to be visible). Does my method seem to look ok to you all? Is there another important itemtype that I should be nesting somewhere? Have I done something with an itemprop that is rendering it useless (like using meta content?) Thanks for any advice!

How and where I structure the ItemPage (in the head):

    <!DOCTYPE html>
<html lang="en"> <div id="HTMLDiv" itemscope itemtype="http://schema.org/ItemPage">
<head>
    <title itemprop="name">Passage Through Time, by Matt Tilghman</title>
    <link href="http://fonts.googleapis.com/css?family=Abel" rel="stylesheet" type="text/css">
    <meta itemprop="keywords" name="keywords" content="blah blah some keywords">
    <meta itemprop="description" name="description" content="description about photo etc">
    <meta name="author" content="Matt Tilghman">
    <span itemprop="author" itemscope itemtype="http://schema.org/Person">
        <meta itemprop="name" content="Matt Tilghman" />
        <meta itemprop="email" content="my email" />
        <meta itemprop="description" content="Photographer of Landscapes from California, North Carolina, South Florida, and New Mexico" />
    </span>

How and where I describe the photo (in its div):

<div id="Oneonta-Falls-Oregon" class="separate" align="center" itemscope itemtype="http://schema.org/Photograph">   
   <span itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Matt Tilghman" />
      <meta itemprop="email" content="my email" />
      <meta itemprop="description" content="Photographer of Landscapes from California, North Carolina, South Florida, and New Mexico" />
   </span>
   <meta itemprop="description" content="Passage Through Time, by Matt Tilghman.  Fine art photograph of Oneonta Falls, in Oneonta Gorge, on the Oregon side of the Columbia River Gorge.  This is the Lower Falls, which is located about a mile upstream from the where the creek meets the Columbia River.">
   <meta itemprop="genre"   content="nature" />
   <meta itemprop="genre"   content="fine art" />
   <span itemprop="contentLocation" itemscope itemtype="http://schema.org/Place">
      <meta itemprop="name" content="Oneonta Gorge">
      <meta itemprop="description" content="Oneonta Gorge is on the Oregon side of the Columbia River Gorge, in the Pacific Northwest region of the United States">
   </span>         
   <a name="Oneonta-Falls-Oregon" href="" title="Passage Through Time" onclick="scroll(name,3); return false">
   <img itemprop="image" src="images/Oneonta-Falls-Oregon-L.jpg" alt="oneonta, gorge, falls, oneonta falls, waterfall, canyon, slot, pacific northwest, oregon, columbia river gorge" >
   </a>
   <br><br>
   <div class="titleL2" itemprop="name">Passage Through Time</div>
   <br>
   <div class="captionL2" itemprop="text">Shown here is <span itemprop="keywords">Lower Oneonta Falls</span>, an <span itemprop="keywords">intimate</span> <span itemprop="keywords">waterfall</span> at the end of <span itemprop="keywords">Oneonta Gorge</span>, on the <span itemprop="keywords">Oregon</span> side of the <span itemprop="keywords">Columbia River Gorge</span>. Oneonta Gorge seems like a <span itemprop="genre">landscape</span> off another planet. It's a narrow <span itemprop="keywords">gorge</span> reminiscent of the <span itemprop="keywords">slot canyons</span> of the American Southwest, but in the middle of a <span itemprop="keywords">lush</span> <span itemprop="keywords">temperate</span> <span itemprop="keywords">rain forest</span>, with walls clad in moss and ferns, dripping with moisture.  While hiking up the gorge, my mind was first struck by the similarity to a slot canyon, but then began to ponder the different ways they were created.  The slot canyons of the Southwest form when rain water drains through existing sandstone channels, further carving them with every downpour.  Oneonta Gorge, however, likely formed as the waterfalls (there are four) eroded their own precipice, marching backwards in time.  As I considered this, the trek upstream began to feel like a march forward in time, mimicking the path of the waterfall but at a much faster pace.  It's a truly remarkable piece of <span itemprop="keywords">wilderness</span>, and well worth the tricky trek over logjams and slippery boulders.</div>

Upvotes: 1

Views: 2996

Answers (1)

Alohci
Alohci

Reputation: 82976

Looks good to me. Definitely use the Google Structured Data Tesing Tool to check out your microdata markup.

I would be a little wary of having so much information in <meta> elements. Although it's not wrong, it may make maintenance harder than necessary. An alternative worth considering is to put the information into normal paragraphs, and then use CSS to hide them from the user. That way, to check that the information is up to date, all you need do is disable CSS, and you can read the content naturally. It would also have the benefit of being indexable by less microdata-aware indexers.

Upvotes: 1

Related Questions