[HTML] Open graph (오픈 그래피, og 태그)

728x90

Introduction

html 태그 중 opengraph에 대한 포스팅을 준비했습니다.

그 성질이 약간 다르기는 하지만 opengraph도 html 메타 태그 중의 하나입니다

opengrash는 SNS(소셜 네트워크)에서 그 개념이 시작되었습니다.

우리가 SNS을 통해 해당 링크를 복사하여 SNS에 개시를 하면 링크를 클릭해서 들어가기 전까지 이 링크가 어떤 데이터를 가지고 있는지 알 수가 없습니다.

예를 들면, 제가 페이스북에 블로그를 알리기 위해, url 링크를 개시하면 단순히 url만으로는 개발 관련 사이트인지, 성인 사이트인지 알 수 없습니다.

또 지금같이 악성코드가 범람하는 시대에 아무 의심 없이 링크를 클릭해서 들어가기도 망설여집니다.

그럴 때 사용하는 태그로써 미리보기 이미지나 그 링크에 대한 설명, 제목을 표사하기 위한 태그입니다.

http://program1472.com/bbs/board.php?bo_table=TB_11&wr_id=26

쿠팡 로캣배송 발주서 관리 및 정산관리 프로그램(바코드 출력용 엑셀 변환) > 자작 프로그램 | IT

웹 크롤링, 웹 파싱 등 각종 업무용 자동화 프로그램 제작

program1472.com

위 이미지는 제가 사이트에 개시한 이미지입니다.

보시면 url 링크를 개시했는데 저렇게 이미지와 사이트 제목이 표기가 됩니다.

아래는 http://ogp.me 사이트 내용을 발췌하였습니다.

Introduction

The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.

While many different technologies and schemas exist and could be combined together, there isn't a single technology which provides enough information to richly represent any web page within the social graph. The Open Graph protocol builds on these existing technologies and gives developers one thing to implement. Developer simplicity is a key goal of the Open Graph protocol which has informed many of the technical design decisions.

Basic Metadata

To turn your web pages into graph objects, you need to add basic metadata to your page. We've based the initial version of the protocol on RDFa which means that you'll place additional <meta> tags in the <head> of your web page. The four required properties for every page are:

og:title - The title of your object as it should appear within the graph, e.g., "The Rock".

og:type - The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.

og:image - An image URL which should represent your object within the graph.

og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "https://www.imdb.com/title/tt0117500/".

As an example, the following is the Open Graph protocol markup for The Rock on IMDB:

<head>

...

</head>

...

</html>

Optional Metadata

The following properties are optional for any object and are generally recommended:

og:audio - A URL to an audio file to accompany this object.

og:description - A one to two sentence description of your object.

og:determiner - The word that appears before this object's title in a sentence. An enum of (a, an, the, "", auto). If auto is chosen, the consumer of your data should chose between "a" or "an". Default is "" (blank).

og:locale - The locale these tags are marked up in. Of the format language_TERRITORY. Default is en_US.

og:locale:alternate - An array of other locales this page is available in.

og:site_name - If your object is part of a larger web site, the name which should be displayed for the overall site. e.g., "IMDb".

og:video - A URL to a video file that complements this object.

For example (line-break solely for display purposes):

content="Sean Connery found fame and fortune as the

suave, sophisticated British agent, James Bond." />

The RDF schema (in Turtle) can be found at ogp.me/ns.

Structured Properties

Some properties can have extra metadata attached to them. These are specified in the same way as other metadata with property and content, but the property will have extra :.

The og:image property has some optional structured properties:

og:image:url - Identical to og:image.

og:image:secure_url - An alternate url to use if the webpage requires HTTPS.

og:image:type - A MIME type for this image.

og:image:width - The number of pixels wide.

og:image:height - The number of pixels high.

og:image:alt - A description of what is in the image (not a caption). If the page specifies an og:image it should specify og:image:alt.

A full image example:

The og:video tag has the identical tags as og:image. Here is an example:

