SEO를 위한 메타데이터 작성

오픈그래프(open graph)란?

• 오픈그래프(open graph)는 웹사이트가 다른 소셜미디어로 공유 될 때 가장 먼저 표시되는 정보이다.
• 메타데이터에 속하는 데이터로, <meta property="og:오픈그래프 속성" content="오픈그래프 속성값"> 으로 사용한다.
• 여기서 og는 오픈그래프를 뜻하며, 오픈그래프 속성으로는 type, site_name, title, description, image, url 등이 있다.
• 참고 URL - https://ogp.me/

예시

<meta property="og:type" content="website">
<!--공유한 링크의 종류를 작성한다, 대부분의 경우 website 가 되겠다.-->
<meta property="og:site_name" content="사이트 이름">
<!--페이지를 포함한 더 큰 개념인 사이트의 이름을 지정한다.-->
<meta property="og:title" content="페이지 이름">
<!--사이트에 속한 페이지의 이름을 지정한다.-->
<meta property="og:description" content="페이지 설명">
<!--페이지가 어떤 페이지인지 설명을 작성한다.-->
<meta property="og:image" content="미리보기에 사용될 이미지">
<!--공유될때 표시될 이미지를 지정한다.-->
<meta property="og:url" content="사이트 주소">
<!--공유될 사이트의 주소를 지정한다.-->

사이트와 페이지의 관계

• 간단하게 site_name과 title은 부모와 자식의 관계로 생각해 볼 수 있다.
• 만약 A라는 사이트에 속한 회원가입 페이지라면 site_name 은 A가 될 것이고, title 은 회원가입이 될 것이다.

트위터카드(twitter card)란?

• 오픈그래프와 비슷한 개념으로, 트위터라는 특정 소셜미디어로 사이트가 공유 될 때 사용되는 정보를 지정한다.
• 역시 메타데이터에 속하며, <meta property="twitter:트위터 카드 속성" content="트위터 카드 속성값"> 으로 사용한다.
• 속성으로는 card, site, title, description, image, url 등이 있다.
• 오픈그래프와 속성이 완벽히 동일하지는 않지만, 많이 유사하다.
• 참고 URL - https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards

예시

<meta property="twitter:card" content="summary">
<!--오픈그래프의 type 과 같으며, 웹사이트의 경우 summary 를 사용한다.-->
<meta property="twitter:site" content="사이트 이름">
<!--오픈그래프의 site_name 과 같다.-->
<meta property="twitter:title" content="페이지 이름">
<meta property="twitter:description" content="페이지 설명">
<meta property="twitter:image" content="미리보기에 사용될 이미지">
<meta property="twitter:url" content="사이트 주소">
<!--일부를 제외하고는 오픈그래프와 동일한 속성을 가진다.-->

SEO(Search Engine Optimazation)

• 다른 검색포털에서 정보를 가져가기 쉽게 정보를 최적화하는 것을 SEO 즉, 검색 엔진 최적화라고 한다.
• 오픈그래프나 트위터카드 역시 검색엔진이 가져갈 정보를 최적화 하는 행동이므로, SEO에 포함되는 행동이다.

+

• 메타데이터처럼 검색엔진이나, 외부의 브라우저들이 최우선적으로 가져가는 정보들은 head 태그 내부의 상단에 작성한다.
• 메타데이터들을 읽기 위해 더 깊이 내려와 CSS나 JS 등을 읽을 필요가 없기 때문.