og 개체는 왜사용하는가?
og 개체를 이용하는 이유는 sns 를 통해 웹페이지를 공유할 시 사용자들에게 정확한 웹페이지의 정보를 알려주기 위해서 이다. 물론 og 개체를 사용하지 않아도, sns 공유하기 시스템에서 자동으로 설정이 된다. 하지만, 웹페이지의 정보가 엉뚱하게 들어 갈 수 있기때문에, og 개체를 사용하여, 웹페이지의 정보를 확실히 해주는게 좋다.
아래의 예제는 og 개체를 이용 한 예제와 sns 에 og 개체가 적용된 이미지이다.
og 개체를 이용하여 값을 설정하는 예제
<meta property="og:url" content="http://b.redinfo.co.kr/23" /> <meta property="og:site_name" content="Dreamload" /> <meta property="og:title" content="PHP에서 한글 검사와 관련된 알고리즘 소개" /> <meta property="og:description" content="요즘 웹서버의 기본언어는 대부분 유니코드(UTF-8) 를 사용하는것같다. 아마도 소수 보단 대다수가 이용해야 하기 때문인것같다. 암튼 첫멘트는 계속 쓸려다 보면 길어지니까 본론으로 들어가서, 한글 검사에 대한 알고리즘에 대해 간단히 설명할까 한다. 뭐 내가 만든 알고리즘이라서, 오류 투성일지 모른다. 하지만, 이걸 만들 당시 날을 새가면서 수천번의 테스트를 거쳤기때문에, 내가 보는 오류는 없다. 이 알고리즘을 만.." /> <meta property="og:image" content="https://t1.daumcdn.net/cfile/tistory/254A373C54CF335E1A" />
위의 og 개체가 적용된 예제
위의 예제를 보면 알겠지만, og 개체를 등록하면, sns 내보내기(공유하기)시 정확한 정보를 알려줄 수 있다. 또한 이러한 og 개체를 사용하는 방법은 정말 쉽다. 위의 property 값에는 og 개체 타입을 넣어주고, content 값에는 og 개체 타입 설정값을 넣어주면된다. 아래는 og 개체의 기본형식이다.
<meta property="og 개체 타입" content="og 개체 타입 설정값">
아래의 표는 웹 싸이트에서 기본적으로 많이 쓰이는 og 개체와, 그에 대한 설명이다. 적용되는 방법을 확실 히 알고싶다면 위의 적용예제를 보면서, 아래는 og 개체타입으로 올 수 있는 값들이다.
og 개체 타입으로 올 수 있는 값 과 설명
og:title 웹 페이지의 제목을 설정 할 수 있다.
og:site_name 웹 싸이트의 이름을 설정 할 수 있다.
og:url 웹 페이지의 주소를 설정 할 수 있다.
og:image 웹 페이지의 이미지를 설정 할 수 있다.
og:description 웹 페이지에 대한 요약 내용을 설정 할 수 있다.
마지막으로 sns 로 내보내기(공유하기) 시 적용되는 이미지를 여러개 설정 하고싶다면 아래와같이 og:image 개체를 여러개 등록하여 사용하면된다. 될지 안될지는 아직 테스트 않해봐서 모르겟지만, 아마도 3개정도는 확실히 등록되는것같다..........(-_ㅡ)
og 개체로 적용되는 이미지가 여러개 일경우
<meta property="og:image" content="이미지URL1" /> <meta property="og:image" content="이미지URL2" /> <meta property="og:image" content="이미지URL3" />
'웹프로그래밍 > HTML/CSS/SCRIPT' 카테고리의 다른 글
noscript 요소를 사용하여 스크립트가 무효한 브라우저를 대처해보자 (770) | 2015.06.02 |
---|---|
하위 브라우저 에서 placeholder 사용하는 방법 (553) | 2015.06.02 |
HTML 에서 data- 속성을 이용하여 태그를 데이터로 사용해보자 (945) | 2015.06.02 |
meta 요소의 http-equiv 속성 : HTML 문서의 초기정보를 설정할때 (230) | 2015.06.02 |
meta 요소의 name 속성 : HTML 문서의 정보를 설정할 때 (944) | 2015.06.02 |