웹 기본
메타태그(Meta Tag)
메타태그는 HTML에서 페이지 설명이나 문자 인코딩 등 문서에 관한 정보를 전달하는 태그입니다.
쉬운 설명
본문은 고쳤는데 검색 설명이나 공유 카드가 예전 내용으로 보일 때 메타태그를 살펴볼 수 있어요. meta 태그는 보통 HTML의 head 영역에서 페이지 설명, 문자 인코딩, 공유용 정보 등을 전달해요. 화면에 보이는 본문과는 별도로 작성될 수 있어요. 브라우저 탭의 제목은 같은 head 안의 title 태그가 담당하며, 엄밀히는 meta 태그와 다른 요소예요.
이런 상황에서 만나요
스터디 후기 글의 소개 문구를 바꿨는데 링크를 공유하면 이전 설명이 나오는 상황이라고 해 볼게요. 페이지에 출력된 검색용 설명과 공유용 설명이 각각 무엇인지 확인해요.
탭 제목과 검색·공유 설명은 서로 다른 항목이에요
<title>첫 AI 스터디 후기</title>
<meta name="description" content="AI로 신청 페이지를 만든 과정과 배운 점">
<meta property="og:description" content="신청 폼 오류를 해결한 첫 스터디 기록">
- 1title은 문서 제목을 정하는 별도 HTML 요소예요.
- 2검색 엔진이 설명을 만들 때 참고할 수 있는 정보예요.
- 3Open Graph 정보를 읽는 공유 서비스에 전달하는 설명이에요.
아래 예시처럼 description과 og:description은 별도로 설정할 수 있어요. CMS 입력칸을 고쳤더라도 실제 HTML에 새 값이 나왔는지 확인해요. HTML은 바뀌었는데 공유 카드가 그대로라면 공유 서비스가 저장한 이전 정보가 남았는지도 살펴봐요.
헷갈리기 쉬운 점
description에 쓴 문장이 검색에 그대로 나오나요?
항상 그렇지는 않아요. Google은 검색어와 본문 등을 바탕으로 설명을 만들고, 적합하다고 판단하면 meta description을 사용해요. 설정한 설명이 반드시 표시되거나 검색 순위가 올라간다고 보장하지 않아요.
모든 페이지에 같은 제목과 설명을 복사하면 어떤 글인지 구분하기 어려워요. 실제 본문을 요약하고, 공유 이미지 주소를 넣었다면 외부에서 이미지가 열리는지도 확인해요.
왜 알아야 할까요?
본문 제목, 브라우저 탭 제목, 검색 설명, 공유 설명 중 무엇을 고쳐야 하는지 구체적으로 말할 수 있어요. AI에게 페이지 내용을 바꾸라는 요청과 출력 메타데이터를 고치라는 요청도 구분할 수 있어요.
조금 더 자세히
meta는 charset으로 문자 인코딩을 지정하거나 name과 content로 설명 같은 정보를 제공할 수 있습니다. 공유 정보에는 Open Graph 방식의 property 속성을 사용하는 경우가 많습니다. 아래는 head의 일부이며 완성된 공유 카드 설정 전체가 아닙니다.
검색 제외를 위한 robots 메타태그도 있습니다. 예를 들어 noindex는 색인 제외를 요청하지만, 비밀번호처럼 페이지 접근을 제한하지는 않습니다. 어떤 메타태그를 읽고 사용하는지는 브라우저·검색 엔진·공유 서비스에 따라 다릅니다.
직접 사용할 때 확인해 보세요
- 수정하려는 표시 위치를 먼저 정한다
- 실제 HTML에 출력된 값을 확인한다
- 검색·공유 서비스의 반영 여부를 따로 확인한다
관계 지도
