SEO 최적화를 위한 HTML 메타 태그 사용법에 대해 알려드리겠습니다. 웹사이트에 대한 전반적인 정보를 검색엔진과 브라우저에 제공하기 때문에 가시성, 사용자 경험 등을 개선하는 데에도 유용합니다. 직접적으로 순위에 영향을 주는 것은 아니지만 검색 결과나 클릭률 면에서는 표시 방식을 크게 좌우하기 때문에 효과적으로 html 메타 태그를 사용해서 SEO를 향상 시키는 데에 기여할 수 있습니다.
HTML 메타 태그란?
html 메타 태그는 웹 페이지의 전체적인 주제나 내용을 설명해 주는 코드 텍스트로, 코드 페이지의 <head> 섹션에 위치하기 때문에 보여지는 웹 사이트 화면에는 나타나지 않습니다. 검색 엔진은 이 메타 태그 영역을 통해 해당 사이트를 더욱 빠르고 정확하게 파악할 수 있습니다.
코드 페이지에서 아래와 같이 생긴 것이 메타 태그 영역입니다.
<meta name="description" content="SEO를 향상시키기 위한 HTML 메타 태그 사용법에 대해 설명하는 사이트입니다.">SEO에 메타태그가 중요한 이유
이 메타 태그가 SEO에 어떤 영향을 주길래 중요한 요소가 되었는지 하나씩 알아보겠습니다.
- 클릭률 개선 : 한 줄로 요약한 사이트의 설명 문구가 좋을 수록 유저들이 해당 사이트를 클릭할 확률이 높아지기 때문에 키워드를 잘 생각해서 설정하는 것이 좋습니다.
- 검색 엔진 색인 : 잘 작성한 메타 태그를 통해 검색 엔진이 콘텐츠들을 정확하게 색인할 수 있도록 해줍니다.
- SNS 공유 최적화 : 타인이나 SNS 같은 소셜 미디어에 공유할 때 더 정리된 내용으로 보기 좋게 공유할 수 있습니다.
SEO를 위한 필수 HTML 메타 태그
1. 제목 태그
제목 태그는 <title>로 웹 사이트 or 페이지의 제목을 정해주며 가장 중요한 SEO 요소 중 하나입니다. 검색 엔진 결과에서 클릭할 수 있는 형태의 제목으로 보여지게 됩니다.
<title>정보24시의 메타 태그 사용법</title>이때 주의해야 할 것은 60자 이내로 작성해서 검색 결과에서 잘리지 않게 사용해야 하며, 대표 키워드를 자연스럽게 포함 시키면 좋습니다. 그리고 모두에게 잘 읽힐 수 있는 문장을 만들어 클릭을 유발 시키는 것을 추천합니다.
2. 메타 설명
메타 설명은 meta description이라고도 불리며 페이지를 짧게 요약한 설명을 의미합니다. 다른 곳에 사이트를 공유하거나 검색 엔진이 정확하게 색인을 하기 위해서는 잘 작성해야 합니다. 각 페이지마다 고유한 메타 태그를 작성하는 것이 좋으며 중복된 제목이나 설명은 지양해야 합니다.
<meta name="description" content="HTML 메타 태그를 효과적으로 사용하여 웹사이트의 SEO와 검색 노출을 높이는 방법을 알아보세요.">설명 부분에는 150~160자 이하로 작성해야 하며, 행동을 일으킬 수 있는 말로 작성하는 것이 좋습니다. 또한, 페이지의 대표 키워드를 넣어주면 더욱 좋습니다.
3. 키워드
이 키워드의 경우 예전에는 굉장히 중요한 SEO 요소로 여겨졌지만, 현재는 우선순위가 아니기 때문에 자연스럽게 키워드들을 배치하는 것이 더 좋습니다.
예를 들어, 해당 페이지의 내용이 [html, 메타 태그, SEO 최적화] 키워드 중심으로 작성되었다면 키워드 코드에도 간결하게 넣어주는 것입니다.
<meta name="keywords" content="HTML, 메타 태그, SEO 최적화">4. 로봇
로봇(Robots meta tag) 태그의 경우 검색 엔진이 페이지를 크롤링 할 때 색인을 할 수 있도록 제어하는 코드입니다.
<meta name="robots" content="index, follow">- index : 페이지 색인
- noindex : 페이지 색인 방지
- follow : 페이지 내 링크 허용
- onfollow : 링크 추적 방지
5. 뷰포트
뷰포트 태그(viewport meta tag)는 모바일 친화적인 코드로 굉장히 중요한 요소입니다. 콘텐츠가 다양한 기기에 맞춰 자유롭게 사이즈가 변형되도록 도와줍니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">반응형 웹 디자인에서는 항상 해당 코드를 포함하게 되며, 여러 기기에서 테스트 후 최적의 디스플레이를 확인할 수 있습니다.
6. 오픈 그래프
오픈 그래프(open graph) 태그는 페이스북, 링크드인 같은 SNS 소셜 미디어 플랫폼에서 더 예쁘게 콘텐츠가 보이도록 최적화 시켜주는 역할을 합니다. 여러 사이트에 자신의 사이트나 페이지를 공유할 예정이라면 넣어주는 것을 추천드립니다.
<meta property="og:title" content="SEO 최적화를 위한 HTML 메타 태그 사용법">
<meta property="og:description" content="웹사이트 SEO를 최적화하는 방법이 담겨 있습니다.">
<meta property="og:image" content="https://infodang.com/image.jpg">
<meta property="og:url" content="https://infodang.com/meta-tags-guide">7. 트위터 카드
6번과 비슷한 방식으로 트위터 카드(twitter cards) 태그는 말 그대로 트위터에서 공유할 때 표시되는 방식을 최적화 시켜줍니다. 오픈 그래프와 해당 코드는 트위터 플랫폼 최적화를 도와줍니다.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="SEO 최적화를 위한 HTML 메타 태그 사용법">
<meta name="twitter:description" content="HTML 메타 태그를 최적화하여 SEO와 검색 노출을 높이는 방법을 알아보세요.">
<meta name="twitter:image" content="https://infodang.com/twitter-image.jpg">8. 언어셋 태그
언어셋 태그(charset meta tag)는 웹 페이지의 문자 인코딩을 지정해 특수 문자가 쓰이더라도 에러가 나지 않고 바르게 보이도록 도와줍니다.
<meta charset="UTF-8">해당 코드를 사용함으로 인해 문자 표시 문제를 방지하고 전 세계 사람들이 문제 없이 볼 수 있게 도와줍니다.
9. 캐노니컬 태그
캐노니컬 태그(canonical tag)는 특정한 웹 페이지의 선호 버전을 정해 중복 콘텐츠가 나타나지 않도록 도와줍니다.
<link rel="canonical" href="https://infodang.com/meta-tags-guide">10. 새로고침
리프레시 or 새로고침 태그(refresh meta tag)는 특정한 시간 이후에 페이지를 새로고침 할 수 있도록 하거나 다른 페이지로 리디렉션 해주는 역할의 코드입니다. 다만, SEO에 좋은 영향을 주지 않고 유저의 이탈을 만들 수 있으니 꼭 필요한 상황에서만 이용하시는 것을 권장드립니다.
<meta http-equiv="refresh" content="5;url=https://infodang.com">HTML 메타태그 FAQ
메타 태그가 SEO 순위에 영향을 주나요?
제목이나 메타 설명 태그가 순위에 직접적인 영향을 주는 것은 아니지만, 사용자의 클릭률에는 영향을 줄 수 있어서 결과적으로는 SEO 최적화에 도움이 됩니다.
메타 태그를 안 채워도 되나요?
안 됩니다. 메타태그 부분을 비워둘 경우 검색 엔진이 잘못된 스니펫을 형성할 수 있어서 사용자에게 부정적인 경험을 줄 수 있습니다.
메타 태그는 어디서 볼 수 있나요?
확인이 필요한 페이지에서 마우스 우클릭 > 검사(F12)로 들어가서 태그 코드를 확인할 수 있습니다.
총 정리
지금까지 html 메타 태그에 대해 다양한 정보를 알아보았습니다. SEO에 직접적인 영향을 주진 않더라도 사용자의 경험 개선을 통해 결과적으로 최적화 시킬 수 있는 방법이기 때문에 제목 태그, 메타 설명을 포함한 주요한 요소들을 꼼꼼하게 작성할 수록 사이트의 유입과 성과가 높아질 수 있습니다. 아주 기본적인 내용이지만 하나씩 적용하여 검색 노출이 잘 되는 웹사이트를 만들어 보시기 바라겠습니다.