Ch.8 시맨틱 HTML + 멀티미디어
메타 태그와 SEO 기초
meta charset, viewport 태그의 역할을 설명할 수 있다description, og 태그로 SEO 기본 설정을 할 수 있다title 태그와 meta 태그의 차이를 이해한다
구글에 내 사이트가 왜 안 뜰까?
검색 결과에 제목과 설명이 예쁘게 나오는 사이트가 있고, 아무 정보도 없는 사이트가 있습니다. 차이는 <head> 안의 메타 태그입니다.
검색 엔진에게 내 페이지 정보를 어떻게 알려줄까?
<meta> 태그 — 사용자에게 보이지 않지만 검색 엔진과 브라우저에게 중요한 정보를 제공합니다.
article
핵심 내용
모든 HTML 문서에 반드시 들어가야 할 메타 태그
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- 1. 문자 인코딩: 한글 깨짐 방지 -->
<meta charset="UTF-8">
<!-- 2. 뷰포트: 모바일 반응형 필수 -->
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<!-- 3. 페이지 제목 (탭, 검색 결과) -->
<title>짓의 개발 블로그</title>
</head>검색 결과와 SNS 공유 시 보이는 정보를 설정합니다
<head>
<!-- SEO: 검색 결과 설명문 -->
<meta name="description"
content="HTML, CSS, JavaScript를
쉽게 배우는 개발 블로그">
<!-- Open Graph: SNS 공유 시 미리보기 -->
<meta property="og:title"
content="짓의 개발 블로그">
<meta property="og:description"
content="웹 개발 입문자를 위한 튜토리얼">
<meta property="og:image"
content="https://example.com/og.png">
<meta property="og:url"
content="https://example.com">
</head>description: 구글 검색 결과 아래 설명문 (150자 권장)
og:title: 카카오톡/페이스북 공유 시 제목
og:image: SNS 공유 시 썸네일 이미지
og:description: SNS 공유 시 설명문
description은 구글 검색 결과에 직접 표시됩니다. og: 태그들은 카카오톡, 슬랙, 페이스북 등에서 링크 공유 시 미리보기 카드에 사용됩니다.
SEO에 최적화된 head 태그를 완성해봅시다
모바일에서 페이지가 올바르게 표시되도록 하는 메타 태그는?
og:image 태그를 설정하면 구글 검색 결과에 이미지가 표시된다
다음 중 CSS에서 hover 효과를 적용하는 올바른 문법은?
시맨틱 HTML + SEO 완성!
key
핵심 용어
🔤
charset=UTF-8
한글 등 다국어 문자가 깨지지 않도록 설정
📱
viewport
모바일에서 확대/축소 없이 올바르게 표시
📑
<title>
브라우저 탭 + 검색 결과 제목으로 표시
edit_note
정리 노트
메타 태그와 SEO 기초
주요 메타 태그
- charset
- 문자 인코딩 지정 — UTF-8이 표준
- viewport
- 모바일 반응형 필수 — width=device-width 설정
- description
- 검색 결과에 표시되는 페이지 설명
- og:title/image
- SNS 공유 시 보이는 미리보기 정보
SEO 기본 원칙
- title 태그
- 브라우저 탭에 표시되는 페이지 제목 (60자 이내)
- 시맨틱 구조
- h1~h6 계층 + 시맨틱 태그가 검색 순위에 영향
★
모든 페이지에 title, description, viewport 메타 태그는 반드시 포함하세요.
check_circle
핵심 정리
- 1charset=UTF-8 (한글), viewport (모바일), title (탭 제목)
- 2description = 구글 검색 결과 설명문
- 3og: 태그 = SNS 공유 시 미리보기 카드 설정
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작