Add image URL without loading image that passes Google Structured Data tester

Question

I am trying to enable Google's Rich Snippets for articles, and it keeps demanding an image for the article. I don't actually want to display an image on the page so how do I mark it up so that it provides Google with the URL for the image? Using something like -

    <div class='container' id="content-text" typeof="Article">

        <span typeof="imageObject">
            <span property="image"><span property="contentUrl" content="/static/imgs/protraits/{{content.author|san_str}}.jpg"></span></span>
        </span>

        <h1><span property="name">{{ content.title }}</span></h1>
        <h2>{% if content.subtitle %}{{ content.subtitle }}{% endif %}
        <small>by <span property="author">{{ content.author }}</span></small></h2>

    <div property="articleBody">{{ content.text|safe }}</div>
    </div>

I was able to get the tester to recognize an image object but it is separate from the article object. If I try to make the image a property of the article it tells me that contentUrl is not a valid property of Article.

Answer 1

You could use a link element:

<div typeof="Article">
  <link property="image" href="image.jpg" />
</div>

Or with specifying the type explicitly:

<div typeof="Article">
  <link property="image" typeof="ImageObject" href="image.jpg" />
</div>

For Google’s Article Rich Snippet, you seem to have to provide the height and width properties for the image (they are listed as required), so it could look like:

<div typeof="Article">
  <div property="image" typeof="ImageObject">
    <link property="url" href="image.jpg" />
    <meta property="height" content="50" />
    <meta property="width" content="50" />
  </div>
</div>