웹사이트 검색

WordPress용 Open Graph 및 Twitter 카드를 설정하는 방법

좋은 콘텐츠는 관련 잠재고객을 귀하의 웹사이트로 끌어들일 것이며, 이들 중 일부는 소셜 미디어에서 귀하의 콘텐츠를 공유하기를 원할 가능성이 높습니다. 하지만 공유 콘텐츠가 소셜 스트림에 제대로 표시되지 않는 경우 문제가 발생하는 경우가 있는데, 이 경우 Open Graph 태그를 사용하는 것이 도움이 될 수 있습니다.

오픈 그래프를 사용하면 소셜 채널을 통해 공유할 때 콘텐츠 제목, 이미지, 설명 등의 모양을 제어할 수 있습니다. 아마도 제목 태그 및 설명 태그와 같은 일반적인 메타 태그에 이미 익숙할 것입니다. 그러나 많은 블로거는 Google+, Facebook, Twitter, Pinterest와 같은 소셜 네트워킹 사이트와 관련된 다른 메타 태그가 있다는 사실을 모릅니다. 이러한 소셜 네트워킹 사이트가 메타데이터를 사용하기 시작한 이유는 관련 이미지, 설명 및 링크와 함께 콘텐츠를 올바르게 표시하기 위해서입니다. 이러한 메타 태그를 정의하면 소셜 미디어에서 콘텐츠를 한 눈에 공유하고 이해하기가 더 쉬워집니다.

소셜 네트워크 사이트마다 선호도가 다릅니다. Pinterest와 Google+는 스키마 태그를 선호하지만 Facebook, Google+ 및 Pinterest에서 선호하는 Open Graph Protocol 태그도 지원합니다.

오픈 그래프 태그는 웹페이지의 <head></head> 섹션 사이에 위치합니다. 가장 일반적으로 사용되는 태그는 다음과 같습니다.

    

  • og:title
    • 

  • og:description
    • 

  • og:url
    • 

  • og:site_name
    • 

  • og:image
    • 

  • og:type
    •

이것은 아마 별로 의미가 없을 것입니다. 따라서 명확하게 라벨이 붙은 오픈 그래프 태그와 공유된 소셜 다이어그램은 다음과 같습니다.

Pinterest 리치 핀 예시

Google+1 공유 예

Facebook 오픈 그래프 예시

트위터 카드 예시

또한 Twitter는 Twitter 카드라는 자체 사용자 정의 태그를 정의했습니다. 이러한 태그를 사용하면 링크가 트윗될 때마다 더 많은 정보를 표시할 수 있습니다. 오픈 그래프 태그와 마찬가지로 Twitter 카드 태그도 웹페이지의 <head></head> 섹션 사이에 배치됩니다. 가장 일반적으로 사용되는 트위터 태그는 다음과 같습니다.

  • 트위터:카드
  • 트위터:사이트
  • 트위터:크리에이터

오픈 그래프 및 트위터 카드 태그를 수동으로 추가할 수 있지만 WordPress.org에는 초보 사용자도 WordPress 게시물 및 페이지에 태그를 매우 쉽게 추가할 수 있는 많은 플러그인이 있습니다. 우리가 가장 좋아하는 것 중 일부는 다음과 같습니다:

  1. Yoast의 SEO
  2. Facebook, Google+ 및 Twitter 카드용 Open Graph 태그
  3. SEO 프레임워크
  4. JM Twitter 카드(Twitter 카드 전용)
  5. 오픈 그래프 프로토콜 프레임워크(오픈 그래프 태그 전용, 개발자에게 권장)

이 튜토리얼에서는 Yoast SEO 플러그인에 내장된 옵션을 사용하여 특별한 메타 태그를 정의하여 게시물을 리치 미디어 친화적으로 만들 것입니다.

참고: 유사한 기능을 가진 플러그인을 하나만 사용해야 합니다. Yoast의 WordPress SEO가 이미 설치되어 있는 경우 Facebook, Google+ 및 Twitter 카드 태그용 Open Graph 플러그인을 설치하는 것보다 해당 플러그인을 구성하는 것이 더 좋습니다.

1단계: Yoast SEO 최신 버전 설치

최신 버전의 Yoast SEO를 설치하는 것이 좋습니다. 가장 쉬운 방법은 WordPress 관리 대시보드의 플러그인 > 새로 추가에서 “Yoast SEO”를 검색하는 것입니다.

그런 다음 플러그인을 설치하고 활성화하십시오(그 버튼을 클릭하기만 하면 됩니다).

활성화되면 WordPress 관리 대시보드에 새로운 "SEO" 탭이 표시됩니다. Yoast SEO에는 탐색경로, 리디렉션 등 수많은 훌륭한 기능이 있지만 오늘 우리가 관심을 갖는 것은 소셜 탭입니다.

2단계: 소셜 설정 구성

오픈 그래프 및 Twitter 카드를 구성하려면 WordPress 관리 대시보드에서 SEO > 소셜으로 이동하세요. 먼저 여기에 소셜 프로필 링크를 추가하면 검색 엔진이 사이트에 실제로 연결되어 있는지 확인할 수 있습니다. 그런 다음 다양한 소셜 탭으로 이동하세요.

페이스북

