Week 6 · 완성도 다지기와 배포 Day 38 / 42

SEO 기초 — 검색엔진과 소셜 공유 최적화

아무리 잘 만든 사이트도, 찾을 수 없으면 존재하지 않는 것과 같습니다

10초 핵심 요약

01

title과 description — 검색 결과의 얼굴

검색 결과 목록에서 파란 제목과 그 아래 짧은 설명, 이 두 줄이 클릭 여부를 결정합니다. 각각 <title> 태그와 <meta name="description">에서 나옵니다. Astro에서는 페이지마다 다른 title을 props로 넘겨 동적으로 채웁니다(Day 8의 props 문법 그대로). 이렇게 검색 결과에서 잘 노출되도록 다듬는 작업 전체를 SEO라고 부릅니다.

<title>{title} | 웹디자인 실전 42일</title>
<meta name="description" content={summary}>
흔한 실수 — 모든 페이지의 title/description을 똑같이 두면, 검색엔진 입장에선 페이지가 서로 구별되지 않습니다. Day 9의 post 데이터를 그대로 재사용해 페이지마다 다르게 채우세요.
02

Open Graph — 링크 공유 시 미리보기

카카오톡이나 메신저에 링크를 붙여넣었을 때 뜨는 이미지+제목+설명 카드, 그게 Open Graph(OG) 태그로 만들어집니다.

<meta property="og:title" content={title}>
<meta property="og:description" content={summary}>
<meta property="og:image" content={thumbnail}>

Day 9~11에서 만든 포스트 카드의 title/summary/thumbnail 값을 그대로 여기 재사용하면 됩니다. 새로 만들 데이터가 아니라, 이미 있는 데이터를 다른 자리에 한 번 더 꽂는 작업입니다.

03

sitemap.xml과 robots.txt

sitemap.xml

사이트의 모든 페이지 주소를 목록으로 정리한 파일. 검색엔진이 빠짐없이 찾아오게 도움

robots.txt

검색엔진 크롤러에게 "이 폴더는 들어오지 마" 등을 알려주는 규칙 파일

Astro는 @astrojs/sitemap 같은 공식 통합(integration)을 설치하면 빌드할 때 sitemap.xml을 자동으로 만들어줍니다 — 42개 Day 파일 주소를 손으로 나열할 필요가 없습니다.
04

오늘의 실습 + AI 프롬프트

1사이트 아무 페이지나 열어 개발자 도구로 title/description이 있는지 확인합니다.
2Open Graph 태그를 추가한 뒤, 카카오톡 링크 미리보기 등으로 실제로 카드가 뜨는지 확인합니다.
AI에게 이렇게 지시해 보세요: "이 Astro 페이지에 title, meta description, Open Graph(og:title/description/image) 태그를 props 기반으로 추가해줘."
05

Day 38 완료 체크리스트

title/description이 페이지마다 다르게 채워지는 이유를 설명할 수 있다.
Open Graph 태그로 링크 공유 미리보기가 만들어지는 원리를 이해했다.
sitemap.xml과 robots.txt의 역할 차이를 설명할 수 있다.
스스로 설명해보기 — 모든 페이지의 title/description을 똑같이 두면 안 되는 이유를 설명할 수 있나요?

오늘의 용어

SEO
검색엔진 최적화. 검색 결과에서 잘 노출되도록 다듬는 작업
Open Graph
링크 공유 시 미리보기 카드를 만드는 메타 태그 규격
sitemap.xml
사이트의 전체 페이지 주소를 정리해 검색엔진에게 알려주는 파일