web-dev-qa-db-fra.com

Le logo de l'éditeur BlogPosting 'logo.itemtype a une valeur non valide' sur l'outil de test des données structurées de Google

La procédure suivante traverse le outil de test de données structurées Google comme prévu:

<div>
    <div itemprop="publisher" itemscope id="organization-example" itemtype="https://schema.org/Organization">
        <a itemprop="url" href="https://example.com">
            <img itemprop="image logo" src="https://example.com/images/logo.png" alt="LOGO">
            <span itemprop="name">EXAMPLE</span>
            <span itemprop="description">This is an EXAMPLE</span>
        </a>
    </div>
</div>

<div itemscope itemtype="https://schema.org/WebPage" itemref="organization-example">
</div>

Mais lorsque j'essaie d'utiliser un BlogPosting, il rompt la propriété logo:

<div>
    <div itemprop="publisher" itemscope id="organization-example" itemtype="https://schema.org/Organization">
        <a itemprop="url" href="https://example.com">
            <img itemprop="image logo" src="https://example.com/images/logo.png" alt="LOGO">
            <span itemprop="name">EXAMPLE</span>
            <span itemprop="description">This is an EXAMPLE</span>
        </a>
    </div>
</div>

<article
    itemscope
    itemtype="https://schema.org/BlogPosting"
    itemref="organization-example"
>
</article>

Avec l'erreur:

https://example.com/images/logo.png (l'attribut logo.itemtype a une valeur non valide.)

Quelqu'un peut-il expliquer pourquoi? Et quelles mesures pourrais-je prendre pour y remédier?

schema.orgmicrodatagoogle-rich-snippets-tool
13
Arth

Il s'avère que, comme BlogPosting est l'un des types pris en charge par Google en tant qu'extrait riche possible, ils appliquent davantage de validation:

Consignes de recherche Google sur la documentation pour les articles

Cela nécessite que logo de l'éditeur d'un article soit de type ImageObject et possède un width et height en pixels. BlogPosting est un sous-type de Article.

Cet extrait mis à jour est validé par le outil de test de données structurées de Google :

<div id='web-page-example' itemprop="mainEntityOfPage" itemscope itemtype="https://schema.org/WebPage" itemref="headline-example">
    <div>
        <div itemprop="publisher" itemscope id="organization-example" itemtype="https://schema.org/Organization">
            <a itemprop="url" href="https://example.com">
                <span itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
                   <img itemprop="url" src="https://example.com/images/logo.png" alt="LOGO">
                   <meta itemprop="width" content="600">
                   <meta itemprop="height" content="60">
                </span>   
                <span itemprop="name">EXAMPLE</span>
                <span itemprop="description">This is an EXAMPLE</span>
            </a>
        </div>
    </div>  
    <div
        id="blog-posting-example"
        itemprop="mainEntity"
        itemscope
        itemtype="https://schema.org/BlogPosting"
        itemref="organization-example web-page-example"
    >
        <span itemprop="author" itemscope itemtype="https://schema.org/Person">
            <span itemprop="name">Example Author</span>
        </span>
        <time itemprop="datePublished" datetime="2016-05-09T11:40:04+02:00">9th May 2016</time>
        <time itemprop="dateModified" datetime="2016-05-09T11:40:04+02:00">9th May 2016</time>
        <h1 id="headline-example" itemprop="name headline">Example Headline</h1>
        <span itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
            <img itemprop="url" src="https://example.com/images/blog.png" alt="LOGO">
            <meta itemprop="width" content="800">
            <meta itemprop="height" content="400">
        </span>
    </div>
</div>
15
Arth

Une réponse brillante et utile de @Arth ci-dessus.

Pour compléter la réponse ci-dessus (sans la concurrencer), voici le même Données structurées en utilisant le même vocabulaire schema.org , mais cette fois dans JSON-LD:

    "publisher": {
        "@type": "Organization",
        "name": "myOrganization",
        "logo": {
            "@type": "ImageObject",
            "name": "myOrganizationLogo",
            "width": "60",
            "height": "600",
            "url": "http://my-organization.org/my-logo.png"
        }
    }

N.B. Selon https://developers.google.com/search/docs/data-types/articles

  1. Le logo doit être un rectangle, pas un carré.

  2. Le logo doit tenir dans un rectangle 60x600px, et être soit exactement 60px élevé (préféré), soit exactement 600px large. (Par exemple, 450x45px ne serait pas acceptable, même s'il se place dans le rectangle 600x60px.)

10
Rounin