저자소개
리브(Liv)
- UX/UI 디자이너에서, 콘텐츠 기획,
홈페이지 SEO 구조화 컨설턴트까지
검색엔진 최적화 홈페이지 기획,
제작 전문 디자이너로 활동하고 있습니다.
전) UX/UI 디자인 팀 리드
현) 238LAB SEO전문 UX/UI 디자이너
웹페이지를 구성하는 HTML의 <head> 영역에는 페이지의 핵심 정보를 담는 태그(tag)들이 있습니다. 이중 메타태그는 검색엔진과 사용자에게 페이지의 핵심 내용을 대표합니다. 메타태그에 담긴 정보에 따라 크롤링봇에게 글이 인식되고 주제가 분류되어, 검색의도에 따라 유저(user)에게 노출되기 때문에 페이지의 내용을 요약한 주제가 담기는 것이 좋습니다.
또 메타태그에 적힌 텍스트(text)는 유저가 키워드 검색시, 검색지면에서 보여지는 페이지의 설명글이기 때문에 유저의 클릭률(CTR)에도 영향을 줍니다. 따라서 메타태그는 “봇에게는 주제를 명확히 알려주고, 사용자에게는 클릭을 유도하는 언어”로 작성해야 검색엔진 최적화에 긍정적인 역할을 할 수 있습니다.
메타태그는 HTML <head>에 위치하며, 페이지의 정보를 정의합니다. HTML 자체가 낯선분들을 위해, 잠시 간략하게 설명하자면, HTML은 웹페이지의 뼈대를 만드는 언어로, 내용, 제목, 문단, 이미지, 링크 등의 배치 구조를 정의하는 언어입니다. 아래의 코드는 HTML의 <head>의 구성의 예시입니다.
여기서 오늘 알아볼 <head>와 </head> 사이에 있는 메타 태그들의 각각의 역할을 설명드리겠습니다.
<title> 요소로, 페이지 제목을 정의합니다. 검색결과 스니펫의 제목으로 사용되며, 핵심 키워드를 앞부분에 배치하는 것이 검색 노출에 일반적으로 유리할 수 있습니다. 항상, 키워드가 맨 앞에 나와야만 유리한 것은 아닙니다. 키워드의 순서보다는 Title의 내용이 페이지의 핵심내용을 담고 있으며 검색의도에 부합하는지에 좀 더 중심을 두고 작성하면 좋습니다.
meta name="description" content="..."> 요소로, 검색결과에 노출되는 페이지에 대한 간략한 설명입니다. 길이는 150~160자 내외로 보여기기 때문에 150~160자 내로 페이지의 핵심 설명을 담아 내는 것이 좋습니다. 주로 <title> 태그와 짝을 이뤄 서로 보완할 수 있도록 “제목-설명”구조로 작성하는 것이 권장됩니다.
*구글은 사용자의 검색 의도나 페이지 본문 내용에 따라 자동으로 스니펫을 재작성하기도 하니, 가능한 한 메타 디스크립션에 핵심 키워드와 핵심적인 요약을 담아 내는 것이 좋습니다.
<title>과 <description> 태그가 검색지면에서 보여지는 형식
스니펫 예시 (리스트형 스니펫)
<meta name="robots" content="noindex, nofollow"> 을 통해 검색엔진의 인덱싱·크롤링 방식을 제어합니다. 즉, 해당 태그는 검색엔진의 크롤링봇이 해당 페이지를 크롤링 접근 가능여부를 여부를 결정해주는 태그입니다.
1) noindex: 이 페이지를 검색엔진 색인(인덱싱) 대상에서 제외하라는 의미입니다.
2) nofollow: 이 페이지 내의 링크를 따라가 크롤링하지 말라는 의미입니다.
즉, 크롤러가 “이 페이지를 인덱스에 저장할지”와 “해당 페이지의 링크를 따라 다른 페이지로 이동할지”를 승인·거부하는 역할을 하는 곳이라고 이해하시면 됩니다.
<link rel="canonical" href="...">로 중복 콘텐츠 문제를 해결하고 크롤링 봇이 올바른 페이지를 색인하도록 유도합니다. 쉽게 말해, 캐노니컬 태그는 여러 URL이 동일하거나 매우 유사한 콘텐츠를 가리킬 때, 검색엔진에 “이 URL을 대표 페이지로 인식하세요”라고 알려주는 코드입니다. 캐노니컬 태그는 중복 콘텐츠(duplicate content)를 방지해 SEO에 기여합니다.
예를 들어, 쇼핑몰 상품 페이지처럼 ?color=red, ?color=blue 등 파라미터가 붙은 URL이 다수 존재하나 페이지의 내용은 동일할, 때 검색엔진은 이를 “중복 콘텐츠”로 간주해 검색 순위에 나쁜 영향을 주거나 인덱싱 분산(issue splitting)문제를 일으킬 수 있습니다. 이를 방지하기 위해서는 각 변형 페이지(본문 내용은 동일하나 파라미터가 다른 페이지)의 <head>에 동일한 <link rel="canonical" href="<https://www.example.com/product/123>">를 넣어 두면, 검색엔진이 하나의 URL만 색인하여 해당 페이지 평가에만 집중할 수 있습니다.
SNS 공유 시 제목, 이미지, 설명 등을 정의하는 부분입니다. 아래 사진과 같이 설정값에 따라 공유시 제목,이미지, 설명등이 나타납니다.
검색엔진최적화에는 여러 요소가 있지만 그 중 메타태그의 역할은 “검색엔진 봇이 해당 페이지의 인덱싱과 크롤링을 원할히 할 수 있도록 도와, 검색엔진이 유저의 검색의도에 맞게 페이지가 잘 노출 될 수 있도록 도와주는 역할”이라고 말할 수 있습니다. 때문에 페이지의 내용을 잘 대표할 수록 메타태그는 SEO에 기여할 수 있습니다.
그런데, 노출이 잘 되었어도 ‘클릭’이 발생하지 않으면 질좋은 혹은 검색의도를 충족한 페이지라 볼 수 없기 때문에, 검색자, 유저가 클릭할 수 있도록 문구를 작성해야 합니다. 또 단순히 클릭만 발생시켰다고 SEO에 좋은 영향을 주진 않습니다. 클릭이 발생하고 해당 페이지의 내용이 유저의 궁금증을 해소해 주거나, 오래 머물러 읽을 만한 좋은 콘텐츠를 제공해 주어야 합니다. 즉 ‘체류시간’ 또한 고려 요소가 됩니다.
어렵게 들릴 수 있지만, 반대로 시작해서 그렇습니다. “질좋은 콘텐츠”에서 시작하면 모든게 쉬워집니다. “질좋은 콘텐츠”는 주제가 명확하고, 독자에게 유익한 정보를 제공해 주고, 또 가독성이 좋아 끝까지 읽게 되니, CTR, 체류시간, 유저의 만족도 모두를 충족할 수 있습니다. 이런 얘기를 하는 이유는 “메타태그” 설정만이 SEO의 전부가 아님을 알려드리기 위해서입니다. 결국 SEO라는 것은 좋은 정보를 유저와 만나게 해주기 위해 있는 것으로. 해당 핵심을 알고 “메타태그”를 검색엔진 최적화에 잘 활용할 수 있으면 좋겠습니다.
 | 리브(Liv) 저자소개- UX/UI 디자이너에서, 콘텐츠 기획, 홈페이지 SEO 구조화 컨설턴트까지 검색엔진 최적화 홈페이지 기획, 제작 전문 디자이너로 활동하고 있습니다. 전) UX/UI 디자인 팀 리드 |
