SEO 지식: 오픈 그래프 프로토콜

소개하다

오픈 그래프 프로토콜모든 웹 페이지를 소셜 그래프의 풍부한 객체로 만들어 보세요. 예를 들어 Facebook에서 이 기능을 사용하면 모든 웹 페이지가 Facebook의 다른 객체와 동일한 기능을 가질 수 있습니다.

다양한 기술과 패턴이 존재하고 이를 결합할 수 있지만, 단일 기술만으로는 소셜 그래프에서 어떤 웹페이지든 풍부하게 표현할 수 있는 충분한 정보를 제공하지 못합니다. 오픈 그래프 프로토콜은 이러한 기존 기술을 기반으로 개발자에게 한 가지 목표를 제공합니다. 개발자를 위한 단순성은 오픈 그래프 프로토콜의 핵심 목표이며, 다양한 기능을 제공합니다.기술 설계 결정정보를 제공했습니다.

기본 메타데이터

웹 페이지를 그래픽 개체로 변환하려면 기본을 추가해야 합니다.메타데이터우리는 ~에 기초하고 있습니다RDFa이는 추가적으로 배치해야 함을 의미합니다.상표.각 페이지에 필요한 4가지 속성은 다음과 같습니다.

og:제목- 객체의 제목은 다이어그램에 나타나야 합니다(예: "바위").
og:타입-물체유형예: "video.movie". 지정하는 유형에 따라 추가 속성이 필요할 수 있습니다.
og:이미지- 다이어그램의 객체를 나타내는 이미지 URL입니다.
og:url- 그래프에서 영구 ID로 사용될 객체의 정식 URL입니다(예: "https://www.imdb.com/title/tt0117500/").

예를 들어, 다음과 같습니다.IMDB의 The Rock오픈 그래프 프로토콜 마크업:

<html prefix="og: https://ogp.me/ns#">
<head>
<title>더 록 (1996)</title>
<meta property="og:title" content="더 록" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>

선택적 메타데이터

다음 속성은 모든 객체에 대해 선택 사항이며 일반적으로 권장됩니다.

og:오디오- 이 개체와 함께 제공되는 오디오 파일의 URL입니다.
og:설명- 귀하의 물건에 대한 1~2 문장 설명.
og:결정자- 문장에서 목적어의 제목 앞에 오는 단어 (a, an, the, "", auto)낱낱이 세다.만약에자동차선택: 데이터 소비자는 "a" 또는 "an" 중 하나를 선택해야 합니다. 기본값은 ""(공백)입니다.
og:로케일- 이 태그는 로케일을 표시합니다. 형식은 다음과 같습니다.언어_지역기본값은영어: en_US.
og:locale:alternate- 이 페이지는 다음 용도로 사용할 수 있습니다.기타 다양한 지역.
og:사이트_이름- 객체가 더 큰 웹사이트의 일부인 경우, 표시 이름은 전체 사이트를 나타내는 이름이어야 합니다. 예: "IMDb".
og:비디오- 이 객체를 보완하는 비디오 파일의 URL입니다.

예를 들어 (줄 바꿈은 표시 목적으로만 사용됩니다):

<meta property="og:audio" content="https://example.com/bond/theme.mp3" />
<meta property="og:description" 
  content="Sean Connery found fame and fortune as the
           suave, sophisticated British agent, James Bond." />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="IMDb" />
<meta property="og:video" content="https://example.com/bond/trailer.swf" />

RDF 스키마(in거북이에서) 할 수 있습니다ogp.me/ns에서 발견됨.

구조적 특성

일부 속성에는 추가 메타데이터가 첨부될 수 있습니다. 이 메타데이터는 다음을 사용하는 것과 같은 방식으로 지정됩니다.재산다른 메타데이터와 동일콘텐츠,하지만재산추가적으로 있을 것입니다:.

해야 한다og:이미지몇 가지 선택적인 속성이 있습니다구조화재산:

og:이미지:URL- 같은og:이미지.
og:이미지:보안_URL- 웹페이지에 HTTPS가 필요한 경우 대체 URL을 사용하세요.
og:이미지:유형- 이미지MIME 유형.
og:이미지:너비- 픽셀 단위의 너비입니다.
og:이미지:높이- 픽셀 수가 높습니다.
og:이미지:alt- 이미지 콘텐츠에 대한 설명(제목이 아님). 페이지에 og:image가 지정된 경우 다음을 지정해야 합니다.og:이미지:alt.

전체 이미지 예:

해야 한다og:비디오태그는 다음과 같은 태그를 갖습니다.og:이미지다음은 그 예입니다.

