메타태그와 오픈 그래프를 이용해 검색 엔진 최적화 (SEO)하기

안녕하세요 효니톰입니다!

오늘은 메타태그와 오픈 그래프에 대해 알아볼 예정입니다.

 

저희 회사 시스템은 아직 구축 단계이기 때문에 검색 엔진 최적화가 되지 않았어요.
그래서 방법을 직접 찾아보며 알게된 내용들에 대해 정리해보겠습니다.

 

저희 회사는 제 (기획)가 퍼블리셔에게 적용시킬 내용을 전달하면, 퍼블리셔가 작업을 하는 형태입니다.

 

 

[메타태그]

모든 인터넷 상의 문서는 HTML로 이루어져 있는데요, 그 외 부가적인 CSS, JavaScript, charset 등의 코드를 추가합니다.

아무튼 이토록 HTML 문서 안에서는 메타 데이터가 무시할 수 없는 많은 영향이 있는데요,

 

메타 데이터는 포털사이트 API 봇이 크롤링을 할 때 지정해놓은 부가적인 설명 부분이 담긴

사이트의 제목, 키워드, 내용, 저자 등 내용을 긁어갈 수 있도록 이정표 역할을 합니다.

 

 

오픈그래프의 상위 개념으로 HTML 문서의 내용, 키워드, 저자 등 문서 자체의 특성을 담고 있습니다.

또한 크로울러-봇이 콘텐츠를 다양한 플랫폼에 색인할 수 있도록 하기 위한 도구입니다.

 

또한 SEO에 영향을 주기 때문에 콘텐츠 노출과 클릭률에 영향을 끼칩니다.

(콘텐츠의 색인 생성, 각각 콘텐츠를 분석하는 알고리즘을 통해 사용자에게 콘텐츠 추천)

 

* 색인은 빠른 검색을 위해 특정 장소에 데이터를 저장하는 것으로 참조용 데이터 목록이라고 할 수 있습니다.

* SEO는 검색 엔진 최적화입니다.

 

사용자에게는 페이지가 링크 공유될 때 웹페이지에 대한 요약으로 제공되는 것이죠.

 

 

[오픈 그래프]

메타태그의 종류로 기본 메타태그, 오픈 그래프가 있어 보통 웹문서의 경우 두가지를 많이 사용합니다.

요즘은 오픈그래프도 매우 일반화되어 기본 메타태그 뿐만 아니라 오픈그래프도 같이 수집합니다.

 

• 기본 메타태그: 주로 텍스트 정보를 정의

• 오픈 그래프: 다양한 미디어와 SNS 연동을 위한 정보 정의 가능 (이미지, 소셜 아이디 등)

 

 

오픈 그래프는 메타 정보에 해당하는 다양한 요소들에 대해 통일해 쓸 수 있도록 정의한 프로토콜입니다.

따라서 콘텐츠 요약 내용이 SNS에 게시되는데 최적화된 데이터로 표시될 수 있도록 미리보기의 실체를 구성합니다.

 

다양한 메타 데이터 표기방법을 참조해 페이스북이 창시했으며, 페이스북 뿐만 아니라 여러 SNS에서 많이 사용합니다.

 

 

[기본적 웹 설정 og 메타태그]

<meta property="og:type" content="website">

<meta property="og:url" content="https://example.com/page.html">

<meta property="og:title" content="Content Title">

<meta property="og:image" content="https://example.com/image.jpg">

<meta property="og:description" content="Description Here">

<meta property="og:site_name" content="Site Name">

<meta property="og:locale" content="en_US">

<!-- 다음의 태그는 필수는 아니지만, 포함하는 것을 추천함 -->

<meta property="og:image:width" content="1200">

<meta property="og:image:height" content="630">

 

 

[네이버 블로그, 카카오톡 미리보기 설정]

<meta property="og:title" content="콘텐츠 제목" />

<meta property="og:url" content="웹페이지 URL" />

<meta property="og:type" content="웹페이지 타입(blog, website 등)" />

<meta property="og:image" content="표시되는 이미지" />

<meta property="og:title" content="웹사이트 이름" />

<meta property="og:description" content="웹페이지 설명" />

 

 

적용 예시)

<meta property="og:url“ content=“사이트의 url”/>

<meta property="og:type“ content=“앱/웹 등의 타입 (website)”/>

<meta property="og:title" content=“제목”/>

<meta property="og:description" content=“내용”/>

<meta property="og:image" content=“이미지 주소 (http://로 시작)”/>

 

예) 카톡에 링크가 공유되었을때 이렇게 표시됩니다.

 

이미지의 크기는 최소 600*315픽셀, 1200*630 픽셀을 권장합니다.

 

 

 

 

마지막으로 참고하면 좋은 링크를 걸어드리겠습니다.

 

1. 오픈 그래프 세팅 후 미리보기를 확인할 수 있는 툴입니다.

developers.facebook.com/tools/debug/

 

주소창에 확인하려는 페이지의 주소를 입력하고 디버그 버튼 클릭하면 미리보기 및 고쳐야할 부분들까지

상세하게 안내해주기 때문에 편리합니다.

 

2. 태그 콘텐츠의 속성을 변경하는 방법에 대해 자세히 나와있어 참고하면 좋을 것 같습니다.

http://bit.ly/30loLfv