메타 태그와 SNS 공유 카드 이해하기
이 도구가 생성하는 것
메타 태그는 페이지의 <head> 안에 들어가는 눈에 보이지 않는 신호로, 검색 엔진과 SNS에 콘텐츠의 제목·설명·표시 방식을 알려 줍니다. 이 도구는 짧은 폼을 그 마크업으로 바꿔 줍니다. 제목, 설명, 키워드, 작성자, canonical URL을 입력하면 그에 맞는 <meta>·<link> 태그와 함께 Open Graph, Twitter Card 대응 태그까지 한 번에 만들어 냅니다. 생성된 HTML은 입력하는 대로 갱신되고, 검색 결과에서 어떻게 보일지 미리보기로 확인할 수 있습니다.
언제 쓰면 좋은가
정적 사이트, 랜딩 페이지, CMS 템플릿, 웹 페이지로 열리는 이메일처럼 head 영역을 직접 채워야 할 때 요긴합니다. 기존 페이지를 점검할 때도 쓸 수 있습니다. 넣으려는 제목과 설명을 붙여 넣으면 글자 수 카운터가 구글에서 잘릴 만한 부분을 알려 줍니다. 마케팅 담당자는 Slack, X, LinkedIn, Facebook에 링크를 붙였을 때 나타나는 이미지·헤드라인·요약을 각 플랫폼에 맡기지 않고 직접 정하기 위해 이 도구를 활용합니다.
예시: 제목, 설명, og: 태그
예를 들어 제목에 '수제 세라믹 머그컵', 한 문장짜리 설명, 이미지 URL을 입력했다고 합시다. 출력에는 <title>수제 세라믹 머그컵</title>, <meta name="description" content="...">, 그리고 canonical <link>가 들어갑니다. 여기에 더해 Open Graph용으로 og:title, og:description, og:image, og:type가, Twitter Card용으로 twitter:card, twitter:title, twitter:image가 함께 작성됩니다. OG 이미지를 1200x630 픽셀로 지정하면 대부분의 SNS가 보여 주는 큰 카드가 만들어집니다.
권장 길이와 예외 상황
검색 엔진이 잘리지 않고 전부 보여 주도록 제목은 약 60자, 설명은 160자 이내로 유지하세요. 한도를 넘으면 내장 카운터가 경고합니다. robots 디렉티브(index/noindex, follow/nofollow에 noarchive, nosnippet까지)는 크롤링과 캐시를 제어하기 위해 하나의 <meta name="robots"> 태그로 묶입니다. canonical URL은 중복 콘텐츠 문제를 막기 위해 해당 페이지의 대표 버전을 가리키도록 지정합니다. 마크업이 정리되면 블록 전체를 복사해 닫는 </head> 태그 바로 앞에 붙여 넣으면 됩니다.