CODEWITHSUNDEEP
schema.orgmicrodatastructured-data
Khaled A
Khaled A

Reputation: 63

schema / structured data

I am trying to figure out the best way to use schema / structured data on two types of pages. One is an image gallery and one is a video page.

Here is data that is present on each type of page:

  1. Title of gallery
  2. Description of gallery
  3. Name, picture and profile link of the person who submitted the gallery
  4. Review Text
  5. Name, picture and profile link of the reviewer
  6. Date gallery was posted
  7. Average rating of the gallery
  8. Individual images in the gallery
  9. Individual comments left by viewers of the gallery

Video page have almost the same information minus:

Individual images in the gallery

Instead, it has the video, video thumbnail and video duration

I'm a novice at using structured data and I'm hoping if I can get to grips with a single type of schema, I'll be able to apply it to other areas of my site like forums, blogs, etc.

Thank you.

Upvotes: 0

Views: 1186

Answers (1)

Mousey
Mousey

Reputation: 1865

This is a complex question because it involves using multiple types of structured data definitions. Either microdata or rdf are recommended by google. Start with the basics and add in other elements once you have them working. Google's testing tool and the Structured data linter will check them for you.

This generator will help, just remove the photographed by part.

The https://schema.org/ImageGallery schema exists, which will contain one or more images (images use http://schema.org/ImageObjects). Example from photoswipe with the images each including a link to a larger image:

<div itemscope itemtype="http://schema.org/ImageGallery">

<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="large-image.jpg" itemprop="contentUrl">
        <img src="small-image.jpg" itemprop="thumbnail" alt="Image description" />
    </a>

    <!-- optionally use this method to store image dimensions for PhotoSwipe -->
    <meta itemprop="width" content="300">
    <meta itemprop="height" content="600">

    <figcaption itemprop="caption description">
        Long image description

        <!-- optionally define copyright -->
        <span itemprop="copyrightHolder">Photo: AP</span>
    </figcaption>
</figure>

<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="large-image.jpg" itemprop="contentUrl">
        <img src="small-image.jpg" itemprop="thumbnail" alt="Image description" />
    </a>
    <figcaption itemprop="caption description">Long image description</figcaption>
 </figure>

 ...

</div>

Each of the following things are properties of ImageObject, so put these in where they are in your code, e.g. for Title of gallery use the property headline as follows:

<span itemprop="headline">My trip to Paris</span>

Properties of ImageGallery you can use:

  • about A description of gallery
  • aggregateRating average rating, eg "3.5"
  • dateCreated Date gallery was posted
  • comment use either another Thing for each (which would let you give the person's name and other details separately - using http://schema.org/Comment) or fill out one comment line per comment. Individual comments left by viewers of the gallery

Complex ones using more Things (more structured data) -

  • author with Name, picture and profile link - either just add a link to their own page or social media profile, or use the http://schema.org/Person schema (name, url and image properties) as below

<span itemprop="author" itemscope itemtype="http://schema.org/Person">

<span itemprop="name">Joe bloggs</span>

&nbsp;<img src="joebloggs.png" itemprop="image" />&nbsp

<a itemprop="url" href="http://yourwebsite.com/joeblogs.html">View Profile</a>

</span>

Review TextName, picture and profile link of the reviewer

This can be done like the author one above, but using the http://schema.org/Review schema

Upvotes: 1

Related Questions