HTML 메타 데이터와 SEO 최적화
페이지 정보
조회 2회 작성일 26-02-26 04:42
본문
메타 데이터와 SEO 최적화
검색엔진이나 브라우저에 페이지의 정보를 전달하는 '데이터에 대한 데이터'입니다. 이를 잘 활용하는 것이 SEO(검색엔진 최적화)의 핵심입니다.
1. 주요 메타 태그와 역할
Title 태그: 검색 결과에서 제목으로 노출되는 가장 중요한 요소입니다. 페이지의 주제를 명확한 키워드로 표현해야 합니다.
Description 태그: 검색 결과 제목 아래에 표시되는 요약글입니다. 클릭을 유도하는 매력적인 문구와 핵심 키워드를 포함합니다.
Keywords 태그: 과거에는 중요했으나, 현재 대부분의 검색엔진(구글 등)은 순위 결정에 반영하지 않습니다.
Author / Copyright: 제작자 및 저작권 정보를 명시합니다.
2. 소셜 미디어 최적화 (Open Graph)
카카오톡, 페이스북, 슬랙 등에 링크를 공유했을 때 미리보기 카드(이미지, 제목, 설명)가 예쁘게 나오도록 설정하는 규격입니다.
og:title: 공유 시 표시될 제목
og:image: 공유 시 표시될 대표 이미지 (권장 사이즈 준수)
og:description: 공유 시 표시될 짧은 설명
og:url: 페이지의 표준 주소
3. SEO 최적화를 위한 핵심 전략
시맨틱 태그 사용:
<div>대신<header>,<main>,<h1>등을 사용하여 정보의 위계를 명확히 합니다.캐노니컬(Canonical) 태그: 같은 내용의 페이지가 여러 주소로 존재할 때, 검색엔진에 '대표 주소'를 알려주어 중복 콘텐츠 불이익을 방지합니다.
로봇 설정 (robots.txt / meta robots): 특정 페이지를 검색 결과에 노출할지 말지 제어합니다. (
index,noindex)Alt 속성: 이미지에 설명을 달아 검색엔진이 이미지의 내용을 파악하게 하고, 웹 접근성을 높입니다.
[HTML 강의] 구글 검색 결과와 SNS 미리보기 설정하기
1. 구글 검색 결과 (SERP)
일반적인 title과 meta description 태그가 사용됩니다.
제목(Title Link): 작성하신
<title>태그의 내용이 파란색 링크로 크게 보입니다. (권장: 60자 이내)설명(Snippet):
<meta name="description">의 내용이 하단에 작은 글씨로 노출됩니다. (권장: 160자 이내)
2. 카카오톡/SNS 공유 미리보기 (Open Graph)
og:title, og:image, og:description 태그가 사용됩니다.
이미지(Thumbnail):
og:image에 넣은 이미지가 카드 형태의 배경이나 썸네일로 보입니다. (카카오톡은 보통 2:1 비율 권장)제목:
og:title내용이 이미지 아래에 굵은 글씨로 보입니다.설명:
og:description내용이 가장 하단에 흐릿하거나 작은 글씨로 보입니다.
- 다음글HTML5 란 무엇인가? 26.02.25