워드프레스 사이트 OpenGraph 설정하는 법

나의 웹사이트 또는 블로그가 구글과 같은 검색 엔진에서 잘 노출되기 위해서는 SEO 최적화가 잘 이루어져 있어야 합니다.

많은 요소를 통해 SEO 최적화를 할 수 있는데요. 그 중 OpenGraph Meta 설정을 하여 SEO 점수를 더욱 향상시키는 방법에 대해 알아보겠습니다.

OpenGraph란 무엇인가?

OpenGraph는 웹페이지에 추가되는 메타 태그로, 페이스북에서 개발한 메타 데이터 규격으로 설정 시 콘텐츠가 소셜 미디어에서 더 매력적으로 보일 수 있다는 장점을 가지고 있습니다.

특히 페이스북, 카카오톡, 트위터, 인스타그램 등과 같은 소셜 플랫폼에 나의 웹사이트 링크를 첨부할 때, 웹사이트 이름, 페이지의 제목, 썸네일 이미지 등을 표시하여 사람들이 클릭할 수 있게끔 유도합니다.

OpenGraph의 태그 구성

OpenGraph는 공유하고자 하는 페이지의 여러 메타 정보를 포함합니다. 주로 아래와 같은 태그로 구성이 됩니다.

<meta property="og:title" content="페이지 제목" />  
<meta property="og:description" content="페이지 설명" />  
<meta property="og:image" content="이미지 URL" />  
<meta property="og:url" content="페이지 URL" /> 

OpenGraph 설정이 중요한 이유

1.콘텐츠 클릭률 증가

소셜 미디어에서 링크를 공유할 때 나타나는 모습은 웹사이트의 첫인상을 결정합니다.

공유 링크에 콘텐츠 맞춤형 이미지가 나타나도록 설정하면, 링크를 본 사용자의 클릭률이 상승하게 됩니다.

정확한 제목과 설명이 미리 링크에 표시된다면, 역시 사용자의 클릭률을 높일 수 있게 됩니다.

2.브랜드 신뢰도 향상

일관되고 전문적이게 보이는 공유 링크 디자인은 브랜드의 신뢰도를 높이는 효과를 가집니다.

링크가 공유될 때, 회사 또는 웹사이트의 로고가 일관되게 뜨게 하면 큰 신뢰를 얻을 수 있습니다.

3.검색 엔진 최적화

오픈그래프는 주로 소셜미디어를 위한 설정이지만, 간접적으로 SEO에 도움을 주는 측면을 가집니다.

잘 디자인된 링크는 웹사이트의 사용자 이용을 늘리고 체류시간을 늘리는 효과를 가지게 검색 엔진으로부터 좋은 평가를 받게 됩니다.

워드프레스 사이트에서의 OpenGraph 설정 방법

워드프레스 사이트에서 OpenGraph를 설정하는 방법은 플러그인을 설치하여 사용하는 것이 가장 빠르고 편리합니다.

대표적인 SEO 플러그인을 사용할 수 있는데, Yoast SEO와 Rank Math SEO 2가지가 있습니다. 참고로, 저는 Rank Math SEO 플러그인을 사용하고 있습니다.

아래 글을 통해 Rank Math SEO를 써야 하는 이유와 장점에 대해 추가적으로 알아보시기 바랍니다.

Rank Math SEO 플러그인 이용하여 설정하기

1.Rank Math SEO 플러그인 설치

우선 Rank Math SEO 플러그인을 설치 및 활성화를 합니다. 설치를 한 후, 마법사 설정은 간단하게 진행할 수 있을 것입니다.

2.제목 및 메타 항목 이동

플러그인이 활성화되면, [제목 및 메타 > 글로벌 메타] 메뉴로 이동합니다. 그리고 스크롤을 아래로 내려서,

위와 같이 OpenGraph 섬네일이 보이실 것입니다. 이 이미지를 등록하여서 우리 웹페이지를 링크할 때 표시할 이미지를 설정할 수 있습니다.

3.미리캔버스 이동

OpenGraph 설정에 필요한 이미지를 제작해야 하는데요. 무료 편집 도구인 네이버 미리캔버스를 이용하도록 하겠습니다.

여기서 ‘바로 시작하기’ 버튼을 눌러 이미지 편집을 시작해줍니다.

4.OpenGraph 설정 이미지 제작

그리고 OpenGraph 섬네일 규격에 나와있는 것처럼 크기(1200 x 630px)를 직접 설정해줍니다.

이제 업로드를 통해 내 웹사이트의 로고를 넣어봅시다.

위와 같이 적당히 로고를 배치한다음, 내 블로그 제목과 설명을 보여주는 텍스트를 넣어줍니다.

이미지 편집을 완료하였다면, 우측 상단의 ‘다운로드’ 버튼을 눌러 저장을 합니다.

5.OpenGraph 메타 이미지 업로드

다시 Rank Math로 돌아와 이미지 업로드를 합니다.

오류 발생할 때 글 편집 화면에서 OpenGraph 설정하는 법

*번외로 가끔씩 글로벌 메타 메뉴에서 이미지를 업로드하여도 제대로 설정이 되지 않는 경우가 있습니다. 이 경우 글 편집 화면의 Rank Math 설정에서 이미지를 설정할 수 있습니다.

1.글 편집에서 SNS를 클릭합니다.

그러면 다음과 같이 페이스북에서 표시되는 이미지와 사이트 메타 정보들이 뜨게 됩니다. 여기서 이미지를 설정해줄 것입니다.

아래로 스크롤하여서 ‘이미지 추가’ 버튼을 클릭합니다.

다시 확인하면, 이미지가 설정된 것을 확인할 수 있습니다.

OpenGraph 설정 후 확인 방법

잘 설정이 되었다면, 링크가 잘 표시가 되는지 확인을 해봐야 하는데요.

페이스북 공유 디버거와 트위터 카드 검증기를 이용하여 미리보기 이미지를 확인할 수 있습니다.

1.페이스북 공유 디버거

다음의 페이스북 공유 디버거에 접속한 후, 내 웹사이트 URL을 입력합니다.

내 링크의 미리 보기를 확인하고 발생한 오류를 해결합니다.

2.트위터 카드 검증기

트위터 카드 검증기(Twitter Card Validator)를 통해 트위터 링크도 미리보기해볼 수 있습니다.

결론

이 메타 데이터의 설정은 SEO에 있어서 매우 중요한 역할을 합니다. 그러니 웹사이트를 운영함에 있어서 설정을 해놓는 것이 좋습니다.

특히, 이 OpenGraph Meta 설정은 추후에 트래픽 증대와 광고 수익 증가를 위한 백링크 작업 시에 큰 영향을 주는 부분이므로 한 번 잘 설정해놓으면 분명 좋은 효과를 얻으실 수 있을 겁니다.

<추가로 볼만한 글>