메타 태그 생성기

제목, 설명, Open Graph, Twitter 태그 생성 및 픽셀 단위 확인

브라우저에서 완전히 실행되어 텍스트가 업로드되지 않음

0 / 600px
0 / 920px

1200x630, 절대 URL, HTTPS

태그 생성을 위해 제목을 입력해

제목, 설명, 정규 URL, Open Graph, Twitter 태그가 생성돼 - 이스케이프 처리되어 바로 붙여넣기 가능해.

아직 중요한 메타 태그들

대부분 가이드가 제안하는 것보다 적어. 페이지에는 제목, 설명, 캐노니컬, 그리고 공유 시 링크가 제대로 표시되도록 충분한 Open Graph가 필요해. 나머지는 거의 다 검색 방식이 달랐던 시절 템플릿에서 물려받은 미신이야.

자리를 차지하는 것들

  • 제목 - 가장 강력한 페이지 내 관련 신호이자 사람들이 실제로 클릭하는 문구.
  • 설명 - 순위 요소는 아니야. 광고 문구로, 이미 순위에 있을 때 클릭을 유도하는 역할을 해.
  • 정규 URL - 검색엔진에 권위 있는 URL을 알려줘. 리다이렉트가 아닌 200 응답을 주는 URL을 가리켜야 해; 리다이렉트를 가리키는 정규 URL은 흔한 실수이자 비용이 발생할 수 있어.
  • og:image - 공유되는 링크와 Slack에서 깨져 보이는 링크의 차이야.

버려야 할 것들

  • 키워드 태그 - 2009년부터 Google에서 무시됨.
  • revisit-after, 작성자, 배포 - 어떤 검색엔진도 읽지 않아.
  • 중복된 Twitter 태그 - X는 Open Graph를 대체로 사용해. 단지 twitter:card 진짜로 무언가를 더해.

태그가 있으면, 잘려도 유지되는지 확인해봐 SERP 미리보기로 출시 전에.

자주 묻는 질문

Open Graph와 Twitter 태그 둘 다 필요할까?
대부분은 아니야. X는 Twitter 태그가 없으면 Open Graph를 사용해서 og:title과 og:description으로 충분해. 명시적으로 추가할 가치가 있는 태그는 twitter:card인데, 이 태그가 링크가 작은 썸네일인지 큰 이미지인지 결정해서 클릭률에 큰 영향을 줘.
og:image 크기는 어떻게 해야 할까?
1200x630 픽셀, 약 5MB 이하, HTTPS 절대 URL이어야 해. 상대 경로는 작동하지 않아: 카드를 가져가는 크롤러가 페이지 컨텍스트가 없기 때문이야. 중요한 내용은 가장자리에서 떨어뜨려야 플랫폼마다 다르게 자르는 걸 피할 수 있어.
내가 쓴 설명을 구글이 사용할까?
가끔 그래. 구글은 페이지 내용이 메타 설명보다 쿼리에 더 잘 답한다고 판단하면 설명을 다시 생성하는데, 긴 꼬리 키워드에서 주로 그래. 그래도 설명은 꼭 써야 해—브랜드 및 탐색 검색에서 클릭이 가장 중요하니까.
키워드 메타 태그를 추가하는 게 의미 있을까?
아니야. 구글은 2009년부터 키워드 메타 태그를 무시해 왔고 공개적으로도 밝혔어. 이 생성기는 일부러 키워드 태그를 만들지 않아. 만약 어떤 도구가 키워드 필드를 제공한다면, 그 도구의 조언이 최신인지 의심해 봐야 해.
왜 내 제목의 따옴표가 출력에서 이스케이프될까?
HTML 속성 안에 이스케이프되지 않은 큰따옴표가 있으면 조기 종료되어 태그가 잘려서 그래. 생성된 코드는 앰퍼샌드, 따옴표, 꺾쇠 괄호를 이스케이프해서 붙여넣은 코드가 유효한 HTML로 텍스트가 정확히 렌더링되도록 해.