웹사이트 소셜 공유를 위한 Open-Graph 필수값
Open-graph를 이용한 웹사이트 공유할 필수값
오픈그래프(Open Graph)는 페이스북이 개발한 메타데이터 프로토콜로, 2010년에 처음 도입되었습니다. 이는 웹페이지가 소셜 미디어에서 공유될 때 콘텐츠를 풍부하게 나타내기 위한 것이었습니다.
Open Graph는 "OG Tag" 또는 "Open Graph Protocol (OGP)" 라고 하며, 웹 페이지의 메타 데이터를 정의하는 프로토콜로, 웹 페이지가 소셜 미디어에서 공유될 때 적절한 정보를 제공하는 데 사용됩니다.
Open Graph 에 대하여 알아 봅니다.
1. 소셜 웹사이트 공유에 필요한 필수 값
2. Open Graph 활용
3. OpenGraph를 사용할때 유의 사항
1. 소셜 웹사이트 공유에 필요한 필수 값
소셜 웹사이트 공유 필수 값은 다음과 같습니다:
Open Graph의 중요한 속성으로
og:title, og:type, og:url, og:image, og:description 등은
웹페이지가 소셜 미디어에 공유될 때 필요한 기본 정보입니다.
1. og:title
- 페이지의 제목을 정의합니다.
공유되는 링크가 소셜 미디어에서 공유될 때 해당 페이지의 제목으로 표시됩니다. 페이지의 핵심 내용이나 주제를 간결하게 나타내는 제목을 선택하는 것이 좋습니다.
2. og:type
- 컨텐츠의 유형을 나타냅니다.
이 태그를 사용하여 소셜 미디어에서 페이지를 공유할 때 어떤 종류의 콘텐츠인지를 명시할 수 있습니다.
예를 들어, " og:type "의 기본적인 유형으로는 "website", "article", "video", "music", "book" 등이 있습니다. 이들 유형을 명시함으로써 소셜 미디어 플랫폼은 해당 콘텐츠를 어떻게 표시할지 결정하게 됩니다.
3. og:image
- 페이지를 대표하는 이미지의 URL을 제공합니다.
웹페이지를 공유하면 페이지의 정보와 함께 Thumb image를 함께 표시 합니다.
4. og:description
- 페이지에 대한 간단한 설명을 제공합니다.
"og:description" 태그를 사용하면 소셜 미디어에서 페이지가 공유될 때 해당 페이지에 대한 간략한 내용이 제공되어 사용자에게 미리보기를 제공할 수 있습니다.
5. og:url
- 웹 페이지의 URL을 정의합니다.
`og:url`은 선택적인 속성이지만 정규화된 URL을 제공하며, 여러 URL로 접근할 수 있는 경우, 검색 엔진 및 소셜 미디어에서 페이지를 올바르게 인식하도록 도와줍니다.
`og:url`이 없으면 현재 페이지의 URL이 사용되지만, 특정한 URL을 명시적으로 제공함으로써 미래에 URL이 변경되더라도, 공유 통계 및 분석을 추적하는 데도 도움이 됩니다.
6. og:site_name
- 소셜 미디어에서 웹페이지를 공유할 때 나타날 사이트의 이름을 정의합니다.
" og:site_name " 속성을 사용하면 소셜 미디어에서 해당 웹페이지를 공유할 때 사이트의 이름을 명시적으로 나타낼 수 있습니다.
아래는 Open Graph 메타 태그의 예시입니다:
이렇게 메타 태그를 추가하면 소셜 미디어에서 페이지가 공유될 때 적절한 정보와 이미지가 함께 표시되어 사람들의 접근성을 높여 줍니다.
<html>
<head>
<meta property="og:title" content="페이지 제목">
<meta property="og:type" content="콘텐츠 타입">
<meta property="og:image" content="이미지 URL">
<meta property="og:description" content="페이지에 대한 간단한 설명">
<meta property="og:url" content="페이지 URL">
<meta property="og:site_name" content="사이트 이름">:
</head>
<body>
... 중략 ...
</body>
</html>2. Open Graph 활용
다음과 같은 활용 예시를 들수 있습니다.
이벤트 웹페이지(website)를 공유하거나 컨텐츠(article)를 카카오톡,게시판, 페이스 북 등에 URL을 붙여 넣고 글을 작성하면 아래 와 같이 간단한 웹페이지 설명과 링크가 나온답니다.
https://pop.finnq.com/event/mortgage/index.html
대출 사전신청 프로모션
서비스 출시 알림신청하면 핀크머니 혜택
pop.finnq.com
https://couplewith.tistory.com/
AgileBus - IT 기술자를 위한 최신 기술 Trends
AgileBus 는 IT기술자들에게 필요한 기술 이론과 최신 기술 동향을 소개합니다. 인터넷, 금융 IT 전문가의 경험과 통찰력으로 경쟁에서 앞서 나가기 위한 기술을 공유합니다.(computer systems, programming,
couplewith.tistory.com
3. OpenGraph를 사용할때 유의 사항
1. 정확한 정보 제공:
오픈 그래프 태그를 사용할 때는 각 속성에 정확하고 명확한 정보를 제공해야 합니다. 특히 제목(og:title), 유형(og:type), URL(og:url), 이미지(og:image), 설명(og:description)은 정확하게 설정되어야 합니다.
2. 필수 속성 누락 확인:
필요한 속성들을 누락하지 않도록 주의 합니다. 특히 기본적인 속성인 og:title, og:type, og:url, og:image, og:description은 포함시켜야 합니다.
3. 이미지 사이즈:
og:image 속성에 설정한 이미지는 소셜 미디어에서 미리보기로 표시됩니다. 적절한 이미지 크기를 선택하고, 권장되는 최소 크기를 준수하는 것이 좋습니다.
4. SSL 사용:
소셜 미디어 플랫폼들은 대부분 HTTPS를 선호합니다. 따라서 웹페이지가 SSL을 사용하는지 확인하고, 가능하다면 https://로 시작하는 URL을 사용하는 것이 좋습니다.
5. 오픈 그래프 테스트 툴 확인:
오픈 그래프 태그를 적용한 웹페이지를 실제로 소셜 미디어에 공유하기 전에 미리보기 도구를 사용하여 어떻게 보이는지 테스트해보세요. 각 소셜 미디어 플랫폼마다 디버그 도구를 제공하고 있습니다.
- Facebook Sharing Debugger : https://developers.facebook.com/tools/debug/
- Twitter Card Validator: https://cards-dev.twitter.com/validator (로그인필요)
- LinkedIn Post Inspector: https://www.linkedin.com/post-inspector/
- Pinterest Rich Pins Validator: https://developers.pinterest.com/docs/rich-pins/rich-pins/
- 카카오톡 미리보기 캐시 초기화 : https://developers.kakao.com/tool/clear/og
6.업데이트 주기:
웹페이지의 정보가 변경되면 오픈 그래프 태그도 업데이트되어야 합니다. 특히 미리보기에 표시되는 이미지나 설명이 변경된 경우, 해당 정보를 업데이트하여 사용자에게 정확한 정보를 제공 하도록 합니다.
따듯하고 즐거운 하루 되십시요
감사합니다.
[기타 참고 사항]
[ Twitter-validators] https://threadcreator.com/tools/twitter-card-validator
[ Facebook validators]