다크 / 라이트 모드
오픈 그래프 기능
웹사이트의 링크에 메타 태그 달기
오늘날 웹사이트 검색이나 카카오톡, 페이스북, 트위터 등에 어떤 웹사이트의 링크를 걸게 되면 미리보기가 제공되는데, 여기에는 해당 페이지의 주소(url) 뿐만 아니라 타이틀, 설명, 특성이미지 등이 붙여 있습니다.
이러한 웹페이지의 정보들을 일명 메타정보(Meta data)라고도 하는데, 이는 html 코드의 head 섹션에태그 형식으로 위치합니다. 그래서 이 메타 정보를 일명 메타 태그(Meta tag)라고 부르기도 합니다.
이 메타 데이터 또는 메타 태그를 표기하는 방법으로 표준 프로토콜을 페이스북에서 처음 만들어졌습니다.
오픈 그래프 메타 태그의 역할
이 오픈 그래프 메타 태그를 웹사이트의 head 섹션에 표기해주면, 앞서 말한 것처럼 카카오톡, 페이스북 등에 해당 페이지 또는 사이트의 링크를 보낼 때 미리보기가 그 앱에 표시됩니다.
(아래 소셜 네트워크에 공유하기 중 원하시는 SNS 공유 버튼을 클릭해서 자신의 SNS 계정에 공유해 보세요. 쉽게 이해되실 겁니다.)
이 오픈 그래프 메타 태그는
- 사용자들은 이런 미리보기만을 봐도 그 웹페이지 또는 포스트의 전반적인 감을 잡을 수 있게 됩니다.
- 포털 사이트의 크롤러(쉽게 검색 로봇 같은 것)가 해당 html 문서를 볼 때 이러한 메타 태그들이 있으면 무엇이 제목인지, 어떤 내용인지, 특성 이미지(또는 대표 이미지)는 무엇인지를 자동적으로 판단할 수 있어 검색최적화에도 큰 도움이 됩니다.
매 페이지마다 다이내믹하게 설정하기
오픈 그래프 메타 태그는 워드프레스에서 이를 설정할 수 있는 플러그인을 구할 수 있습니다. 하지만 메디프레스는 꼭 필요한 플러그인만을 설치하자는 제작 원칙을 갖고 있고, 대부분은 코딩으로 처리하고 있습니다.
따라서 웹사이트의 무게를 무겁게 하지 않으면서 매 페이지의 오픈 그래프 메타 태그를 자동적으로 생성하게 합니다.
이 페이지나 포스트를 소셜네트워크에 공유해주세요!