메타태그 및 메타 디스크립션 특징 및 SEO 최적화 방법 (feat. 너무 길거나 짧은 meta description)

지난번에 이 글에서 애드센스 승인을 받기 위해서는 메테태그와 메타 디스크립션을 통한 SEO 최적화를 반드시 해야 한다고 결론을 내렸습니다.

하지만 html을 전혀 모르거나 블로그 초보자라면 이 과정에서 겪는 여러 가지 난관이 있는데, 오늘은 이 중 메타태그와 메타 디스크립션을 통한 SEO 최적화에 대해 말씀드려 볼까 합니다.

추가적으로 전 포스팅에서 통계적인 SEO 최적화 가이드라인에 대해서도 소개드렸으니 궁금하신 분들은 읽어보시는 걸 추천드립니다.

그리고 이 글을 쓰면서 겸사겸사 제가 겪었던 일들을 말해드리고 이런 짓은 시간낭비니 하지 말라고 말씀드리고 싶습니다.

메타태그란?

프로그래밍을 아예 모르시는 분들이라면, 티스토리의 편집에서도 많은 난관을 겪으실 겁니다. 우선 메타태그가 무엇인지 전혀 모르는 분들을 위해 정말 맞춤식으로 설명해드리겠습니다.

우리가 한글을 알고 있다면 어떤 문서를 만들 때의 요약 정보를 우리는 한국말로 읽을 수 있습니다.

하지만 검색 엔진의 AI는 무조건 프로그래밍 언어로만 받아들일 수 있기 때문에 메타태그를 붙여 검색 엔진의 AI 한테 설명해 주는 것이라 보면 됩니다.

이는 블로그의 스킨 편집에 들어가면 html 란에서 추가하여 조정할 수 있게 되어 있습니다.

<meta name=

한마디로 메타 태그는 요약정보를 전달하기 위한 것이고, 그 하위 항목인 메타 디스크립션도 마찬가지입니다.

티스토리에서 우리가 글을 쓰고 구글에서 검색한다면, 해당 글을 요약하기 위한 두 줄이 글의 제목 아래에 뜹니다. 이를 메타 디스크립션이라고 하고 티스토리의 경우에는 처음 쓰는 글의 두 줄 정도에 해당합니다.

여기서 중요한 게 있는데, 메타 디스크립션의 경우 html에서 티스토리의 홈에 대해서는 편집이 가능하나 티스토리의 글에서는 임의 편집이 불가능합니다.

아래에 말씀드릴 seo 최적화에서, 특히 bing이 이를 걸고넘어질 텐데, 검색 유입의 경우 상관없다는 글들이 대다수입니다. 그냥 넘어가는 게 맞습니다. 이를 해결하기 위해 저처럼 시간낭비 하지 않는 것을 추천드립니다.

메타태그와 SEO 최적화와의 관계

기본적으로 SEO 최적화란 다음의 단계를 따릅니다.

자신이 등록을 원하는 서치 콘솔에 들어간다.
서치 콘솔에서 메타태그를 통해 자신의 사이트를 추가한다.
서치 콘솔에 추가한 사이트를 색인 생성 요청한다.
색인 생성 요청이 완료되었다면, url 검사를 통해 무엇이 부족한지를 알아본다.
자신이 쓴 모든 글에 대해서도 색인 생성 요청을 하고 url 검사를 통해 SEO 최적화를 한다.

대부분 이 과정입니다. 티스토리 블로거의 경우 등록해야 할 서치 콘솔은 총 3가지로, 구글 서치 콘솔, 네이버 서치 어드바이저, 빙 웹마스터 도구입니다.

여기서 SEO 최적화가 처음이라면 빙 웹마스터 도구를 제일 처음 써 보시는 걸 추천드립니다. 왜냐하면, 빙 웹마스터 도구는 url 검사를 할 때 SEO 최적화에 대해 무엇이 부족한지를 가장 확연하게 나타내줍니다.

물론 사이트마다 요구하는 최적화가 조금조금씩 다르긴 하지만, 일단 한번 직접 해보고 난 이후엔 어느 정도 감을 잡으실 겁니다. 추가 방법에 대해서는 각각의 사이트 이름으로 검색하기만 해도 정말 많은 웹페이지들에 상세하게 설명하고 있으므로 찾아보시는 걸 추천드립니다.

Bing 웹마스터도구 문제 해결 방법

여기서 url 검사를 하고 난 이후에는 다음과 같은 문제점들이 발견될 겁니다.

너무 짧은 제목.
이미지가 누락된 경우의 Alt 특성
2개 이상의 h1 태그
너무 길거나 짧은 Meta Description

1번 - 너무 짧은 제목의 경우, 빙 웹마스터 도구로 추가한 메타태그에서 다음 양식과 같이 이름을 바꿔주면 됩니다.

	<meta name="돈버는 실험실 - 집에서 돈버는 방법" content="집에서 할 수 있는 돈버는 방법. 진짜로 직접 실행해보고 최대한 객관적으로 포스팅합니다." />

양식을 바꿔주고 나서, 티스토리 관리 -> 블로그란에서 이름을 name란과 같이 하고, 블로그 설명을 content 란과 똑같이 바꿔주면 해결됩니다.

2번 - 이미지가 누락된 경우의 alt 특성은, html 편집에서 ctrl+f를 눌러 alt="를 검색하여 alt=""과 같이 비어있는 칸이 있다면 임의로 채워주면 됩니다. 저의 경우에는 각각이 어떤 썸네일인지 몰라 그냥 thumbnail1~thumbnail10 이런 식으로 숫자만 바꿔가면서 채워주었습니다.

그리고 난 뒤에 각 글의 사진들에도 alt 태그를 넣어주어야 합니다. 각 글에 넣은 사진을 눌러보시면 위에 뜨는 여러 가지 항목 중에 톱니바퀴 모양인 대체 텍스트 삽입이 보이실 텐데, 여기에 이미지에 대한 짧은 설명글을 써주시면 됩니다.

대체 텍스트 삽입은 시각 장애인 분들을 위한 것으로, 이게 등록되어 있으면 SEO가 더 좋은 페이지라고 인식하게 됩니다.

3번 - 2개 이상의 h1 태그는 html에서 <header를 검색해 보면 <div class="inner"> 아래에 햄버거 빵처럼 적힌 <h1> 태그와 </h1> 태그가 있습니다. 이걸 각각 <h2>와 </h2>로 바꾸고, css에서도 header를 검색해서 각 헤더 옆에 붙은 h1 태그 3개를 h2 태그로 바꿔주면 해결이 됩니다.

4번 - 너무 길거나 짧은 Meta Description의 경우 글에 해당하는 것인데 티스토리에선 해결 방법이 없습니다. 앞서 말했지만 티스토리에서 아예 글을 처음 쓸 때 처음 두 줄을 Meta Description으로 잡고 사용자가 건드릴 수 있는 부분이 없기 때문에 찜찜하지만 넘어가는 수밖에 없습니다. 다른 사이트들의 경우 meta 태그에서 content 란을 75~150자 정도로 적절하게 채워주면 해결됩니다.