Using 'meta' element instead of hiding an element with CSS?

Question

I made a Schema.org markup for blog post. I'm not sure if it is right way to combine <meta> with other tags, put <meta> inside of <div> and even put <meta> outside of <head>

<article itemprop="mainEntity" itemscope="" itemtype="https://schema.org/BlogPosting">
<meta itemprop="mainEntityOfPage" itemscope="" itemtype="http://schema.org/WebPage">
<header class="entry-header">
    <h1 class="entry-title" itemprop="headline">Article Title</h1>
    <time itemprop="datePublished" datetime="2017-10-23T11:40:36+00:00" content="2017-10-23T11:40:36+00:00" class="date">
        October 23rd, 2017
    </time>
    <time class="modified" itemprop="dateModified" datetime="2017-10-23T11:49:15+00:00" content="2017-10-23T11:49:15+00:00">
        October 23rd, 2017
    </time>
    <div itemprop="author" itemscope="" itemtype="https://schema.org/Person">
        <meta itemprop="image" content="http://example.com/images/nick.jpg">
        <meta itemprop="name" content="nick">
        <meta itemprop="url" content="http://example.com/authors/nick">
    </div>
    <div itemprop="publisher" itemscope="" itemtype="https://schema.org/Organization">
        <div itemprop="logo" itemscope="" itemtype="https://schema.org/ImageObject">
          <meta itemprop="image" src="http://example.com/logo.png">
          <meta itemprop="url" content="http://example.com">
          <meta itemprop="width" content="300">
          <meta itemprop="height" content="270">
        </div>
        <meta itemprop="name" content="Publicher Name">
    </div>

    <meta itemprop="image" content="http://example.com/uploads/2017/10/Article-title.jpg">
</header>

<div class="entry-content jpibfi_container" itemprop="text">

</div>

</article>

The reason of such combine is simple. I just don't need to show some data to users, but I need to show it to SE and I know that hide non-style elements with display:none is a bad way.

score 3 · Answer 1 · answered Oct 27 '17 at 07:15

Yes, the meta element is the right choice for data that is not visible. However, if the value is a URL, you must use a link element instead of a meta element.

Issues with your meta elements:

This is invalid, because the content attribute is required:
```
<meta itemprop="mainEntityOfPage" itemscope="" itemtype="http://schema.org/WebPage">
```
This answer describes alternatives for mainEntityOfPage.
This is invalid, because meta can’t have a src attribute:
```
<meta itemprop="image" src="http://example.com/logo.png">
```
But as described above, you have to use a link element (with href attribute) anyway.

Using 'meta' element instead of hiding an element with CSS?

1 Answers1