메타 태그 만들기

메타 태그, 어느 줄이 어디에 쓰이는지

언제 쓰나요

새로 만든 홈페이지 주소를 단톡방에 올렸더니 제목 대신 주소만 덩그러니 보일 때, 검색 결과에 엉뚱한 첫 문장이 설명으로 붙어 나올 때, 행사 안내 페이지의 공유 카드에 사진이 안 뜰 때 이 도구로 <head>에 넣을 태그 묶음을 만들어요. 직접 HTML을 고칠 수 있는 정적 사이트나 랜딩 페이지에 특히 잘 맞아요.

사용 방법

1단계제목과 설명 쓰기

1. 1① 칸 이름 옆에 글자 수가 바로 나와요. 예시 제목은 24자예요.
2. 2② 설명은 줄바꿈과 연속 공백을 한 칸으로 줄인 뒤 세요. 예시 설명은 74자예요.

2단계주소·이미지·종류 정하기

1. 3③ 대표 이미지 주소를 넣으면 공유 카드 미리보기에 그 그림을 바로 불러와 보여 줘요.
2. 4④ 켜면 robots 줄이 추가돼 검색 노출과 링크 따라가기를 함께 막아요.

3단계미리보기와 안내

1. 5⑤ 검색 결과 미리보기 아래에는 공유 카드 미리보기가 이어져요. 이미지가 없으면 회색 칸에 ‘이미지 없음’이 떠요.
2. 6⑥ 길이나 형식에 문제가 있으면 빨간 안내가, 없으면 ‘알맞은 길이예요’가 나와요.

다 맞췄다면 코드 칸 아래 ‘코드 복사’를 눌러 <head> 안에 붙여요. 이미 있는 charset·viewport·title 줄과 겹치면 하나만 남기세요.

만들어지는 줄과 판단 기준

코드는 세 덩어리로 나뉘어요. 첫 덩어리는 검색 엔진이, 둘째 덩어리(og:)는 메신저와 SNS가 공유 카드를 만들 때, 셋째 덩어리(twitter:)는 X가 읽어요. 같은 제목과 설명이 세 곳에 반복해 들어가는 이유예요.

글자 수는 한글·영문·공백을 모두 한 자로 세요. 검색 결과 미리보기는 제목 40자, 설명 120자를 넘는 부분을 …으로 잘라서 보여 줘요. 실제 서비스가 자르는 위치는 화면 폭에 따라 달라 이 미리보기와 똑같지는 않아요.

이미지를 넣으면 X 카드 종류가 큰 이미지형(summary_large_image)으로, 비우면 작은 요약형(summary)으로 자동으로 바뀌어요.

도움말공유 카드 미리보기에 이미지가 보여도 실제 메신저는 그 주소를 직접 다시 받아 가요. 로그인해야 열리는 주소나 내 컴퓨터 파일 경로는 쓰지 말고, 누구나 열 수 있는 공개 주소를 넣으세요.

주의할 점

• 이미지 크기 줄은 고정값 — og:image:width·height는 넣은 그림과 상관없이 항상 1200과 630으로 적혀요. 다른 크기 그림을 쓴다면 두 숫자를 실제 크기로 고쳐 주세요.
• 주소의 & 기호 — 따옴표와 &, <, >는 HTML 안전 문자로 바꿔 넣어요. 코드에 &amp;가 보이는 건 정상이에요.
• 종류 선택 — 기본은 website예요. 블로그 글이면 article, 쇼핑몰 상품이면 product로 바꾸면 og:type 줄만 달라져요.

• 설명 칸의 줄바꿈 — 여러 줄로 써도 코드에는 한 줄로 이어 붙여 들어가요.

더 궁금한 점