Open Graph 프로토콜이 SEO에 미치는 영향

Open Graph 태그란 무엇입니까?

메타 태그 또는 Open Graph 프로토콜은 Facebook이 만들었으며, 어떤 웹 페이지든 소셜 네트워크에서 풍부한 형식으로 표시되도록 합니다. 이러한 HTML 태그는 소셜 네트워크에서 공유되는 페이지의 콘텐츠(제목, 설명, 페이지 이미지 등)를 표시하는 역할을 합니다. 이러한 태그가 존재하지 않거나 지정되지 않으면 정보가 무작위로 표시됩니다. 무작위 사진, 비설명적인 제목이나 설명을 가져옵니다…

무엇에 사용됩니까?

이러한 태그는 소셜 태그로 알려져 있으며 모든 소셜 네트워크에서 포지셔닝을 달성하는 데 매우 중요합니다. 어떤 소셜 네트워크인지에 따라 더 쉽거나 더 어려울 수 있지만, 소셜 네트워크에서의 포지셔닝은 존재하며 실재합니다.

Open Graph 프로토콜은 처음에 Facebook에서 사용되었고 현재 LinkedIn에서도 인식됩니다. 반면 Twitter의 태그는 그 소셜 네트워크 전용입니다.

태그는 다음과 같습니다:

og:title:

"Title"은 검색 엔진에 페이지가 무엇에 관한 것인지 알리는 역할을 합니다. 따라서 명확하고, 간결하며, 각 페이지에서 고유해야 합니다. 최대 길이는 67자입니다.

예시:

<meta property="og:title" content="Open Graph 태그란 무엇입니까?"/>

og:description

"Meta description"은 페이지에 대해 더 광범위하게 설명하고 알리는 것입니다. 155자를 초과해서는 안 되며, 사용자가 결과를 클릭하도록 장려하는 문구나 CTA를 포함할 수 있습니다. 또한 각 페이지에서 고유해야 합니다.

예시:

<meta property="og:description" content="사용자가 소셜 프로필에서 웹사이트를 공유할 때 어떻게 보이는지 알고 계십니까? Open Graph 태그가 모든 정보를 표시하는 역할을 합니다."/>

og:url:

웹 페이지의 URL이 표시되며, 단축된 형태로 표시될 수 있습니다. 가능한 한 깨끗하고 각 페이지에서 고유한 URL로 이 태그를 사용하려고 노력하세요.

예시:

<meta property="og:url" content="/blog/open-graph" />

og:image

각 페이지에서 표시될 수 있도록 이미지 URL을 지정해야 합니다. 이는 가장 간과되는 것 중 하나이자 가장 중요한 것 중 하나입니다. Google Discover, Google News, Facebook, Twitter, LinkedIn… 모두 이 이미지를 사용자를 위한 후크로 가져올 것이며, 양질이라면 많은 방문을 얻을 수 있습니다. 그렇지 않으면 필드를 비워 두면 작성자의 사진, 빈 필드가 표시될 수 있습니다… 어느 것이 더 나은지 선택하세요! ;)

예시:

<meta property="og:image" content="/blog/images/open-graph.jpg" />

og:video

페이지에 비디오가 있는 경우 이 태그를 사용해 지정해야 하며, 해석을 용이하게 합니다.

<meta property="og:video" content="http://example.com/bond/trailer.swf" />

og:type

이 태그는 콘텐츠가 무엇으로 구성되어 있는지 나타냅니다. 기사인지, 비디오인지, 블로그 포스트인지… 유형에 따라 다른 속성을 할당할 수 있습니다.

예시:

<meta property="og:type" content="article" />

og:site_name

이를 통해 웹사이트를 지정해 브랜드가 표시되도록 할 수 있습니다.

<meta property="og:site_name" content="SEOcrawl" />

존재하는 소셜 메타 태그의 유형

현재 Facebook이 만든 태그는 LinkedIn과 같은 다른 소셜 네트워크에서도 사용됩니다. Twitter는 Twitter Cards로 알려진 것을 사용합니다. 이러한 태그로 세 가지 옵션이 있습니다:

• ›

  이미지용 "Photo"

• ›

  비디오용 "Player"

• ›

  그 외 모든 것을 위한 "Summary"

이 경우 Open Graph 카드와 마찬가지로 최적화되지 않으면 기본적이고 최적화되지 않은 콘텐츠가 표시됩니다.

태그 테스트 도구

페이지가 사용자에 의해 소셜 네트워크에서 공유될 때 어떻게 보이는지 분석하는 것은 모든 것이 올바르게 작동하기를 원한다면 매우 중요합니다.

Twitter Card Validator

Twitter의 검증 도구는 Twitter Card Validator입니다. 무엇이든 게시하기 전에 모든 것이 올바르게 표시되는지 확인하고 싶다면 공유할 URL을 망설이지 말고 입력하세요. 페이지의 이미지를 업데이트했는데 피드가 여전히 이전 것을 보여 주는 경우에도 매우 유용합니다. 다시 분석하면 "캐시 정리" 역할을 합니다.

