오픈 그래프 프로토콜로 링크 예쁜 디자인 만들기
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
웹 개발자, 디지털 마케터, SEO 전문가
난이도: 중간 (HTML 기본 지식 필요)
핵심 요약
- 오픈 그래프 메타태그(
og:title,og:description,og:image)를 사용해 소셜 미디어에서 링크 미리보기 디자인을 컨트롤할 수 있음 - 표준 이미지 크기 1200x630px과 60자 이내 제목, 110자 이내 설명이 권장됨
- Facebook Sharing Debugger를 통해 링크 미리보기 테스트 필수
섹션별 세부 요약
1. 오픈 그래프 프로토콜이란?
- Facebook에서 개발한 소셜 객체 정의 프로토콜
og:type(website,article,product)을 통해 콘텐츠 유형 명시 가능- 미리보기 디자인에 제목, 설명, 이미지, 언어 등 6가지 핵심 정보를 맞춤 설정
2. 필수 메타태그 구성
og:title: 60자 이내로 홍보적 제목 사용og:description: 110자 이내로 핵심 가치 강조og:image: JPG/PNG, 1200x630px 공개 URL 사용 권장og:url: 캔온리컬 URL 지정으로 중복 콘텐츠 방지
3. 추가 기능 및 최적화 팁
og:site_name: 브랜드 이름 반복 강화og:locale: 국제 SEO에pt_BR,en_US등 지역 언어 설정article:published_time: ISO 8601 형식의 발행일 명시- 반복 금지:
og:title내용 분리
결론
- Facebook Sharing Debugger로 링크 미리보기 테스트 필수
- 고해상도 이미지와 적절한 텍스트 길이 관리로 CTR 20% 이상 상승 가능성
- 소셜 미디어 공유 시 브랜드 식별도 강화 및 링크 클릭 유도 효과 확보