This question is related to this question: Uniform way to add multiple descriptive properties in Schema.org
Recently I found this code on HTML5 & Schema.org - Structured Microdata for SEO, along with the statement that the Schema.org WPHeader type is a WebPageElement that can include markup from CreativeWork as well as Thing:
<header role="banner" itemscope itemtype="http://schema.org/WPHeader">
<meta itemprop="name" content="A name">
<meta itemprop="description" content="A description text">
<h1 itemprop="headline">A headline text</h1>
<img itemprop="image" src="image.jpg">
</header>
If the above statement and usage of WPHeader is correct, I wonder if the code below whould make sense in terms of structured data for the sematic web. The reason behind my question is that I am looking for a solution in which I can use a banner/hero image for webpages presenting an Event (or other) type with typical CreativeWork properties such as headine, creator etc.
<article>
<!-- Banner/hero image section for Event-->
<header class="my_hero_class" role="banner" itemscope itemtype="http://schema.org/WPHeader">
<meta itemprop="name" content="My Event">
<meta itemprop="description" content="Description of My Event">
<meta itemprop="keywords" content="keyword1, keyword2, keyword3">
<h1 itemprop="headline">A headline text</h1>
<p itemprop="alternateHeadline">Another headline text<p>
<p itemprop="creator">Artist name<p>
<img itemprop="image" src="hero_image.jpg">
</header>
<!-- Event section -->
<section class="my_event_class" itemscope itemtype="http://schema.org/Event">
<h2 itemprop="name">Name of My Event</h2>
<p itemprop="description">Description of My Event</p>
<p itemprop="text">Text about My Event</p>
<p itemprop="startDate" content="2016-04-21T20:00">Thu, 04/21/16 8:00 p.m.</p>
<meta itemprop="startDate" content="2016-04-21T20:00">
<img itemprop="image" src="poster.jpg">
</section>
<!-- Event Artist section -->
<section class="my_person_class" itemscope itemtype="http://schema.org/Person">
<h2 itemprop="name">Name of Artist</h2>
<p itemprop="description">Description of of Artist</p>
<p itemprop="text">Text about of Artist</p>
<img itemprop="image" src="artist.jpg">
</section>
</article>
WPHeader
The WPHeader type is for the header of a page (i.e., WebPage).
If you add properties to WPHeader, these properties describe the header (!), not the page.
So, for example, the name might be "Header", the image might be a screenshot of the header etc. This is of course typically not useful to have on a page, and typically not useful to provide as structured data, so my recommendation is not to use them.
WebPage
It seems to me that the WebPage type is what you want. Its name is the name of the page, its description is the description of the page etc.
If the page is about a single entity (e.g., an Event), then you could use the more specific ItemPage type. With the mainEntity property, you can specify the primary entity of that page.
The ItemPage might share some property values with the Event (e.g., the description might be the same), but there might also be slight differences (e.g., the name of the WebPage might contain the site name in addition).
<body itemscope itemtype="http://schema.org/ItemPage">
<!-- properties about the event page -->
<article itemprop="mainEntity" itemscope itemtype="http://schema.org/Event">
<!-- properties about the event -->
</article>
<!-- properties about the event page -->
</body>
来源：https://stackoverflow.com/questions/48582168/schema-org-usage-of-wpheader-or-how-to-add-structured-data-to-hero-images