The og:audio tag only has the first 3 properties available (since size doesn't make sense for sound):

Arrays

If a tag can have multiple values, just put multiple versions of the same <meta> tag on your page. The first tag (from top to bottom) is given preference during conflicts.

Put structured properties after you declare their root tag. Whenever another root element is parsed, that structured property is considered to be done and another one is started.

For example:

means there are 3 images on this page, the first image is 300x300, the middle one has unspecified dimensions, and the last one is 1000px tall.

Object Types

In order for your object to be represented within the graph, you need to specify its type. This is done using the og:type property:

When the community agrees on the schema for a type, it is added to the list of global types. All other objects in the type system are CURIEs of the form

The global types are grouped into verticals. Each vertical has its own namespace. The og:type values for a namespace are always prefixed with the namespace and then a period. This is to reduce confusion with user-defined namespaced types which always have colons in them.

Music

Namespace URI: https://ogp.me/ns/music#

og:type values:

music.song

music:duration - integer >=1 - The song's length in seconds.

music:album - music.album array - The album this song is from.

music:album:disc - integer >=1 - Which disc of the album this song is on.

music:album:track - integer >=1 - Which track this song is.

music:musician - profile array - The musician that made this song.

music.album

music:song - music.song - The song on this album.

music:song:disc - integer >=1 - The same as music:album:disc but in reverse.

music:song:track - integer >=1 - The same as music:album:track but in reverse.

music:musician - profile - The musician that made this song.

music:release_date - datetime - The date the album was released.

music.playlist

music:song - Identical to the ones on music.album

music:song:disc

music:song:track

music:creator - profile - The creator of this playlist.

music.radio_station

music:creator - profile - The creator of this station.

Video

Namespace URI: https://ogp.me/ns/video#

og:type values:

video.movie

video:actor - profile array - Actors in the movie.

video:actor:role - string - The role they played.

video:director - profile array - Directors of the movie.

video:writer - profile array - Writers of the movie.

video:duration - integer >=1 - The movie's length in seconds.

video:release_date - datetime - The date the movie was released.

video:tag - string array - Tag words associated with this movie.

video.episode

video:actor - Identical to video.movie

video:actor:role

video:director

video:writer

video:duration

video:release_date

video:tag

video:series - video.tv_show - Which series this episode belongs to.

video.tv_show

A multi-episode TV show. The metadata is identical to video.movie.

video.other

A video that doesn't belong in any other category. The metadata is identical to video.movie.

No Vertical

These are globally defined objects that just don't fit into a vertical but yet are broadly used and agreed upon.

og:type values:

article - Namespace URI: https://ogp.me/ns/article#

article:published_time - datetime - When the article was first published.

article:modified_time - datetime - When the article was last changed.

article:expiration_time - datetime - When the article is out of date after.

article:author - profile array - Writers of the article.

article:section - string - A high-level section name. E.g. Technology

article:tag - string array - Tag words associated with this article.

book - Namespace URI: https://ogp.me/ns/book#

book:author - profile array - Who wrote this book.

book:isbn - string - The ISBN

book:release_date - datetime - The date the book was released.

book:tag - string array - Tag words associated with this book.

profile - Namespace URI: https://ogp.me/ns/profile#

profile:first_name - string - A name normally given to an individual by a parent or self-chosen.

profile:last_name - string - A name inherited from a family or marriage and by which the individual is commonly known.

profile:username - string - A short unique string to identify them.

profile:gender - enum(male, female) - Their gender.

website - Namespace URI: https://ogp.me/ns/website#

No additional properties other than the basic ones. Any non-marked up webpage should be treated as og:type website.

Types

The following types are used when defining attributes in Open Graph protocol.

Type	Description	Literals
Boolean	A Boolean represents a true or false value	true, false, 1, 0
DateTime	A DateTime represents a temporal value composed of a date (year, month, day) and an optional time component (hours, minutes)	ISO 8601
Enum	A type consisting of bounded set of constant string values (enumeration members).	A string value that is a member of the enumeration
Float	A 64-bit signed floating point number	All literals that conform to the following formats: 1.234 -1.234 1.2e3 -1.2e3 7E-10
Integer	A 32-bit signed integer. In many languages integers over 32-bits become floats, so we limit Open Graph protocol for easy multi-language use.	All literals that conform to the following formats: 1234 -123
String	A sequence of Unicode characters	All literals composed of Unicode characters with no escape characters
URL	A sequence of Unicode characters that identify an Internet resource.	All valid URLs that utilize the https:// or https:// protocols

opengraph의 기본 태그

1. og:title - 사이트의 제목 태그

2. og:type - 사이트의 종류 스타일 예) video.movie

3. og:image - 사이트를 나타낼 대표 이미지

4. og:url - 사이트의 대표 url

opengraph의 옵션 태그

1. og:audio - 사이트에 포함되는 오디오 파일 url

2. og:description - 사이트의 설명

3. og:determiner - 문장 시작에 나타나는 단어 선택(?)이라는 것 같은데, 한글과는 관계가 없을 듯 싶네요. 그냥 공란입니다.

4. og:locale - 사이트의 언어 선택입니다. 기본값은 en_US입니다만, 한글의 경우는 ko_KR입니다.

5. og:locale:alternate - 사이트의 다른 언어 종류라는데, 다국적 사이트일 때 적용하는 태그일 듯 싶습니다.

6. og:site_name - 전체 사이트는 title로 표시하면 site_name은 좀 더 세부적인 카테고리 정도의 레벨입니다.

7. og:video - 사이트에 포함되는 비디오 파일 url

opengraph의 구조 프로퍼티

og:오브젝트:url - 이미지 혹은 비디오, 오디오 오브젝트의 경로

og:오브젝트:secure_url - SSL(HTTPS)의 경로

og:오브젝트:type - 오브젝트 타입의 종류

og:오브젝트:width - 오브젝트 너비

og:오브젝트:height - 오브젝트 높이

og:오브젝트:alt - 오브젝트 설명

저작자표시 비영리 동일조건 (새창열림)

[IT HUB] 프로그램일사천리(program1472)

[HTML] Open graph (오픈 그래피, og 태그)

댓글

티스토리툴바