메타 태그 및 SEO

메타 태그와 SEO (Meta Tags)

<meta> 태그는 브라우저 화면에 직접 글자나 그림으로 보이지는 않지만, 웹사이트의 운명을 결정짓는 숨은 명함과 같습니다.
구글이나 네이버 같은 검색 엔진 로봇이 "이 사이트가 무슨 사이트인지" 파악하는 기준이 되며, 친구에게 카카오톡으로 링크를 보냈을 때 뜨는 예쁜 썸네일과 요약 제목도 모두 메타 태그가 결정합니다.

1. 웹사이트의 숨겨진 명함

현업 프론트엔드 개발자라면 마크업을 다 짜고 나서 가장 마지막에 심혈을 기울여 세팅하는 영혼의 작업(SEO 최적화) 구역입니다.

📇

<head> 내부 명함

제목: HTML 강좌
설명: 완벽 가이드
사진: thumb.jpg

➡️

🤖 구글 봇: "아! 여긴 HTML 강좌구나!"

💬 카카오톡: 공유 시 예쁜 썸네일 노출!

2. 반드시 알아야 할 Meta 속성

속성명	설명 및 역할
`charset="UTF-8"`	문서의 문자 인코딩 방식을 지정합니다. 이게 없으면 브라우저가 한글을 "쀏뛣뀗" 처럼 깨진 글자로 보여줄 수 있습니다.
`name="viewport"`	모바일 기기에서 웹사이트가 디바이스 크기에 맞게 제대로 축소/확대되도록 만드는 반응형 웹의 필수 요소입니다.
`name="description"`	구글 검색 결과 화면에서 사이트 제목 바로 밑에 뜨는 2~3줄 짜리 요약 설명글을 지정합니다. (SEO 핵심)
`property="og:..."`	오픈 그래프(Open Graph) 데이터입니다. `og:title`, `og:image` 등을 설정하여 카카오톡이나 SNS에 링크 공유 시 뜨는 썸네일과 제목을 제어합니다.

<div class="simulation-container"> <h3>📱 카카오톡 공유 미리보기 (Open Graph)</h3> <div class="chat-bubble"> <div class="og-preview">  <div class="og-image-placeholder"> <span>🖼️ Thumbnail Image</span> </div> <div class="og-content">  <h4 class="og-title">Minstudio HTML 무료 강좌</h4>  <p class="og-desc">초보자를 위한 완벽한 HTML 가이드. 지금 바로 시작하세요!</p>  <span class="og-domain">minstudio.app</span> </div> </div> </div> </div>

속성명

설명 및 역할

charset="UTF-8"

문서의 문자 인코딩 방식을 지정합니다. 이게 없으면 브라우저가 한글을 "쀏뛣뀗" 처럼 깨진 글자로 보여줄 수 있습니다.

name="viewport"

모바일 기기에서 웹사이트가 디바이스 크기에 맞게 제대로 축소/확대되도록 만드는 반응형 웹의 필수 요소입니다.

name="description"

구글 검색 결과 화면에서 사이트 제목 바로 밑에 뜨는 2~3줄 짜리 요약 설명글을 지정합니다. (SEO 핵심)

property="og:..."

오픈 그래프(Open Graph) 데이터입니다. og:title, og:image 등을 설정하여 카카오톡이나 SNS에 링크 공유 시 뜨는 썸네일과 제목을 제어합니다.