minstudio

메타 태그와 SEO (Meta Tags)

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

웹사이트의 숨겨진 명함 (Meta 태그)

👤
<head> 내부 명함

- 이름: Minstudio HTML
- 직업: 웹 학습 플랫폼
- 사진: thumbnail.jpg

🤖 구글 로봇: "아! 여긴 HTML 과정이구나!"
💬 카카오톡: 공유 시 예쁜 썸네일 노출!

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

태그명주요 속성설명
<meta>charset문서의 문자 인코딩 방식을 지정합니다. 이게 없으면 한글이 "쀏뛣뀗" 처럼 깨질 수 있습니다. (보통 UTF-8)
name뷰포트(viewport, 모바일 대응 필수), 설명(description, 구글 검색결과에 뜨는 요약글) 등 메타데이터의 종류를 명시합니다.
property오픈 그래프(og:title, og:image 등)를 설정하여 카카오톡이나 SNS에 링크 공유 시 뜨는 썸네일과 제목을 제어합니다.
 
<head>
    <!-- 브라우저 탭 아이콘 (파비콘) -->
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    
    <!-- 모바일 화면 비율 유지 (반응형 필수) -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- 검색 엔진 노출용 요약 설명 -->
    <meta name="description" content="Minstudio의 HTML 무료 강좌입니다. 쉽고 빠르게 웹을 배워보세요.">
    
    <!-- 오픈 그래프 (카카오톡, 페이스북 공유 시 미리보기) -->
    <meta property="og:title" content="Minstudio HTML 강좌">
    <meta property="og:description" content="초보자를 위한 완벽한 HTML 가이드">
    <meta property="og:image" content="https://example.com/thumbnail.jpg">
    <meta property="og:url" content="https://example.com/html-course">
</head>
메타 태그와 SEO (Meta Tags) | Minstudio