해야 한다og:오디오태그에는 처음 3개의 속성만 사용 가능합니다(크기는 사운드에 적용되지 않기 때문):

배열

레이블에 여러 값이 있을 수 있는 경우, 페이지에 동일한 레이블의 여러 버전을 추가하면 됩니다. 충돌이 발생할 경우 위에서 아래로 가장 먼저 사용된 레이블이 우선합니다.

구조적 속성은 선언된 루트 태그 뒤에 위치합니다. 다른 루트 요소가 구문 분석될 때마다 해당 구조적 속성은 완료된 것으로 간주되고 다른 루트 요소가 시작됩니다.

예를 들어:

페이지에 3개의 사진이 있음을 나타냅니다. 첫 번째 사진은300x300, 가운데 하나는 크기가 지정되지 않았고 마지막 하나는1000높이(px)

객체 유형

다이어그램에서 객체를 표현하려면 객체의 유형을 지정해야 합니다. 이는 다음을 사용하여 수행됩니다.og:타입완공된 부동산:

<meta property="og:type" content="website" />

커뮤니티에서 유형 스키마에 동의하면 해당 스키마는 전역 유형 목록에 추가됩니다. 유형 시스템의 다른 모든 객체는 다음 형식을 따릅니다.로마 교황청

전역 유형은 세로로 그룹화됩니다. 각 세로 유형은 고유한 네임스페이스를 갖습니다. 네임스페이스의 값은og:타입항상 네임스페이스 접두사와 마침표가 붙습니다. 이는 항상 콜론이 포함된 사용자 정의 네임스페이스 유형과의 혼동을 줄이기 위한 것입니다.

음악

네임스페이스 URI:https://ogp.me/ns/music#

og:타입가치:

음악.노래

음악:기간-정수>=1 - 노래의 길이(초)
음악:앨범- 음악 앨범 정렬 - 이 노래가 수록된 앨범입니다.
음악:앨범:디스크-정수>=1 - 노래가 앨범의 어느 디스크에 있는지.
음악:앨범:트랙-정수>=1 - 이 노래는 어떤 노래인가요?
음악:음악가-개인정보 배열- 노래를 프로듀싱한 음악가.

음악 앨범

음악:노래- 음악.노래 - 이 앨범의 노래.
음악:노래:디스크-정수>=1 - 이것과 동일음악:앨범:디스크하지만 그 반대입니다.
음악:노래:트랙-정수>=1 - 이것과 동일음악:앨범:트랙하지만 그 반대입니다.
음악:음악가-개인정보- 노래를 작곡한 음악가.
음악:출시일-날짜 및 시간- 앨범이 발매된 날짜.

음악.재생목록

음악:노래- 음악 앨범 포함와 동일
음악:노래:디스크
음악:노래:트랙
음악: 제작자-개인정보- 이 플레이리스트를 만든 사람.

음악.라디오_방송국

음악: 제작자-개인정보- 사이트의 제작자.

동영상

네임스페이스 URI:https://ogp.me/ns/video#

og:타입가치:

비디오.영화

비디오:배우-개인정보 배열- 영화에 출연한 배우들.
비디오:배우:역할-끈- 그들이 하는 역할.
비디오: 감독-개인정보 배열- 영화 감독.
비디오:작가-개인정보 배열- 영화 시나리오 작가.
비디오:기간-정수>=1 - 영화 길이(초)
비디오:출시일-날짜 및 시간- 영화가 개봉된 날짜.
비디오:태그-끈 배열- 영화와 관련된 태그.

비디오.에피소드

비디오:배우- 비디오.영화 포함같은
비디오:배우:역할
비디오: 감독
비디오:작가
비디오:기간
비디오:출시일
비디오:태그
비디오:시리즈- 비디오.tv_쇼 - 이 에피소드는 어떤 시리즈에 속하나요?

비디오.tv_쇼

여러 TV 에피소드. 메타데이터 및비디오.영화같은.

비디오.기타

다른 카테고리에 속하지 않는 비디오. 메타데이터 및비디오.영화같은.

수직 없음

이러한 객체는 수직 방향에 맞지 않지만 널리 사용되고 합의된 전역적으로 정의된 객체입니다.

og:타입가치:

기사- 네임스페이스 URI:https://ogp.me/ns/article#

기사:게시_시간-날짜 및 시간- 기사가 처음 게재된 시기.
기사:수정된 시간-날짜 및 시간- 기사가 마지막으로 수정된 날짜.
기사:만료_시간-날짜 및 시간- 해당 기사의 유효기간이 만료되는 경우.
기사:저자-개인정보 배열- 기사의 저자.
기사:섹션-끈- 상위 레벨 섹션 이름. 예: 기술
기사:태그-끈 배열- 이 기사와 관련된 단어를 태그하세요.

