메타 태그 생성기

페이지의 제목, 설명, 표준 링크, Open Graph 태그와 X 카드 태그를 만듭니다.

쓰이는 태그

페이지에는 제목, 설명, 표준 URL, Open Graph 태그, X 카드가 필요합니다. 이 페이지는 그 태그를 쓰고, 제목과 설명의 글자 수를 셉니다.

사용 방법

  1. 제목과 설명을 채웁니다. 글자 수는 각 필드 옆에 있고, 입력하는 즉시 갱신됩니다.
  2. 표준 URL, 이미지 URL, 이미지 대체 텍스트, 사이트 이름, og:type, og:locale, X 카드, X 사이트는 선택입니다. og:type은 website에서 시작합니다. X 카드는 summary_large_image에서 시작합니다.
  3. 변환은 태그를 새로 고칩니다. 예제 보기는 제목을 Ada Lovelace notes, 설명을 Short notes on the analytical engine, with a portrait and a canonical page, 표준 URL을 https://example.com/ada, 이미지 URL을 https://example.com/ada.jpg, 대체 텍스트를 Portrait of Ada, 사이트를 Example, og:type을 article, og:locale을 en_US, 카드를 summary_large_image, X 사이트를 @example로 둡니다.
  4. 그 결과에는 title 요소, name="description", rel="canonical", og:title, og:description, og:url, og:image, og:image:alt, og:site_name, og:type의 content="article", og:locale의 content="en_US", twitter:card의 content="summary_large_image", twitter:title, twitter:description, twitter:image, twitter:site의 content="@example"이 들어 있습니다.
  5. 모두 지우기는 필드를 비우고, og:type을 website로, 카드를 summary_large_image로 되돌립니다. 결과 복사는 태그를 복사합니다.

글자 수와 빈 필드

제목 글자 수와 설명 글자 수는 항상 보입니다. 60자를 넘으면 제목 줄이 경고합니다. 160자를 넘으면 설명 줄이 경고합니다. 태그는 그대로 쓰입니다.

빈 선택 필드는 빠집니다. 텍스트 안의 따옴표는 이스케이프됩니다. og:type은 website 또는 article입니다. X 카드 값은 summary 또는 summary_large_image입니다.

쓰는 곳

  • 기사의 head 태그 초안을 잡습니다.
  • 게시하기 전에 제목이 60자를 넘었는지 봅니다.
  • 카드를 summary와 summary_large_image 사이에서 바꿉니다.

질문

긴 제목이 여기서 잘립니까?

경고는 글자 수입니다. title 요소에는 전문이 들어갑니다.

X 카드인데 twitter:인 이유는 무엇입니까?

페이지 head의 카드 meta 이름은 여전히 twitter:card입니다.