Facebook Debugger

Facebook의 디버깅 도구는 Facebook Debugger.로 알려져 있습니다. 이를 통해 어떤 정보가 사용되고 있는지, 사이트의 페이지가 공유될 때 어떻게 보이는지 볼 수 있습니다. 또한 어떤 필드가 잘못되거나 누락된 경우 경고가 표시됩니다.

Google Structured Data Testing Tool

Google도 Google Structured Data Testing Tool.이라고 하는 구조화된 데이터 테스트 도구를 제공합니다. Google이 페이지에서 어떤 종류의 마크업을 가져오고 있는지 확인하는 데 매우 유용합니다. 마크업은 검색 엔진이 인식하며, 각 경우에 특정한 Schema microdata를 도입해 웹사이트를 "시맨틱"하게 만드는 데 도움이 됩니다.

Rich Pins Validator

Pinterest도 빠질 수 없으며 Rich Pins Validator.로도 알려진 핀 검증기를 가져옵니다. Twitter 검증기와 동일한 방식으로 작동합니다: Rich Pin 기능을 얻기 위해 승인 프로세스가 필요하고 동시에 데이터 마크업을 확인합니다.

WordPress에서 이러한 태그를 어떻게 최적화합니까?

아시다시피 WordPress가 제공하는 큰 장점 중 하나는 그 유연성과 거대한 커뮤니티입니다. 그 결과 페이지와 글에 open-graph 태그를 도입하는 것과 같은 프로세스는 플러그인 덕분에 단 몇 초밖에 걸리지 않습니다.

이를 달성하는 많은 방법이 있습니다. 저희의 경우 SEO Rank Math 플러그인을 통해 하는 것이 가장 쉽다고 봅니다.

추천 글 >** **[Rank Math에 대한 심층 SEO 튜토리얼](/ko/blog/rank-math)

해당 페이지나 글의 SEO 섹션으로 이동해 "Social" 탭을 클릭하면 이미지를 구성할 옵션을 볼 수 있습니다. 많은 경우 추천 이미지를 업로드한 경우 직접 가져옵니다.

팁과 개선 사항

아래에서 매우 좋은 결과를 달성하는 데 효과가 있었던 경험에 기반한 몇 가지 팁을 볼 수 있습니다.

이미지 최적화

양질의 이미지를 선택하세요. 콘텐츠를 대표할 것이므로 각 이미지를 완벽하게 선택해야 합니다. 또한 사용자가 콘텐츠를 공유할 때 나타나는 이미지가 될 것입니다.

각 플랫폼은 특정 표준이 있습니다. 가장 좋은 것은 각 소셜 네트워크에 맞을 수 있는 큰 이미지를 선택하는 것입니다.

비주얼 콘텐츠는 소셜 네트워크에서 가장 매력적이며, 바이럴이 되면 웹사이트로 더 많은 방문을 얻을 것입니다. 아시다시피, 좋아요, 공유, 댓글을 받기 위해 완벽한 이미지를 선택하는 데 시간을 투자하세요.

• ›

  Twitter: 작은 것은 120x120px, 큰 것은 4096x4096px

• ›

  Facebook: 가장 작은 것은 200px, 가장 큰 것은 1200px

항상 Open Graph 사용

이미 잘 알려진 형식이므로 더 많은 플랫폼이 이를 사용할 수 있습니다. 소셜 태그를 삽입하기 위해 코드 템플릿을 사용하는 것이 권장됩니다. 다음 가이드에서 모든 정보를 참조할 수 있습니다.

추천 가이드 -> [SEO의 메타 태그](/ko/blog/meta-tags)

테스트 및 실험

검증기에서 항상 테스트하고 확인해 사이트의 결과가 소셜 네트워크에서 올바르게 표시되는지 확인하세요.

결론

이는 사용자의 눈에 브랜드를 멋지게 보이게 만드는 작은 디테일입니다. 이러한 태그는 페이지를 적절히 표시하고 방문을 끌어들이는 데 필수적이라는 점을 기억하세요. 또한 검색 엔진이 웹사이트를 이해하기 쉽게 만듭니다. 따라서 SEO 최적화에는 소셜 네트워크에 주의를 기울이는 것도 포함됩니다.

또한 소셜 신호, 즉 소셜 네트워크에서 오는 트래픽이 SEO 전략에 긍정적으로 영향을 미칠 수 있다는 점을 기억하세요. 따라서 소셜 미디어에서 오는 모든 클릭은 금만큼 가치가 있습니다!

질문이나 제안이 있으신가요? 기꺼이 도와드리겠습니다!

참고:

• ›https://ogp.me/ - Open Graph 프로토콜 공식 웹사이트