첫 번째 단계는 Facebook 게시물에 대한 오픈 그래프 메타데이터를 활성화하는 것입니다. 활성화됨 옵션을 클릭하기만 하면 됩니다. 계정 탭 아래에 사이트의 관련 Facebook 페이지를 이미 추가했다고 가정하면 됩니다. 추천 미디어가 없는 페이지에 대해 원하는 경우 기본 이미지를 추가할 수 있지만 이는 귀하에게 달려 있습니다.

트위터

Facebook이 끝났으니 이제 Twitter를 다룰 차례입니다. Twitter 카드 메타 데이터가 활성화되어 있는지 확인한 다음 기본 카드 레이아웃(요약 또는 큰 이미지가 포함된 요약)을 선택하세요. 이번에도 계정 페이지에 추가한 Twitter 핸들과 연결됩니다.

핀터레스트

Pinterest는 메타태그 확인을 사용한다는 점에서 약간 다릅니다. Pinterest 계정으로 이동하여 사용자 아이콘 위에 마우스를 올린 후 설정 탭을 클릭하세요. 웹사이트 소유권 주장 옵션을 클릭하고 HTML 태그 추가 옵션을 선택하세요.

생성된 메타태그를 복사하여 Yoast SEO 패널에 붙여넣으세요. 변경 사항을 저장한 다음 Pinterest로 돌아가서 제출하세요. 그러면 Pinterest가 태그를 확인하고 사이트를 확인하게 됩니다. 이것이 바로 Pinterest입니다!

Google+

설정해야 할 마지막 소셜 계정은 귀하의 비즈니스 Google+ 페이지에 대한 링크인 Google+입니다. 붙여넣으면 모든 준비가 완료됩니다.

기본값 설정

마지막 단계는 기본값을 만드는 것입니다. Yoast는 콘텐츠의 메타 상자를 사용하여 오픈 그래프 데이터를 정의하므로 SEO > 검색 표시 > 콘텐츠 유형에서 기본값을 편집해야 합니다. Yoast SEO에 내장된 스니펫 변수를 사용하여 게시물 제목(og:title에 사용됨)과 메타 설명(og:description에 사용됨)에 대한 동적 기본값을 직접 구축하세요.

사용자 정의 이미지, 제목 및 설명

Yoast SEO에는 Facebook 및 Twitter에 사용되는 이미지, 제목 및 설명을 사용자 정의할 수 있는 개별 게시물 옵션도 포함되어 있습니다. 게시물을 편집할 때 Yoast SEO 섹션까지 아래로 스크롤하고 공유 아이콘(< 기호보다 작은 모양)을 클릭하세요. 그런 다음 맞춤 이미지를 업로드하거나 필요에 따라 제목과 설명을 편집하세요.

디버깅 및 유효성 검사

각 주요 소셜 네트워킹 사이트에는 소셜 미디어에서 공유할 때 링크가 어떻게 표시되는지 테스트하고 미리 볼 수 있는 자체 유효성 검사기 또는 디버거가 있습니다.

Google 구조화된 데이터 테스트 도구: 이 도구는 Google+에서 공유된 게시물의 미리보기를 표시하지 않지만 Google에서 존재하고 읽을 수 있는 메타데이터는 보여줍니다. 귀하의 속성은 RDFA 노드 속성 아래에 표시됩니다.

Facebook 디버그: 오픈 그래프 태그를 구현한 후 태그가 포함된 사이트의 URL을 붙여넣기만 하면 됩니다. 개체 속성이 표시됩니다.

Twitter 확인 도구: 이 링크를 사용하면 게시물이 소셜 미디어에 공유되기 전에 Twitter 카드에서 해당 게시물을 미리 볼 수 있습니다.

Pinterest 고급 핀 검사기: 마지막 두 검사기와 유사하게 Open Graph 태그가 포함된 URL을 입력하여 미리 보고 콘텐츠가 제대로 표시되는지 확인하세요. 전체 튜토리얼을 따라하셨다면 전혀 문제가 없을 것입니다.

최종 메모

이러한 오픈 그래프 메타 태그를 사용하면 콘텐츠의 제목, 이미지, 설명 및 기타 세부 정보가 소셜 미디어에 표시되는 방식을 최적화할 수 있습니다. 명확한 정보가 포함된 링크는 더 많은 공유와 자연스러운 링크를 얻는 경향이 있으므로 이는 소셜 사이트의 트래픽을 늘리는 데 도움이 될 수 있습니다. 또한 사람들은 노출된 URL이나 짧은 URL을 클릭하는 것보다 더 많은 정보가 포함된 링크를 신뢰하는 경향이 있습니다(소셜 공유를 자동화하는 기술을 사용하는 경우에도 도움이 될 수 있습니다).

우리 가이드가 사이트의 오픈 그래프 메타 태그와 트위터 카드를 설정하는 데 도움이 되었기를 바랍니다. 궁금한 점이 있으면 언제든지 문의하세요. 가능하다면 기꺼이 도와드리겠습니다!

이러한 메타 태그를 구현하기 위해 어떤 WordPress 플러그인을 사용합니까? 추가할 다른 팁이나 요령이 있나요? 아래 댓글에 여러분의 생각을 자유롭게 적어주세요.