메타데이터, SEO 및 소셜
두 명의 방문자가 페이지에 도착하는데, 둘 다 인간이 보는 방식으로 페이지를 본 적이 없습니다. 하나는 페이지를 나열할지 여부와 어떻게 설명할지 결정하는 검색 엔진입니다. 다른 하나는 누군가 링크를 공유할 때 나타나는 작은 미리보기 카드를 만드는 소셜 플랫폼입니다. 둘 다 화면의 보이는 콘텐츠가 아니라 <head>의 작은 태그 블록을 읽습니다. 이 장은 검색 결과, 브라우저 탭, 공유 링크에서 페이지가 올바르게 표시되도록 그 블록을 작성하는 것에 관한 것입니다.
제목과 설명
모든 페이지에는 <title>이 필요합니다. 이것은 브라우저 탭, 북마크, 검색 결과 목록에서 페이지가 나타날 때 클릭 가능한 제목으로 표시되는 텍스트입니다. head에 있으며, 한 줄입니다:
<title>초보자를 위한 천연 발효 빵: 첫 번째 식빵, 단계별 가이드</title>검색 결과의 제목 아래에는 보통 페이지를 설명하는 문장이 있습니다. 이것은 **메타 설명**에서 나오며, head에 넣는 또 다른 태그입니다:
<meta name="description" content="천연 발효 빵 레시피, 첫 번째 반죽 섞기부터 바삭한 황금 빵 껍질까지, 각 단계별 타이밍 포함." />책장 위의 책을 상상해보세요. 제목은 책등에 인쇄되어 있어서 찾을 수 있고, 설명은 뒷표지의 설명으로 책을 열지 여부를 결정하는 데 도움이 됩니다.
<title>은 당신의 탭 레이블이고 사람들이 검색 결과에서 클릭하는 제목이므로, 명확하게 만드세요. <meta name="description">은 아래의 설명입니다. 둘 다 head에 있고, 각 페이지에 고유한 쌍을 제공하는 것은 예상했던 것보다 훨씬 적게 노력하면서 얼마나 도움이 되는지에 놀랐습니다. 문자 집합과 뷰포트, 다시 보기
처음 HTML 페이지의 스켈레톤은 두 개의 메타 태그로 시작했는데, 이들은 빠르게 붙여 넣고 잊기 쉽습니다. 두 개 모두 콘텐츠가 나타나기 전에 페이지를 읽고 렌더링하는 방법을 변경하기 때문에 다시 보기 가치가 있습니다.
첫 번째 태그는 문자 인코딩입니다:
<meta charset="UTF-8" />브라우저에 문자가 어떤 알파벳으로 작성되었는지 알려주므로, 악센트가 있는 문자, 곡선 따옴표, 이모지가 이상한 기호로 바뀌는 대신 올바르게 표시됩니다. 항상 UTF-8을 사용하세요; 모든 언어와 모든 이모지를 포함합니다.
두 번째 태그는 **뷰포트**이며, 페이지를 휴대폰 화면에 맞춥니다:
<meta name="viewport" content="width=device-width, initial-scale=1" />없으면, 휴대폰은 페이지가 넓은 데스크톱을 위해 만들어졌다고 가정하고 전체를 축소하여 텍스트가 너무 작아서 읽을 수 없을 때까지. 있으면, 페이지가 장치의 너비와 일치합니다. 이것을 인쇄하는 실제 종이의 크기를 브라우저에 알려주는 것으로 생각하세요.
<meta charset="UTF-8">은 악센트가 있는 문자와 이모지가 깨진 텍스트로 바뀌는 것을 막으므로, 항상 포함시키세요. 뷰포트 줄은 페이지가 휴대폰에 맞게 만들어지고 축소되지 않게 합니다. 두 개의 태그를 한 번 복사하고 거의 다시 건드리지 않지만, 생략하는 것은 빠르게 나타납니다. Open Graph 및 소셜 카드
링크를 채팅이나 소셜 게시물에 붙여 넣으면, 종종 그림, 제목, 텍스트 한 줄이 있는 작은 미리보기 카드가 나타납니다. 그 카드는 플랫폼이 추측하는 것이 아닙니다. 페이지는 head에서 **Open Graph**라고 불리는 태그 세트를 사용하여 플랫폼에 표시할 그림과 단어를 전달합니다:
<meta property="og:title" content="초보자를 위한 천연 발효 빵" />
<meta property="og:description" content="첫 번째 식빵, 단계별로." />
<meta property="og:image" content="https://breadschool.example/loaf.jpg" />이들은 앞의 설명 태그가 name을 사용한 곳에서 property를 사용합니다. 그것이 Open Graph 태그가 취하는 형태입니다; 패턴을 복사하고 단어와 이미지 주소를 변경하세요. 누군가 그것을 공유할 때마다 준비가 되어 있는 페이지에 작은 미리보기를 패킹하는 것으로 생각하세요.
og:title, og:description, og:image. 이들은 name 대신 property를 사용하는데, 처음에는 이상해 보이지만 이것이 그들이 작성되는 방식입니다. 그것들을 설정하고 링크가 드러난 채로 표시되는 것을 멈춥니다. Favicon 및 기타 링크 태그
브라우저 탭의 페이지 제목 옆에 있는 작은 아이콘은 **favicon**입니다. 그것은 누군가가 다른 탭들 사이에서 당신의 탭을 발견하는 방법입니다. head에서 <link> 태그로 하나를 추가합니다:
<link rel="icon" href="/favicon.png" />rel="icon" 부분은 브라우저에 이 파일이 페이지의 아이콘임을 알려주고, href는 이미지를 가리킵니다. 약 32 x 32픽셀의 작은 정사각형 이미지로 충분합니다. 작은 터치이지만, 사이트가 완성된 것처럼 느껴집니다.
<link rel="icon">과 작은 정사각형 이미지로 추가됩니다. 그것은 완성된 느낌의 작은 것입니다. head의 <link> 태그는 페이지가 이것과 같은 추가 파일을 가리키는 방법입니다. 크롤링 기본 사항
검색 엔진은 웹 페이지를 방문하고, 읽고, 큰 목록에 추가하는 프로그램을 보냅니다. 그래서 사람들이 나중에 그것들을 찾을 수 있습니다. 그 프로그램은 **크롤러**이고, 대부분의 경우 당신이 그것을 하도록 하고 싶고 특별한 일을 하지 않습니다. 페이지가 검색에서 제외되기를 원한다면, 드래프트나 비공개 감사 페이지, 로봇 메타 태그로 말하세요:
<meta name="robots" content="noindex" />noindex는 "이 페이지를 검색 결과에 나열하지 마세요"를 의미합니다. 크롤러를 책장을 걸어 다니고 각 책을 카탈로그하는 사서로 생각해보세요; 이 태그는 이 하나를 건너뛰도록 요청하는 메모입니다.
<meta name="robots" content="noindex">를 추가하세요. 이것이 이 단계에서 당신이 도달할 주요 손잡이이므로, 나머지를 과하게 생각할 필요가 없습니다.