책- 네임스페이스 URI:https://ogp.me/ns/book#

책:저자-개인정보 배열- 누가 책을 썼는가.
책:ISBN-끈- ISBN
책:출간일-날짜 및 시간- 책이 출판된 날짜.
책:태그-끈 배열- 이 책과 관련된 단어를 태그하세요.

윤곽- 네임스페이스 URI:https://ogp.me/ns/profile#

프로필:이름-끈- 일반적으로 부모가 개인에게 지어준 이름이나 개인이 직접 선택한 이름입니다.
프로필:성-끈- 가족이나 결혼에서 물려받은 이름으로, 개인이 널리 알려진 이름입니다.
프로필:사용자 이름-끈- 식별하는 데 사용되는 짧고 고유한 문자열입니다.
프로필:성별-낱낱이 세다(남성, 여성) - 성별.

웹사이트- 네임스페이스 URI:https://ogp.me/ns/website#

기본 속성 외에는 귀속 표시가 없습니다. 귀속 표시가 없는 웹페이지는og:타입웹사이트.

유형

다음 유형은 Open Graph 프로토콜에서 속성을 정의할 때 사용됩니다.

유형	설명하다	단어
부울	부울 값은 참 또는 거짓 값을 나타냅니다.	참, 거짓, 1, 0
날짜	DateTime은 날짜(년, 월, 일)와 선택적 시간 구성 요소(시, 분)로 구성된 시간 값을 나타냅니다.	ISO 8601
낱낱이 세다	제한된 상수 문자열 값(열거형 멤버) 집합으로 구성된 유형입니다.	열거형 멤버로서의 문자열 값
뜨다	64비트 부호 있는 부동 소수점 숫자	다음 형식과 일치하는 모든 텍스트: 1.234 -1.234 1.2e3 -1.2e3 7E-10
정수	32비트 부호 있는 정수. 많은 언어에서 32비트보다 큰 정수는 부동 소수점 숫자로 변환되므로, 다국어 사용을 용이하게 하기 위해 Open Graph 프로토콜을 제한합니다.	다음 형식과 일치하는 모든 텍스트: 1234 -123
끈	유니코드 문자 시퀀스	이스케이프 문자가 없는 모든 유니코드 문자
웹사이트	인터넷 리소스를 식별하는 유니코드 문자 시퀀스입니다.	https:// 또는 https:// 프로토콜을 사용하는 모든 유효한 URL

토론 및 지원

자세한 내용은 Facebook 그룹에서 확인할 수 있습니다.또는 개발자 메일링 목록Open Graph Protocol은 에서 논의됩니다. 현재 Facebook에서 사용되고 있습니다(해당 문서를 참조하세요),Google(해당 문서를 참조하세요)그리고 믹시중고입니다. IMDb, Microsoft, NHL, Posterous, Rotten Tomatoes, TIME, Yelp 등 여러 곳에서 출판되었습니다.

구현

오픈 소스 커뮤니티에서 개발된 파서와 게시 도구는 다양합니다. 멋진 도구를 개발하셨다면 페이스북 그룹에 알려주세요!

Facebook 객체 디버거 - Facebook의 공식 파서 및 디버거
Google 리치 스니펫 테스트 도구- 특정 수직 시장 및 검색 엔진에서 오픈 그래프 프로토콜을 지원합니다.
PHP 검증기 및 토크나이저- OGP 2011 PHP5 객체의 입력 검증기 및 토크나이저
PHP 소비자 - PHP에서 Open Graph Protocol 데이터에 액세스하기 위한 소형 라이브러리
PHP의 OpenGraphNode - PHP를 위한 간단한 파서
파이오픈그래프 - 웹사이트에서 Open Graph 프로토콜 정보를 구문 분석하기 위해 Python으로 작성된 라이브러리
오픈그래프 루비 - 웹 페이지를 구문 분석하고 Open Graph 프로토콜 태그를 추출하는 Ruby Gem
Java용 OpenGraph - Open Graph 프로토콜을 표현하기 위한 작은 Java 클래스
RDF::RDFa::파서 - Open Graph 프로토콜을 이해하는 Perl RDFa 파서
워드프레스 플러그인- WordPress 기반 사이트에 Open Graph 메타데이터를 추가하는 Facebook의 공식 WordPress 플러그인입니다.
대체 WordPress OGP 플러그인- WordPress 기반 웹사이트에 Open Graph 메타데이터를 추가하는 간단하고 가벼운 WordPress 플러그인입니다.

2.3/5 - (3표)

댓글남기기 답글취소