기본적으로 사용되는 HTML5 itemscope 속성이 무엇인지 알고 싶었습니다.
답변
[itemscope]
특성은 소자 내에 포함 된 메타 데이터의 범위를 정의 할 수있는 부울 특성이다.
HTML5 Microdata API에 정의되어 있습니다 .
모든 HTML 요소에는
itemscope
지정된 속성 이있을 수 있습니다 .itemscope
속성은 부울 속성입니다.
itemscope
속성이 지정된 요소 는 이름-값 쌍 그룹 인 새 항목을 만듭니다 .
즉, 메타 데이터를 특정 DOM 노드와 연결하는 방법입니다.
이것은 Schema.org API에서 검색 엔진 및 소셜 네트워크에 대한 데이터를 연결 하는 데 사용됩니다 . Google+는 사용자가 공유 한 페이지의 제목, 미리보기 이미지, 설명을 제공하는 방법으로 스키마 를 사용 합니다.
또한 주목해야한다 [itemscope]
와 [itemprop]
페이스 북과 호환되는 오픈 그래프 프로토콜 웹 페이지에 대한 메타 데이터를 제공 할 때. 검색 엔진, Facbook 및 Google+에 대해 <meta>
동일한 정보를 두 번 이상 나열 할 필요없이 단일 요소 집합에 동일한 메타 데이터를 나열 할 수 있습니다 .
<html itemscope itemtype="http://schema.org/WebPage" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<title>An Example Title</title>
<meta content="An Example Title" itemprop="name" property="og:title" />
<meta content="Lorem ipsum dolor sit amet" itemprop="description" name="description" property="og:description" />
<meta content="http://www.example.com/image.jpg" itemprop="image" property="og:image" />
<meta content="http://www.example.com/permalink" itemprop="url" property="og:url" />
<link rel="canonical" href="http://www.example.com/permalink" />
</head>
<body>
...content...
</body>
</html>
예제에서는 요소에 [itemscope]
가 추가되었습니다 <html>
. 이는 및의 모든 [itemprop]
속성 이 항목의 일부 임을 의미합니다 .<head>
<body>
WebPage
답변
Bing, Google 및 Yahoo!를 포함한 검색 엔진 이제 웹 페이지에서 의미 론적 데이터를 식별하기 위해 itemscope 와 친구들을 사용하고 있습니다. schema.org 웹 사이트 에는 사전 정의 된 스키마와 함께 itemscope 를 사용 하여 검색 엔진에 제공되는 데이터를 개선하는 방법에 대한 설명이 있습니다 .