What's the proper way to add Microdata (for Schema.org VideoObject) to a page in my Django app?

Question

I'm followin the directions on Google which says

Add schema.org markup directly to the HTML of your video page. The markup will not be visible to users and will not affect how your page looks

So I added the following to the top of my video html

<div itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
  <h2>Video: <span itemprop="name">Title</span></h2>
  <meta itemprop="duration" content="T1M33S" />
  <meta itemprop="thumbnailUrl" content="thumbnail.jpg" />
  <meta itemprop="contentURL" content="http://www.example.com/video123.flv" />
  <meta itemprop="embedURL" content="http://www.example.com/videoplayer.swf?video=123" />
  <meta itemprop="uploadDate" content="2011-07-05T08:00:00+08:00" />
  <meta itemprop="expires" content="2012-01-30T19:00:00+08:00" />
  <meta itemprop="height" content="400" />
  <meta itemprop="width" content="400" />
  <object ...>
    <param ...>
    <embed type="application/x-shockwave-flash" ...>
  </object>
  <span itemprop="description">Video description</span>
</div>

soon as I did I saw a white block with the word title on top of it. I saw it and the directions said I wouldn't. Am I missing something? What's the proper way to do this?

EDIT: I'm using Django and heres my code

{% block content %}

<div itemprop="video" itemscope itemtype="http://schema.org/VideoObject">

  <meta itemprop="duration" content="T1M33S" />
  <meta itemprop="thumbnailUrl" content="thumbnail.jpg" />
  <meta itemprop="contentURL" content="http://www.example.com/video123.flv" />
  <meta itemprop="embedURL" content="http://www.example.com/videoplayer.swf?video=123" />
  <meta itemprop="uploadDate" content="2011-07-05T08:00:00+08:00" />
  <meta itemprop="expires" content="2012-01-30T19:00:00+08:00" />
  <!--<meta itemprop="height" content="400" />-->
  <!--<meta itemprop="width" content="400" />-->
  <object ...>
    <param ...>
    <embed type="application/x-shockwave-flash" ...>
  </object>
  <span itemprop="description">Video description</span>
</div>

    <h2 id="detail-h1">
        {{ post.title }}
    </h2>

    {% if post.video %}
        <div class="embed-responsive embed-responsive-16by9">
    <iframe  src="{{post.video_path}}?autoplay=1&autohide=1" class="embed-responsive-item"
    frameborder="0" controls="0" allowfullscreen>
    </iframe>
    </div>
    {% else %}

    {% if post.image %}
        <img src='{{ post.image.url }}' class="img-responsive" width="730px" height="500"/>
    {% elif post.image_url %}
        <img src="{{post.image_url}}"  class="img-responsive">
    {% else %}
        <p>upload an image</p>
    {% endif %}

    {% endif %}


    <div style="margin-top: 10px; background: white; padding: 10px 10px 10px 10px;">
        <span>
        <p style="float: left">
            {% if post.author %}
                Author: {{post.author}}
            {% endif %}
        </p>
        <p style="float: right" id="pub">
            {%if post.draft %}<span id="draft">Draft </span>{% endif %} Publicado: {{ post.publish|date }}
        </p>
        </span>

    <p class="tags" style="clear: both">Tags:

    {% for tag in post.tags.all %}
        <a href="{% url 'blog:post_list_by_tag' tag.slug %}">
            {{ tag.name }}
        </a>
            {% if not forloop.last %}, {% endif %}
    {% endfor %}

    </p>

culprit statement `Title`. add itemprop attribute to the text where you are writing your title — bugwheels94, May 08 '16 at 01:18
@user1533609 I still see the div though. Do I take all the meta tags out and the Title and the Video description. Even thought that's not what the directions say? — nothingness, May 08 '16 at 01:28

score 1 · Accepted Answer · edited May 23 '17 at 12:23

The quoted text (or the example) on Adding VideoObject to a video page is misleading (or wrong).

It’s intended and correct that

<h2>Video: <span itemprop="name">Title</span></h2>
<span itemprop="description">Video description</span>

displays "Video: Title" and "Video description".

If you don’t want to display it, use a meta element instead:

<meta itemprop="name" content="Title" />
<meta itemprop="description" content="Video description" />

But if possible, it’s of course preferable to use your existing markup instead of adding meta/link elements that duplicate the content.

If that’s not possible, there is really no reason to use Microdata, and you might want to use JSON-LD instead (which seems to be supported for Google’s Video Rich Snippet, too).

By the way, Google’s example has three errors: If the value is a URL, the link element must be used instead of the meta element. So it should be:

<link itemprop="thumbnailUrl" href="thumbnail.jpg" />
<link itemprop="contentURL" href="http://www.example.com/video123.flv" />
<link itemprop="embedURL" href="http://www.example.com/videoplayer.swf?video=123" />

What's the proper way to add Microdata (for Schema.org VideoObject) to a page in my Django app?

1 Answers1