title profile picture

Dev.White

meta 태그를 알아보자 (웹표준과 SEO)

Nov 15, 2018
·

처음 웹개발을 배울 때 웹표준을 배웠던 것 사실만 어렴풋이 기억난다.

그 이후 개발을 해오면서는 거의 신경쓰지 않고 개발했던 것 같다.

얼마 전, 이 블로그를 개발하면서 검색 엔진 노출을 위해 웹표준, SEO를 신경써 개발하다보니 다시 한번 살펴봐야겠다는 생각이 들었다.

그래서 그 중에서 HTML head 부분을 채우는 meta 태그에 대해 가볍게 정리해보았다.

아래는 포스트에서 살펴 볼 태그들의 목록를 나타낸 예제이다.

<!DOCTYPE html>
<html lang="ko">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="">
      <meta name="keywords" content="">
      <meta name="description" content="">
      <meta name="author" content="">
      <meta name="generator" content="">
      <meta name="robots" content="">
      <meta http-equiv="refresh" content="">
      <meta property="og:type" content="">
      <meta property="og:title" content="">
      <meta property="og:description" content="">
      <meta property="og:image" content="">
      <meta property="og:url" content="">
  </head>
</html>

<html lang="ko">

메타 태그 이전에 html 태그의 lang 속성에 대해 한번 알아보자.

lang 속성을 지정해야 하는 이유

  • 스크린 리더(화면 낭독 프로그램)이 지정된 언어를 인지하여 읽기 위함

lang 속성 값 'en-US', 'en-GB'의 차이점

  • 언어 뒤에 국가 코드를 붙인 형식으로, 만약 브라우저가 미국식 영어와 영국식 영어를 다르게 처리할 수 있는 환경이라면 서로 다르게 처리된다. 하지만 처리할 수 없을 경우에는 둘 중 가능한 것으로 처리되게 된다.

lang 속성 개별 선언

  • 만약 html lang이 en이고 그 중간에 한글로 된 내용이 있다고 한다면 내부에서 <span lang="ko">한글</span>의 형식으로 선언하면 해당 내용은 한글로 처리할 수 있게 된다.

meta Tag

meta charset emoji-star

<meta charset="UTF-8">

HTML5의 인코딩 지정 방법이다.

보통 UTF-8(유니코드 형식의 하나로, 전세계 거의 모든 문자를 표현 할 수 있다.)를 값으로 준다.

HTML이 아닌 곳에서의 인코딩 지정을 살펴보자.

  • Javascript : <script src="a.js" charset="UTF-8>" 해당 코드와 같이 외부에서 불러오는 파일일 경우 charset의 차이로 내용이 깨져보일 수 있다.
  • CSS : @charset "UTF-8" 표준에 따르면 CSS 문서 최상단에 해당 코드를 기술하도록 되어있다.

HTML 문서가 아닌 곳에서 인코딩을 지정할 필요는 보통 없다. 인코딩 에러가 발생할 경우 이 내용을 참고하도록 하자.

meta viewport emoji-star

반응형 웹 구현을 위해 필요한 메타 태그이다.

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

뷰포트라 함은 화면에 보이는 영역을 뜻한다. 즉 스크롤해서 봐야하는 영역을 제외한 보이는 그대로의 크기만큼의 영역이다.

위 예제 코드는 가장 흔히 쓰이는 코드로 너비는 보고있는 기기의 넓이이며 그에 맞춰 초기 화면 배율을 1로 지정한다는 의미이다.

meta keywords emoji-star

<meta name="keywords" content="a b">

해당 컨텐츠 내용의 대표적인 키워드를 지정한다.

검색 엔진의 검색 결과에 반영 될 수 있다.
구글에서는 검색 순위에 많은 메타 태그를 반영하지 않고 있지만 (keywords도 해당) 그래도 다른 검색 엔진에서도 반영하며 SEO에서는 중요한 메타 태그라고 할 수 있다.

meta description emoji-star

<meta name="description" content="개발 사이트 - About">

해당 페이지의 설명을 적어 넣는다, 검색 시 페이지의 제목 아래 페이지 내용의 요약이 적혀있는 것을 볼 수 있는데 그 부분에 반영되는 항목이다.

meta author emoji-star

<meta name="author" content="junho">

웹 페이지의 소유자(또는 회사)를 적는다.

meta generator emoji-x

<meta name="generator" content="">

이 웹페이지를 무엇으로 만들었는지 기술하는 태그이다.

다른 사람이 코드를 알아볼 때 참고할 수 있도록 하는 면이 있는데 요즘은 번들러를 통해 코드가 변환되는 경우가 있기 때문에 기술할 필요성이 떨어지며, 또 다른 경우는 코드를 자동 생성하면서 해당 메타 태그가 기술되어지는 경우가 있는데 이 경우 또한 흔한 경우가 아니며 웹표준이나 SEO 측면 모두 불필요한 메타 태그라고 볼 수 있다.

meta robots

<meta name="robots" content="noindex">

robots는 기본적으로 검색 엔진 크롤러의 허용, 불허 등을 제어한다.

robots 메타태그 보다는 robots.txt 파일로 제어하는게 일반적이다.

robots.txt의 역할과 차이점이 무엇인지 혼용해서 쓸 수 있을지는 아래 링크를 참고하자.

<meta http-equiv="refresh"> emoji-x

<meta http-equiv="refresh" content="0; url=https://example.com/">

해당 메타 태그를 사용하면 지정한 시간 이후 이정한 URL으로 자동으로 페이지를 이동시킬 수 있다.

content에 초 단위로 시간을 지정하고 0일 경우에는 즉시 이동한다.

해당 동작은 권장되지 않는다. 자동으로 URL 리다이렉션은 최근 웹에서는 지양하고 있으며 피싱 등의 위험으로 간주 될 수 있다.
또한 5초로 리다이렉트를 지정해놓았는데 그 전에 사용자가 뒤로가기를 하는 경우에 뒤로가기를 했는데도 5초 후 지정한 URL로 이동될 수 있으니 사용하지 않는 것이 좋다.

OpenGraph

오픈그래프는 웹페이지가 소셜 미디어 또는 오픈그래프를 활용한 사이트로 공유될때 사용되어지는 정보이다.

제일 흔한 예로 페이스북에 링크를 붙여놓기, 카카오톡 링크 공유할 때 해당 게시물의 제목, 설명, 이미지가 간략하게 나타나는 경우가 오픈그래프가 활용된 경우이다.

<head>
    <meta property="og:type" content="website">
    <meta property="og:title" content="페이지 제목">
    <meta property="og:description" content="페이지 설명">
    <meta property="og:image" content="http://www.mysite.com/myimage.jpg">
    <meta property="og:url" content="http://www.mysite.com">
</head>