title 태그는 html문서의 제목을 정의하는 태그입니다.
title 태그에 들어가는 값은 해당 html문서의 제목을 나타냅니다. 그리고 이 제목은 웹브라우저 상에서 맨 위에 있는 제목 표시줄에 출력되는 이름이기도 합니다. (밑에 있는 예시 코드의 결과를 참고하세요.)
title 태그는 head태그 안에서 작성하면 되는 태그입니다. 실제 실습으로 title 태그를 써서 html 문서의 제목을 작성해볼까요?
* 예시코드
<head>
<title>cocoder의 tistory 블로그^^</title>
</head>
* 결과
title 태그는 html 문서의 제목을 정의하기 때문에 검색엔진에서 노출되기 위한 키워드로서도 중요한 역할을 수행합니다.
우리가 구글이나 다음, 네이버 같은 검색엔진에서 검색을 할 때, 검색어에 맞는 웹페이지들을 노출하기 위해서 검색엔진은 고유의 알고리즘들을 가지고 있습니다. 이 알고리즘을 정확히 알 수는 없으나 분명한 건, 검색어와 일치하는 키워드를 가진 웹페이지들을 노출시킨다는 것입니다. 이때 키워드의 비교대상이 되는 값 중 하나가 바로 title태그의 값입니다. 따라서 검색엔진 최적화(SEO)를 고려하고 있는 웹페이지라면 title 태그에 들어갈 제목은 검색엔진 노출을 고려해 신중하게 결정하는 것이 좋습니다.
검색엔진 최적화에 중요한 역할을 하는 또 다른 태그들이 있습니다. 그중에 하나인 meta 태그에 대해서 알아보겠습니다.
meta 태그는 해당 html문서의 전반적인 정보를 정의하는 태그입니다.
meta는 어떤 의미일까요. 저도 잘은 모르지만 어떤 데이터를 설명하는 데이터를 meta data라고 합니다. 마찬가지로 웹페이지를 설명하는 정보(데이터)를 meta 태그로 작성할 수 있다고 합니다. meta 태그에는 문서의 상세설명, 저자, 키워드, 인코딩 방식, 렌더링 방식 등을 정의할 수 있습니다. 이 meta태그도 검색엔진 최적화를 위해 사용될 수 있으며 title태그와 마찬가지로 head태그 안에서 사용됩니다. meta태그는 참 많은 속성과 속성 값들을 사용할 수 있습니다. 지금부터는 그중에 자주 쓰이는 몇 가지를 대표적으로 소개해보려고 합니다.
meta 태그의 속성
속성1. charset
문자의 규칙을 정의하는 속성입니다. 웹브라우저가 html 문서를 읽어서 화면에 표시할 때, 문자를 어떤 방식으로 인코딩할지를 정의합니다.
속성 값으로는 utf-8, euc-kr 둘 중 하나가 옵니다.
이 속성 값들을 인코딩 방식이라고 하는데 html 파일이 작성되었을 때 인코딩 방식과 웹브라우저가 사용하는 인코딩 방식이 서로 다르면 글자가 깨지므로 이를 일치시키는 것이 중요합니다.
euc-kr 은 원래 영어만을 고려했던 1byte 길이의 인코딩 방식을 확장하여 한글을 사용할 수 있도록 만든 2byte 길이의 국가 언어 코드입니다. 즉, 우리나라에서만 쓸 수 있도록 만들었기 때문에 확장성이 떨어집니다.
그래서 새로 나온 방식이 utf-8입니다. 용량은 euc-kr보다 조금 더 커졌지만 표준화 및 글로벌 환경에 아주 잘 맞는 utf-8 인코딩 방식을 사용할 것을 적극적으로 권장받고 있습니다.
그러니 관습적으로 head태그 안에 다음과 같은 코드를 적습니다.
<meta charset="utf-8">
속성2. name
사용할 수 있는 속성 값으로는 description, keywords, author, subject, classification, theme-color, viewport 등이 있습니다. 이 속성은 content 속성과 함께 쓰입니다. 아래 내용을 더 읽어보시면 이해가 되실 겁니다.
속성3. content
속성값으로 텍스트를 작성합니다.
name과 content로 표기한 정보는 검색엔진 로봇이 적극적으로 활용합니다.
▶ 1. description
name="description"으로 하고 content의 값을 작성해주면 그 내용이 문서의 요약기술이 됩니다.
이 내용은 검색할 때 제목 링크 밑에 나오는 요약설명으로 나타나기도 합니다.
예를 들어 구글에 "cocoder.tistory"라고 검색해보았습니다.
제목링크 밑에 빨간 줄로 표시한 저부분이 각 페이지의 링크마다 있다는 것을 아실 겁니다.
이것은 어느 검색엔진마다 다 비슷합니다. 빨간 줄이 있는 저 자리에 노출되는 텍스트가 meta 태그의 description으로 작성된 내용일 확률이 높습니다.
정말 그런지 페이지에 들어가서 페이지 소스보기로 확인해보겠습니다.
웹페이지 링크를 클릭해 들어가신 다음, 해당 웹페이지에서 아무 곳에나 마우스 우클릭을 한 후, 페이지 소스 보기를 누르시면 됩니다. 그러면 해당 웹페이지가 html 언어로 작성된 파일이 나옵니다. 코드가 길더라도 겁먹을 필요 없이 meta태그가 head 태그 안에 있다는 사실을 기억하고 찾으시면 됩니다.
자 여기까지 우리는 지금 meta 태그의 name 값이 description인 경우, content속성에 넣은 값이 검색엔진에 그대로 노출되고 있다는 사실을 확인했습니다. 왜 meta태그가 검색엔진 최적화에 중요한지 눈으로 보면서 깨닫게 되었습니다. description에 작성한 내용에 어떤 키워드를 담을지 전략을 잘 세워야 할 것 같습니다.
▶ 2. keywords
name="keywords"로 하고 content를 작성하면 이 정보도 검색엔진이 사용합니다.
content의 값으로는 "단어, 단어, 단어, 단어, 단어" 이런 식으로 태그를 달듯이 써주면 됩니다.
<meta name="keywords" content="블로그, 코딩, 티스토리">
▶ 3. author
웹페이지의 저자를 표기하는 용도입니다.
<meta name="author" content="cocoder16">
이 외에도 name값으로 올 수 있는 건 많습니다. 그런데 검색엔진 최적화를 신경 써야 한다면 description은 필수로 넣는 것이 좋을 것 같습니다.
▶ 4. viewport
반응형 웹 디자인을 하기 위해 사용합니다.
https://cocoder16.tistory.com/37
반응형 웹 만드는 법 (ft. 디바이스 종류별 width값)
반응형 웹을 만드는 방법 반응형 웹이란 각 디바이스의 크기와 뷰포트의 크기를 고려하여 어떠한 크기에서도 서비스를 제대로 화면에 보여주는 웹을 말합니다. 반응형 웹은 흑과 백처럼 이분법
cocoder16.tistory.com
▶ 5. theme-color
content 값으로 color 값을 넣어서 크롬 툴바의 색을 지정할 수 있습니다.
<meta name="theme-color" content="#4285f4">
속성4. http-equiv
▶ 1. http-equiv="refresh"
http-equiv="refresh"에 content속성을 추가하여 값을 숫자로 넣으면 그 숫자(초)마다 페이지가 새로고침이 됩니다.
<meta http-equiv="refresh" content="30">
▶ 2. http-equiv="X-UA-Compatible"
구버전 익스플로러를 사용하는 유저 중에 호환성 보기 모드를 사용하는 분들에게 웹페이지가 정상적으로 출력되지 않는 경우를 예방하기 위해 사용합니다. 크로싱 브라우저 이슈에 관심이 있으시면 살펴봐야 할 코드입니다. 해당 문제를 해결하는 방법을 잠깐만 살펴보고 넘어가겠습니다.
익스플로러 호환성 보기 사용자 설정 무시하는 방법
결론적으로 밑에서 설명하는 예시 코드를 head태그 안에 추가해주면 됩니다.
익스플로러 브라우저는 호환성 보기 모드가 존재하는데 사용자가 이것을 사용하면 개발자가 지원하는 브라우저에 따라 오래된 브라우저에서 정상적으로 출력되지 않는 이슈가 발생할 수 있습니다.
개발한 웹이 최신 브라우저만 지원하는 환경이라면 이 태그를 사용하는 의미가 크지는 않지만,
오래된 버전의 브라우저까지 모두 지원한다면 꼭 필요한 코드입니다.
한국에는 구 IE 유저가 많기 때문에 한국을 타깃으로 개발한다면 이를 사용할 필요성이 더욱 높아질 것입니다.
결국 결론은 오래된 브라우저를 지원하기 위해 사용하는 코드입니다.
* 예시코드
<!-- 쓸 태그 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!-- 쓸필요없는 태그-->
<meta http-equiv="X-UA-Compatible" content="IE=5" />
<meta http-equiv="X-UA-Compatible" content="IE=6" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
위 태그 안에 content 속성 값으로 개발환경 버전을 작성하면 됩니다.
그러면 브라우저는 그 지정된 버전으로 해당 웹페이지를 렌더링 하여 오픈합니다.
이때, 사용자가 설정한 호환성 보기를 무시합니다.
edge는 IE 브라우저의 가장 최신 버전입니다.
따라서 개발자는 결국 content값으로 "IE=Edge"를 기록하게 될 것입니다.
(예시 코드에 여러 줄이 있다고 저걸 전부 쓰는 것이 아니라, 개발환경에 해당하는 한 줄만 사용해야 합니다.)
왜냐하면 과거형 브라우저에 최적화되게 개발하는 것도 문제가 있으니까, 대부분의 경우 가장 최신 버전에 최적화되게 개발을 할 것이기 때문입니다. 그리고 IE의 가장 최신 버전은 엣지이죠.
크롬 프레임이 설치되어있다면 IE에서도 크롬 렌더링을 사용하게 만들 수 있습니다. 위 코드에서 chrome=1만 추가시켜주면 됩니다.
* 예시 코드
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
속성5. property
content속성과 함께 사용합니다.
소셜미디어 또는 오픈그래프를 활용한 사이트로 내 웹페이지를 공유할 때 간략하게 나타내는 제목, 설명, 이미지 등을 만들기 위해 사용합니다.
* 예시 코드
<meta property="og:type" content="website">
<meta property="og:site_name" content="사이트 이름">
<meta property="og:title" content="페이지 제목">
<meta property="og:description" content="페이지 설명">
<meta property="og:image" content="./images/myimage.jpg">
<meta property="og:url" content="http://mysite.com">
맨 윗줄은 그대로 두고 나머지 5줄에서 content 안에 들어있는 값만 적절하게 수정해서 쓰시면 됩니다.
참고로 twitter 공유용으로는 다음과 같은 코드를 사용해줘야 합니다.
* 예시 코드
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="https://website.com">
<meta name="twitter:title" content="페이지 제목">
<meta name="twitter:description" content="페이지 설명">
<meta name="twitter:image" content="./images/myimage.png">
최근댓글