HTML - SEO를 위한 Meta 태그 알아보기

meta 태그

사이트의 SEO최적화를 위한 방법중 가장 먼저 확인하는 부분중 하나는 HTML meta태그를 이용하는 방법이라고 생각 된다.

이 meta 태그를 사용하는게 어떤 목적을 가지고 있고 어떤 역할들을 하는지 정리해보려고 한다.

 

<meta>태그

<meta> 태그는 HTML 문서의 메타데이터를 표현하는 데 사용된다. 메타데이터는 페이지에 대한 정보를 나타내지만, 실제 페이지 콘텐츠로 표시되지는 않지만, 브라우저 동작, 검색 엔진 최적화 (SEO), 또는 다른 목적을 위해 사용된다.

 

사용 목적

1. 검색 엔진 최적화 (SEO): 메타데이터는 검색 엔진이 웹 페이지의 내용을 이해하고 적절하게 색인화하는 데 도움을 준다. 예를 들어, description 메타 태그는 검색 결과에 페이지 설명으로 표시되며, 이는 사용자가 웹 페이지의 내용에 대한 빠른 개요를 얻는 데 도움을 줄 수 있다.
2. 반응형 디자인: viewport 메타 태그는 웹 페이지가 모바일 장치와 태블릿에서 어떻게 보여질지 지정하므로 반응형 웹 디자인에 필수적으로 사용된다.
3. 문자 인코딩: 문자 인코딩 메타 태그 (예: <meta charset="UTF-8">)는 웹 페이지에서 사용되는 문자 인코딩을 지정하여, 텍스트가 올바르게 표시되도록 한다.
4. 소셜 미디어 공유: Open Graph나 Twitter Cards와 같은 프로토콜을 사용한 메타 태그는 웹 페이지가 소셜 미디어 플랫폼에서 어떻게 보여질지 제어한다.
5. 브라우저 동작 제어: 일부 메타 태그는 웹 페이지가 브라우저에서 어떻게 동작할지 지정하는 데 사용된다. 예를 들면, Internet Explorer에서의 렌더링 모드를 지정하거나, 페이지 새로 고침 빈도를 지정하는 등의 동작을 제어할 수 있다.
6. 보안: 특정 메타 태그는 보안과 관련된 웹 사이트 동작을 지정하는 데 사용됩니다. Content Security Policy (CSP)를 설정하여 XSS 공격을 방지할 수 있습니다.

 

주요 meta 태그

 

charset

<meta charset="UTF-8">

페이지의 문자 집합을 UTF-8로 설정하며, 대부분의 웹페이지에서 권장된다.

 

viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

반응형 웹 디자인에서 중요하며, 페이지의 뷰포트 너비를 장치의 너비로 설정하고 초기 확대/축소 수준을 1.0으로 설정한다.

 

keywords

<meta name="keywords" content="티스토리, html, meta태그">

name속성에 keywords이라고 정의하여 사용하며 content 속성에 웹 페이지를 대표하는 주요 키워드를 설정한다.

키워드 메타 태그는 더 이상 검색엔진최적화에서는 의미가 없는 메타 태그인데, 현재 구글을 비롯한 여러 검색 엔진에서 키워드 메타 태그는 더 이상 사용하지 않는다.

사용하지 않게 된 이유는 기본적인 키워드 뿐만 아니라 트래픽 유입을 위해 불필요한 키워드를 과도하게 넣어두어 키워드 메타 태그를 악용한 경우가 많았기 때문이다.

 

deacription

<meta name="description" content="SEO를 위한 Meta태그 알아보기 ..." />

name속성에 description이라고 정의하여 사용하며 content에는 해당 웹 페이지의 요약된 내용을 적는다.

content에 들어가는 문자 길이는 영문은 150자, 한글은 100자 정도가 적당하다.

 

Open Graph

<meta property="og:title" content="웹페이지 title">
<meta property="og:description" content="설명글이 들어갑니다.">
<meta property="og:image" content="공유 된 링크를 표시할 이미지를 정합니다.">
<meta property="og:url" content="https://persistent-weed-dev.tistory.com">

스마트폰이 보급된 이후 SNS를 통해 블로그, 맛집, 지도 등 여러 정보를 공유하는 일이 많아지면서 메타 태그가 넓게 사용되고 있다.

쉽게 볼 수 있는 예시로 카카오톡에서 어떠한 링크를 공유했을 때 해당 페이지의 이미지, 제목, 내용이 간략하게 나오는걸 볼 수 있는데 해당 기능을 제공하는게 og:속성이다.

• og:title : 웹페이지의 제목을 나타낸다.
• og:description : 해당 페이지의 설명을 제공해준다.
• og:image : 해당 사이트의 썸네일 이미지와 같은 부분을 담당한다.
• og:url 해당 웹페이지의 주소를 나타낸다.