마이크로 데이터 및 div

Question

내 두 div (article-tag-summary 및 article-date-summary)는 article-image-summary div에 속합니다. 이것은 좋으며 변경할 수 없습니다.

모든 것은 schema.org/Article에 속하므로 <div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">입니다.

문제 :

1. 1 - 내가 <div class="article-image-summary" itemprop="image">을 닫을 경우,이 div의 이미지를 벗어나는와 이 내 CSS 스타일에 대한 좋지 않습니다.
2. 2 - 나는 다음 닫습니다하지 않는 경우 itemprop="articleSection 및 itemprop="datePublished은하지 그들은 또한 나쁜 ImageObject 및 하지 schema.org/Article 관련이 있기 때문에 schema.org 인식.

이 순수 HTML 문제는 ... 내가 필요한 것은 image-summary에서 date-summary 및 tag-summary 가을 (그래서 그들 앞에 사업부를 폐쇄하지 않음)하는 것입니다,이 두 div의는 schema.org/Article 및 NOT 관련 itemprops을 가지고 ImageObject.

아래 예제는 date와 tag 이전의 닫는 div 두 개를 보여줍니다. 이는 schema.org 유효성 검사가 작동 함을 의미합니다. 그러나이 경우 두 요소의 CSS 스타일은 image-summary div 밖에 있지 않기 때문에 작동하지 않습니다.

<div itemscope itemtype="http://schema.org/Article"> 
 
     <div itemprop="image" itemscope itemtype= 
 
     "http://schema.org/ImageObject"> 
 
      <div class="article-image-summary" itemprop="image"> 
 
       <meta content="auto"> 
 
       <meta content="100"><a href="#"><img alt= 
 
       "#" itemprop="url" src= 
 
       "#"></a> 
 
      </div> 
 
     </div> 
 
     <div class="article-tag-summary" itemprop="articleSection"> 
 
      <a href="#>tag</a> 
 
     </div><!--<div class="article-data">--> 
 
     <div class="article-date-summary" itemprop="datePublished"> 
 
      date 
 
      <div class="page-views"> 
 
       <i class="fa fa-eye"></i> count 
 
      </div> 
 
     </div><!--</div>--> 
 
     <h2 class="title-article-masonry" itemprop="headline"></h2> 
 
    </div>

Answer 1

당신은 마이크로 데이터의 itemref 속성으로이 문제를 해결 할 수 있습니다.

그게 작동하려면 및 article-date-summary (그리고 아마도 다음에 나오는 다른 속성)을 schema:Article 요소 외부로 이동해야합니다.

각 속성 id을 부여하고, itemref 속성 ("foo1은"내 예 "에서는 foo2") 이러한 id 값을 참조 :

<div itemscope itemtype="http://schema.org/Article" itemref="foo1 foo2"> 

    <div itemprop="image" itemscope itemtype="http://schema.org/ImageObject"> 
    </div> 

</div> 

<div id="foo1" class="article-tag-summary" itemprop="articleSection"> 
</div> 

<div id="foo2" class="article-date-summary" itemprop="datePublished"> 
</div> 

이 필요하면이 부분의 모든 div 그룹화 물론 추가 할 수 있습니다. Schema.org의 Article 형식을 사용하면 요소가 div보다 적합합니다.