Open Graph Tags: 클릭을 10배로 늘릴 수 있는 숨겨진 SEO 무기
Source: Dev.to
Open Graph Tags: The Small Thing That Can Save Your Website 🚑
아름다운 웹사이트를 만들었어요.
빠르고 ⚡, 깔끔하고 ✨, 라이트하우스에서 95점 이상을 받았어요 🏆.
링크를 LinkedIn에 공유했는데… 갑자기 💥—이미지가 없고, 텍스트가 이상하게 잘려서 푸터가 설명으로 표시돼요.
고통. 순수한 고통. 😭
바로 이때 Open Graph (OG) 태그가 등장해 조용히 당신의 평판을 구해줍니다.
Why Open Graph Tags Matter
Open Graph 태그는 <head> 안에 추가되는 작은 메타 태그로, 누군가 소셜 미디어에 당신의 사이트를 공유했을 때 어떻게 보일지를 제어합니다.
OG 태그가 없으면 소셜 플랫폼은 기본적으로 이렇게 말합니다:
“음… 이 페이지가 뭘 말하고 있는지 추측해볼게.” 🎯
그리고 대부분 틀린 추측을 하죠.
누군가 당신의 링크를 보면 먼저 웹사이트가 아니라 미리보기 카드를 보게 됩니다. 그 카드가 지루하거나 깨졌거나 무작위라면… 클릭을 하지 않을 겁니다. 🚫
반대로 날카롭고, 명확하며, 가치 있어 보이면… 이제 이야기가 달라집니다. 👀🔥
What OG Tags Control
- Title – 사람들이 정확히 보는 제목 📝
- Description – 클릭을 유도하는 문구 💬
- Image – 시선을 사로잡는 비주얼 🖼️
- URL – 신뢰를 주는 링크 🔗
마치 Zoom 회의에 들어가기 전에 프로필 사진(DP)을 고르는 것과 같아요. 작은 디테일, 큰 영향. 😉
Impact on Click‑Through Rate
다음에 시간을 들일 수 있습니다:
- 훌륭한 콘텐츠 작성 ✍️
- SEO 개선 🔍
- 성능 최적화 ⚙️
하지만 공유된 링크가 보기 흉하면 사람들은 그냥 스크롤을 넘깁니다. 🫠
잘 구성된 Open Graph 설정만으로도 기사 내용의 단어 하나도 바꾸지 않고 클릭률을 높일 수 있습니다:
- 같은 링크.
- 더 나은 포장.
- 더 많은 클릭. 🚀
마케터는 이를 최적화라고 부르고, 개발자는 “몇 개의 메타 태그만 추가하면 된다”고 말합니다. 😄
Common Issues Without OG Tags
- 플랫폼이 로고를 미리보기 이미지로 선택한다.
- 사이드바의 무작위 텍스트가 설명으로 표시된다.
- 제목이 중간에 잘려서 보인다.
특히 서비스를 판매하거나 SaaS를 구축하거나 개인 브랜드를 키우고 있다면 이런 모습은 좋지 않아요. 웹사이트에 진심이라면 OG 태그는 선택 사항이 아니라 기본 위생입니다. 🧼
Implementing OG Tags
HTML 문서의 <head> 안에 다음 메타 태그들을 추가하세요. content 값은 페이지에 맞게 조정하면 됩니다.