Structured data (microdata) and embedded items

前端 未结 2 1926
北荒
北荒 2021-01-27 01:14

I want to use Microdata with Schema.org to define the main content of my webpage, so I did something like this:



        
相关标签:
2条回答
  • 2021-01-27 01:45

    There is an ugly solutions for this: add a div with an itemscope (but without itemtype) as parent for the breadcrumbs property, and use itemref to add the breadcrumb property to the WebPage item.

    <body itemscope="itemscope" itemtype="http://schema.org/WebPage" itemref="breadcrumbs">
    
      <div itemprop="mainContentOfPage" itemscope="itemscope" itemtype="http://schema.org/WebPageElement">
    
        <div itemscope>
          <div itemprop="breadcrumb" itemscope="itemscope" itemtype="http://schema.org/BreadcrumbList" id="breadcrumbs">…</div>
        </div>
    
      </div>
    
    </body>
    

    I don’t recommend this (but it’s valid Microdata). You should really try to change the markup structure so that you don’t have to nest it like that.

    Having said that, you might want to use mainEntity/mainEntityOfPage instead of mainContentOfPage, because mainContentOfPage is only for WebPageElement items, which makes it not very useful.

    0 讨论(0)
  • 2021-01-27 01:51

    There are several solutions to this, besides the workaround unor posted. mainEntityOfPage and mainContentOfPage are optional and I'm not sure how much they will affect the appearance of the rich snippets. Using something like about with just the main phrase/page title may be as effective in ranking - I'm unsure on this however.

    Personally I would add json-ld for breadcrumbs, which is always hidden, and need not be near the actual visible. It's easier to read and maintain than microdata, can be positioned anywhere and nothing in schema.org states you must stick to only one format. I've successful used JSON-LD for some tasks (for example: dynamic data) and microdata for the rest, which google validates and understands. The json-ld can be added right at the start of <body> or at the end, etc. You can just embed the BreadcrumbList inside a WebPage element. Google gives its own json-ld breadcrumb example. Example from schema.org -

    <script type="application/ld+json">
    {
    "@context": "http://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement":
     [
     {
     "@type": "ListItem",
     "position": 1,
     "item":
      {
      "@id": "https://example.com/dresses",
      "name": "Dresses"
      }
    },
    {
      "@type": "ListItem",
      "position": 2,
      "item":
      {
       "@id": "https://example.com/dresses/real",
       "name": "Real Dresses"
      }
     }
    ]
    }
    </script> 
    

    A second alternative solution but not exactly fantastic either is to create duplicate breadcrumb data where you want it, using either <meta> or <link> to make the links invisible. Depending on your website's design and number of breadcrumbs you may be able to find a visible area containing the correct words and add the microdata there - for example within the menu structure of that page, or using the page heading. The example below has 2 hidden breadcrumbs, plus uses the page title from the <h1> tag.

    <span itemprop="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
      <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <meta itemprop="name" content="example.com"/>
      <meta itemprop="item" content="http://example.com"/>
      <meta itemprop="position" content="1"/>
      </span>
      <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><meta itemprop="name" content="topic1"/>
      <meta itemprop="item" content="http://example.com/topic1.html" />
      <meta itemprop="position" content="2"/></span>
      <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <meta itemprop="item" content="http://example.com/topic1/new.html" />
      <meta itemprop="position" content="3"/>
      <h1 itemprop="name">New Products</h1>
      </span>
      </span>
    

    Although hidden meta data isn't ideal you are duplicating only what is already visible on the page, and only links within your own site. Some machine-readable but invisible microdata is acceptable, eg dates, currencies, times. Link is used within this w3.org example

    If you choose to make them visible you could duplicate the breadcrumbs in small text in the footer (for example).

    0 讨论(0)
提交回复
热议问题