성장에 목마른 코린이

메타 태그를 통한 검색엔진 최적화 (SEO) 본문

HTML

메타 태그를 통한 검색엔진 최적화 (SEO)

성장하는 코린이 2022. 11. 8. 11:32
728x90

메타태그(meta tag)

웹페이지가 담고 있는 컨텐츠가 아닌 웹페이지 자체의 정보를 명시하기 위한 목적으로 사용되는 HTML 태그를 의미합니다.

이러한 웹페이지의 메타 정보는 주로 HTML의 <meta> 요소를 통하여 마크업을 하며,

HTML 문서 내에서 <head> 요소 아래 배치되므로 일반 유저가 보게되는 웹페이지의 컨텐츠에는 아무 영향을 주지 않습니다.

반면에 검색엔진과 같은 기계들이 웹페이지를 읽어야할 때는 메타 태그의 내용들이

해당 서비스에서 어떻게 표시될지를 결정하는 매우 핵심적인 요소가 됩니다.

 

웹사이트는 제목만 예외적으로 <title> 요소를 사용하고,

그 밖에 다른 웹페이지의 메타 정보는 <meta> 요소를 사용하여 표현합니다.

 

<meta> 요소를 사용할 때는 name 속성을 통해 메타 정보의 이름을 명시하고

content 속성을 통해 메타 정보의 이름과 내용을 명시합니다.

SEO 측면에서 가장 중요한 <meta> 요소의 name 속성으로는 description을 들 수 있는데,

이 메타태그를 활용하면 <title> 요소로 담지 못했던 웹페이지에 대한 좀 더 상새한 설명을 담을 수 있습니다.

 

<meta
	name="description"
    content="기계가 웹페이지를 효괃적으로 이해할 수 있또록 사용하는 메타 태그에 대해 알아보겠습니다"
/>

웹페이지의 상세 설명은 일반적으로 영문 160자, 한글 80자 이내로 작성하는 것이 권장됩니다.

 

keywords와 author도 검색 엔진 최적화를 위해서 자주 사용되는 메타태그의 이름입니다.

keywords 이름을 토해서는 해당 웹페이지의 관련 키워드를 나열할 수 있으며,

author 이름을 통해서는 해당 웹페이지의 작성자를 표시해줄 수 있습니다.

<meta name="keywords" content="HTML, CSS, JavaScript" />
<meta name="author" content="Minhyuk Park" />

Open Graph 태그

요즘 SNS와 메신저를 통해 웹페이지의 링크를 공유하는 일이 잦아지면서 메타태그가 좀 더 넓은 분야에서 활용되고 있습니다.

대표적인 사례로 페이스북이나 카카오톡 같은 앱에서 웹페이지의 링크만 입력하더라도

해당 웹페이지의 컨텐츠의 미리보기를 카드 형태로 나타나는 것을 들 수 있습니다.

 

이런 서비스들은 Open Graph 프로토콜이라고 불리는 업계 표준을 따라서 웹페이지 컨텐츠 미리보기를 지원하고 있습니다.

따라서 Open Graph 프로토콜에서 정의하고 있는 메타태그를 적절히 사용해

컨텐츠 미리보기에 원하는 내용을 표시되도록 어느정도 제어를 할 수 있습니다.

 

Open Graph 태그의 이름은 og:로 시작하는데요.

컨텐츠 미리보기 측면에서 중요한 태그만 간단하게 둘러보겠습니다.

 

웹사이트의 이름을 나타내는 og:site_name

<meta name="og:site_name" content="민혁's 블로그" />

웹페이지의 제목을 나타내는 og:title

<meta name="og:title" content="메타 태그를 통한 검색엔진 최적화" />

웹페이지의 상세 설명을 나타내는 og:description

<meta 
	name="og:description"
    content="기계가 웹페이지를 효과적으로 이해할 수 있도록 사용하는 메타 태그에 대해서 알아보겠습니다."
/>

웹페이지의 유형을 나타내는 og:type

<meta name="og:type" content="website" />

웹페이지의 주소를 나타내는 og:url

<meta name="og_url" content"https://www.minhyuk.com/html-meta" />

웹페이지 thumbnail 이미지 주소를 나타내는 og:image (권장 크기: 1200 : 630)

<meta
	name="og:image"
    content="https://www.minhyuk.com/html-meta/thumbnail.png"
/>

이 정도가 많이 쓰입니다.

다른 Open Graph 태그들은 아래 공식사이트를 참고바랍니다.

 

Open Graph protocol

The Open Graph protocol enables any web page to become a rich object in a social graph.

ogp.me

 

메타 태그가 검색 결과에서 상위 랭크를 보장하지는 않습니다.

 

참조:

저작자표시
Comments