Learn HTML & CSS메타데이터, SEO, 그리고 소셜
두 종류의 방문자가 여러분의 페이지를 사람처럼 눈으로 보지 않고 찾아옵니다. 하나는 이 페이지를 목록에 올릴지, 어떻게 소개할지 결정하는 검색 엔진입니다. 다른 하나는 누군가 링크를 공유했을 때 나타나는 작은 미리보기 카드를 만드는 소셜 플랫폼입니다. 둘 다 화면에 보이는 내용이 아니라 <head> 안의 작은 태그 블록을 읽습니다. 이 장에서는 페이지가 검색 결과, 브라우저 탭, 공유된 링크에서 제대로 나타나도록 이 태그 블록을 작성하는 방법을 다룹니다.
title과 description
모든 페이지에는 <title>이 필요합니다. 이것은 브라우저 탭과 북마크에 표시되는 텍스트이며, 페이지가 검색 결과 목록에 나타날 때 클릭할 수 있는 제목이기도 합니다. head 안에 있으며, 한 줄로 짧게 씁니다.
<title>Sourdough for beginners: your first loaf, step by step</title>검색 결과에서 이 제목 아래에는 보통 페이지를 설명하는 문장이 함께 표시됩니다. 이는 head에 넣는 또 다른 태그인 **meta description**에서 나옵니다.
<meta name="description" content="Simple sourdough recipes, from mixing your first dough to a crisp golden crust, with timings for each step." />책장에 놓인 책을 떠올려 보세요. title은 책등에 인쇄되어 있어서 그것으로 책을 찾아낼 수 있고, description은 책 표지 뒤쪽에 적힌 소개 문구로, 책을 펼쳐볼지 결정하는 데 도움을 줍니다.
<title>은 탭 라벨이자 사람들이 검색 결과에서 클릭하는 제목이니 명확하게 작성하세요. <meta name="description">은 그 아래에 붙는 소개 문구입니다. 둘 다 head 안에 있고, 페이지마다 각자의 title과 description을 주는 일은 그 효과에 비해 생각보다 훨씬 덜 힘들었습니다. charset과 viewport, 다시 살펴보기
Your first HTML page의 골격에서는 붙여넣고 나면 금방 잊어버리기 쉬운 두 개의 meta 태그로 시작했습니다. 이 둘은 다시 살펴볼 만한데, 둘 다 어떤 콘텐츠가 나타나기도 전에 페이지가 읽히고 렌더링되는 방식을 바꾸기 때문입니다.
첫 번째 태그는 문자 인코딩입니다.
<meta charset="UTF-8" />이 태그는 글자들이 어떤 문자 체계로 쓰여 있는지를 브라우저에 알려주어, 발음 구별 기호가 붙은 문자나 곡선 인용부호, 이모지가 이상한 기호로 바뀌지 않고 제대로 표시되게 합니다. 항상 UTF-8을 사용하세요. 모든 언어와 모든 이모지를 포함합니다.
두 번째 태그는 **viewport**로, 페이지를 휴대폰 화면에 맞춰줍니다.
<meta name="viewport" content="width=device-width, initial-scale=1" />이 태그가 없으면 휴대폰은 페이지가 넓은 데스크톱 화면용으로 만들어졌다고 가정하고 텍스트를 읽기 힘들 정도로 작아질 때까지 전체를 축소해 버립니다. 이 태그가 있으면 페이지가 기기의 너비에 맞춰집니다. 인쇄할 종이의 실제 크기를 브라우저에 알려주는 것이라고 생각하면 됩니다.
<meta charset="UTF-8">은 발음 구별 기호나 이모지가 알아볼 수 없는 문자로 바뀌는 것을 막아주니 항상 넣어두세요. viewport 줄은 페이지가 작은 데스크톱처럼 축소되지 않고 휴대폰에 맞게 표시되도록 합니다. 한 번 복사해두면 다시 손댈 일이 거의 없는 두 태그지만, 빼먹으면 바로 눈에 띕니다. Open Graph와 소셜 카드
채팅이나 소셜 게시물에 링크를 붙여넣으면 사진, 제목, 한 줄짜리 설명이 담긴 작은 미리보기 카드가 종종 나타납니다. 이 카드는 플랫폼이 그냥 추측해서 만드는 것이 아닙니다. 페이지가 head에 있는 **Open Graph**라는 태그 모음을 통해 어떤 사진과 문구를 보여줄지 직접 건네줍니다.
<meta property="og:title" content="Sourdough for beginners" />
<meta property="og:description" content="Your first loaf, step by step." />
<meta property="og:image" content="https://breadschool.example/loaf.jpg" />앞서 description 태그는 name을 썼는데, 여기서는 property를 쓴다는 점을 눈여겨보세요. 이것이 Open Graph 태그의 형식이니, 이 패턴을 그대로 복사해서 문구와 이미지 주소만 바꾸면 됩니다. 누군가 공유할 순간을 위해 페이지 안에 작은 미리보기를 미리 담아두는 것이라고 생각하면 됩니다.
og:title, og:description, og:image에서 나옵니다. 이들은 name 대신 property를 쓰는데, 처음엔 어색해 보이지만 원래 그렇게 쓰는 것입니다. 이 태그들을 넣으면 링크가 더 이상 밋밋하게 보이지 않습니다. Favicon과 그 밖의 link 태그
페이지 제목 옆, 브라우저 탭에 있는 작은 아이콘이 **favicon**입니다. 여러분의 탭을 여러 개의 다른 탭 사이에서 알아볼 수 있게 해주는 역할을 합니다. head에 <link> 태그를 넣어서 추가합니다.
<link rel="icon" href="/favicon.png" />rel="icon" 부분은 이 파일이 페이지의 아이콘이라고 브라우저에 알려주고, href는 그 이미지를 가리킵니다. 대략 32x32픽셀 정도의 작은 정사각형 이미지면 충분합니다. 작은 요소지만 사이트가 완성된 느낌을 줍니다.
<link rel="icon">과 작은 정사각형 이미지로 추가합니다. 작은 요소지만 사이트가 완성된 느낌을 줍니다. head 안의 <link> 태그는 이런 추가 파일을 페이지에 연결하는 방법입니다. 크롤링 가능성의 기본
검색 엔진은 웹 페이지를 방문해서 읽고, 나중에 사람들이 찾을 수 있도록 큰 목록에 추가하는 프로그램을 내보냅니다. 이 프로그램이 **크롤러**이며, 대부분의 경우 크롤러가 제 할 일을 하도록 두고 여러분은 특별히 아무것도 하지 않아도 됩니다. 검색에서 빼두고 싶은 페이지, 예를 들어 초안이나 비공개 감사 페이지가 있다면 robots meta 태그로 그렇게 표시합니다.
<meta name="robots" content="noindex" />noindex는 "이 페이지를 검색 결과에 올리지 말아주세요"라는 뜻입니다. 크롤러를 서가를 돌며 책을 하나씩 목록에 정리하는 사서라고 생각해 보세요. 이 태그는 이 책만은 건너뛰어 달라고 사서에게 남기는 메모 같은 것입니다.
<meta name="robots" content="noindex">를 추가하세요. 지금 단계에서는 이것이 가장 자주 손댈 다이얼이니, 나머지는 아직 너무 깊이 고민하지 않아도 됩니다.