How to put Article inside WebPage element?

Question

So I have a WebPage and inside that WebPage I have an Article. Now I know it is not a problem, but when I use this tool: https://developers.google.com/webmasters/structured-data/testing-tool/

I get some note that the WebPage has no elements such as name and description, in that case what should I do? Should ignore it? Because even if I set meta tags for name and description it will be 100% the same as the Article one and then it might double content or doubled values, what should I do?

Example of my page:

<html>
<head>
<title></title>
</head>
<body itemscope itemtype="http://schema.org/WebPage">
    <nav class="navbar navbar-default" role="navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement"> HERE COME THE NAVIGATION CODE 
    </nav>

    <main itemscope itemtype="http://schema.org/Article">
    <h1 itemprop="name">Name</h1>
    <p itemprop="description">Description</p>
    </main>

    <div id="some-links">
             <ul>
              <li><a itemprop="relatedLink" href="" class="active"><span class="icon icon-eye"></span> Cat Overview</a></li>
              <li><a itemprop="relatedLink" href=""><span class="icon icon-dog"></span> Cat Breeds</a></li>
              <li><a itemprop="relatedLink" href=""><span class="icon icon-article"></span> Cat Articles</a></li>
              <li><a itemprop="relatedLink" href=""><span class="icon icon-paw"></span> Cat Adoption</a></li>
            </ul>
    </div>

</main>

</body>
</html>

score 0 · Answer 1 · answered Jan 20 '15 at 15:44

0

Your WebPage is not empty. It has 5 relatedLink properties. But even if it were empty, it would not be a problem.

The name for WebPage could be the value of your title element (e.g., typically including the page and the site name), while the name of the Article could be the value of the page heading (e.g., typically without site name).

You could link the SiteNavigationElement with the WebPage item (currently both are top-level items, not related to each other), for example with the hasPart property:

<body itemscope itemtype="http://schema.org/WebPage">
  <nav itemprop="hasPart" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement"></nav>
</body>

I guess the same property could be used to link the WebPage with the Article. Unfortunately, Schema.org lacks a property for denoting the main content/item of a WebPage (mainContentOfPage can’t be used).

answered Jan 20 '15 at 15:44

unor

92,415
26
211
360

My question is how search engine will read it? as Article and take the information about WordCount and so on or as a webpage? or maybe both? – MyLibary Jan 20 '15 at 21:10
@MyLibary: Discussing the behaviour of search engine services (or SEO) is off-topic on Stack Overflow (as such things can hardly be proved, are often opinion-based, change frequently etc.). A consumer (e.g. a search engine) parsing your document learns that there is information about a `WebPage` and an `Article`. If you use a property like `hasPart`, the consumer also learns that the `Article` is part of the `WebPage`. What consumers make of this information is entirely up to them. – unor Jan 20 '15 at 21:34
OK i'm sorry, thanks for your criticism. so i better make article section as also "itemprop="hasPart" ? thanks a lot for your dedicated help. – MyLibary Jan 21 '15 at 06:55

score 0 · Answer 2 · answered Oct 07 '17 at 14:35

Like this:

<html>
<body itemscope itemtype="http://schema.org/WebPage">
    <article itemprop="mainEntity" itemscope itemtype="http://schema.org/Article">
        <meta itemscope itemprop="mainEntityOfPage"  itemType="https://schema.org/WebPage" itemid="https://google.com/article"/>
        <h2 itemprop="headline">Article headline</h2>
        <h3 itemprop="author" itemscope itemtype="https://schema.org/Person">
            By <span itemprop="name">John Doe</span>
        </h3>
        <span itemprop="description">A most wonderful article</span>
        <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
            <img src="https://google.com/thumbnail1.jpg"/>
            <meta itemprop="url" content="https://google.com/thumbnail1.jpg">
            <meta itemprop="width" content="800">
            <meta itemprop="height" content="800">
        </div>
        <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
            <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
                <img src="https://google.com/logo.jpg"/>
                <meta itemprop="url" content="https://google.com/logo.jpg">
                <meta itemprop="width" content="600">
                <meta itemprop="height" content="60">
            </div>
            <meta itemprop="name" content="Google">
        </div>
        <meta itemprop="datePublished" content="2015-02-05T08:00:00+08:00"/>
        <meta itemprop="dateModified" content="2015-02-05T09:20:00+08:00"/>
    </article>
</body>
</html>

source one, two

How to put Article inside WebPage element?

2 Answers2