How to Add an Image to an Event With Microdata Meta Tag

How to add an image to an event with Microdata meta tag?

Instead of using the meta element, you must use the link element (because the value is a URI):

<link itemprop="image" href="image.jpg" />

This is required by HTML5 (bold emphasis mine):

The meta element represents various kinds of metadata that cannot be expressed using the […] link […] elements.

And it’s also explicitly required by Microdata.

Using a different image for microdata that isn't displayed in the article?

You can use JSON-LD instead of microdata.

That way you add everything you want in JSON data that is not displayed in the page, but recognized by most search engines.

Here is an example taken from http://schema.org/CreativeWork:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "CreativeWork",
  "name": "My Article",
  "image": "http://your.image.url.com"
}
</script>

How to set a microdata image property, without letting the browser download the image?

_{(Note: a now deleted answer suggested the use of the meta element)}

Instead of the meta element, you should use the link element, because the content is a URI:

When a string value is a URL, it is expressed using the a element and its href attribute, the img element and its src attribute, or other elements that link to or embed external resources.

It’s even required:

If a property's value, as defined by the property's definition, is an absolute URL, the property must be specified using a URL property element.

So it should be:

<link itemprop="image" href="static/image.jpg" />

Image social meta tags - property=og:image name=twitter:image itemprop=image

The property attribute is from RDFa, the itemprop attribute is from Microdata, and the name attribute is from plain HTML.

Using itemprop and property together is possible, but Microdata doesn’t allow a name attribute on a meta element with the itemprop attribute (while RDFa allows it), so you could use two elements:

<meta property="og:image" name="twitter:image" content="http://example.com/image.jpg" />
<meta itemprop="image" content="http://example.com/image.jpg" />
<!-- note that this snippet is still invalid, see below -->

<meta name="twitter:image" content="http://example.com/image.jpg" />
<meta itemprop="image" property="og:image" content="http://example.com/image.jpg" />
<!-- note that this snippet is still invalid, see below -->

As Schema.org can also be used with RDFa, you could omit the Microdata (unless you need to support a consumer that doesn’t support RDFa):

<meta property="og:image image" name="twitter:image" content="http://example.com/image.jpg" />
<!-- note that this snippet is still invalid, see below -->

Why are these invalid? Because you have to use a link element instead of a meta element, if the value is a URI. However, in practice this is problematic, because:

• twitter:url is defined as meta extension, not as link type (but because the value is a URL, it should have been a link type)
• Facebook seems to recognize only meta, not link (I didn’t test it, it’s what I read several times when answering questions about it here -- se for example: Should og:image and og:url put in <meta> or <link>?)

So while Twitter Cards and Facebook’s OGP suggest to use (and probably support only) invalid markup, this is not necessarily the case for Schema.org consumers. So you might want to combine the invalid and the valid way:

<meta name="twitter:image" property="og:image" content="http://example.com/image.jpg" /> <!-- invalid, but expected -->
<link property="image" href="http://example.com/image.jpg" /> <!-- valid -->

(Note that all these snippets with Schema.org’s image property expect a parent element with a vocab. If you don’t provide it, it’s not clear to which vocabulary the image property belongs. If you can’t, you should use schema:image instead.)

Adding Microdata for background images on simple HTML site

As your table markup doesn’t seem to be very maintainable, and as the (obsolete) background attribute can’t be used for Microdata, the best way in your case would probably be to duplicate the content and mark it up with meta/link elements.

You can add this markup in the head or in the body, but you can’t use div in the head, so it’s easier to do it in the body.

So in the body, you could simply add this:

<div itemscope itemtype="http://schema.org/Product">
  <link itemprop="image" href="images/LOTR/BKG_Hobbit-Sting-UC2892.jpg" /> 
</div>

You have to use link instead of meta if the value is a URL. And this allows you to specify any kind of URL, absolute or relative (just like in the a element).

(Also note that neither meta nor link have a closing tag, so it’s <meta> or <meta />, but not <meta></meta>.)

That said, Microdata works best if you mark up your existing content, without duplicating it. If you would have to duplicate it, it might work better for your to use JSON-LD instead of Microdata.

Write Microdata just with link and meta

If the value is a URI, use link. Otherwise, use meta.

So <span itemprop="ratingValue">4.6</span> becomes <meta itemprop="ratingValue" content="4.6" /> etc.

If it’s just about having no visible content, you could keep using the parent div elements, e.g.:

<div itemscope> <!-- you can/should give it an itemtype -->

  <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    <meta itemprop="ratingValue" content="4.6" />
    <meta itemprop="ratingCount" content="8864" />
  </div>

  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <meta itemprop="price" content="1.00" />
    <meta itemprop="priceCurrency" content="USD" />
  </div>

</div>

If you also want to omit these div elements, you’d have to use the itemref attribute, because you can’t nest elements under link/meta. And because meta elements used for Microdata require the itemprop attribute, you have to use one parent element (e.g., div, body, html) to specify an itemscope:

<body itemscope> <!-- you can/should give it an itemtype -->

  <meta itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating" content="" itemref="my-rv my-rc">
  <meta itemprop="ratingValue" content="4.6" id="my-rv" />
  <meta itemprop="ratingCount" content="8864" id="my-rc" />

</body>

Having said that, if you generally don’t want to markup your existing/visible content, you might want to use JSON-LD instead of Microdata or RDFa.

How to retrieve content value from Microdata meta tag inside a class

Use get_attribute('content')

driver.find_element_by_css_selector('[itemprop="dateCreated"]').get_attribute('content')

EDIT:

use for loop for n number of elements.

for item in driver.find_elements_by_css_selector('[itemprop="dateCreated"]'):
  print(item.get_attribute('content'))

---

Related Topics