Meta Tag 생성기

GeekFormat 정보

입력 매개변수

페이지 제목30 자

메타 설명87 자

키워드

작성자

정규 URL (Canonical)

사이트 이름 (og:site_name)

OG 이미지 URL

OG 유형

Robots

Twitter Card 유형

Twitter @계정

테마 색상

생성된 태그

<!-- Primary Meta Tags -->
<title>GeekFormat - Developer Toolbox</title>
<meta name="title" content="GeekFormat - Developer Toolbox">
<meta name="description" content="One page, one utility. Fast and privacy-friendly tools for developers and growth teams.">
<meta name="keywords" content="online tools,developer tools,pdf tools,network tools">
<meta name="robots" content="index,follow">
<link rel="canonical" href="https://geekformat.com/tools">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://geekformat.com/tools">
<meta property="og:title" content="GeekFormat - Developer Toolbox">
<meta property="og:description" content="One page, one utility. Fast and privacy-friendly tools for developers and growth teams.">
<meta property="og:image" content="https://geekformat.com/og-cover.png">
<meta property="og:site_name" content="GeekFormat">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="GeekFormat - Developer Toolbox">
<meta name="twitter:description" content="One page, one utility. Fast and privacy-friendly tools for developers and growth teams.">
<meta name="twitter:image" content="https://geekformat.com/og-cover.png">

브라우저에서 동작하는 Meta 태그 생성 도구로 title, description, keywords, canonical, Open Graph, Twitter Card, robots 등 태그 생성을 지원하고 HTML 엔티티 자동 이스케이프, 실시간 글자 수 가이드(색상 상태 표시), 원클릭 복사와 다운로드 기능을 제공합니다.

사용 사례

신규 사이트 런칭 전 메인페이지, 목록페이지, 상세페이지의 완전한 Meta 태그를 일괄 생성하여 SEO 기본 설정을 신속하게 완료
블로그 글 발행 전 article 타입 Open Graph 태그와 summary_large_image 타입 Twitter Card를 설정하여 소셜 플랫폼 공유 효과 향상
이커머스 제품 페이지에 product 타입 og:type을 설정하고 og:image, og:price:amount 등 구조화 정보를 설정하여 소셜 플랫폼 상품 표시 최적화
사이트 개편 또는 도메인 변경 후 canonical 태그를 재생성하여 URL을 통일하고 중복 콘텐츠로 인한 권한 분산 방지
모바일 웹페이지에 theme-color 테마 컬러를 설정하여 Chrome, Safari 모바일 주소창을 브랜드 컬러와 통일
Next.js, Nuxt.js, Gatsby 등 SSR/SSG 프레임워크로 개발할 때 head 설정에 필요한 완전한 Meta 태그 코드를 신속하게 생성
WordPress, Shopify 등 CMS 시스템에서 커스텀 페이지 템플릿에 Meta 태그를 수동 설정하여 SEO 플러그인에 의존하지 않음
사이트 인덱싱 문제 트러블슈팅 시 올바른 robots meta 태그 조합(예: 스테이징 환경용 noindex,nofollow)을 신속하게 생성
소셜미디어 운영자가 캠페인 랜딩페이지 공유 카드를 설정하여 Facebook, Twitter/X, LinkedIn, WhatsApp, Slack, Discord 공유 시 미리보기가 정확히 표시되도록 보장
프론트엔드 개발자가 HTML 페이지 템플릿 작성 시 Meta 태그의 엔티티 이스케이프 처리를 자동화하여 특수문자로 인한 HTML 구문 오류 방지

이용 방법

「기본 SEO 태그」 영역에서 페이지 title(제목, 권장 50-60자), meta description(설명, 권장 120-160자), keywords(키워드, 쉼표로 구분), canonical URL(정규 링크), author(저자)를 입력
「robots 크롤러 디렉티브」 영역에서 적절한 인덱싱과 추적 규칙 선택: index/noindex(인덱싱 여부), follow/nofollow(링크 추적 여부), noarchive, nosnippet 등 추가 옵션 체크 가능
「테마 컬러 설정」 영역에서 theme-color 16진수 색상 값을 입력 또는 선택, 모바일 브라우저 주소창 컬러링에 사용
「Open Graph 태그」 영역으로 전환하여 og:type(website/article/product/profile 중 1개 선택)를 선택하고 og:title, og:description, og:image(공유 이미지 URL, 권장 1200×630 픽셀), og:url, og:site_name, og:locale 입력
「Twitter Card 태그」 영역으로 전환하여 twitter:card 유형(summary/summary_large_image/app/player 중 1개 선택)을 선택하고 twitter:site @계정, twitter:title, twitter:description, twitter:image 입력
모든 입력 중 우측 실시간 미리보기 영역과 글자 수 카운트 색상 표시 확인: 녹색은 최적 길이, 주황색은 경계 근처, 회색은 너무 짧거나 길어 조정 필요
태그가 정확한지 확인한 후「클립보드에 복사」 버튼을 클릭하여 전체 코드를 복사해 HTML head 영역에 붙여넣거나,「HTML 파일 다운로드」를 클릭하여 meta-tags.html로 저장

주요 기능

HTML 엔티티 자동 이스케이프: &, <, >, ", ' 5개 특수문자를 안전하게 이스케이프하여 생성된 태그의 HTML 구문 오류 방지
title 글자 수 스마트 표시: 50-60자 범위 내에서 녹색(최적), 범위 초과 또는 부족 시 주황/회색 상태 표시, 실시간 글자 수 카운트
meta description 글자 수 스마트 표시: 120-160자 범위 내에서 녹색(최적 표시 구간), 초과 또는 너무 짧을 때 실시간 색상 상태 변화
4가지 og:type 옵션 지원: website(일반 사이트), article(글/블로그), product(제품 페이지), profile(프로필 페이지), 다양한 페이지 유형에 매칭
4가지 twitter:card 유형 지원: summary(작은 이미지 요약), summary_large_image(큰 이미지 요약), app(앱 카드), player(동영상/플레이어 카드)
robots 디렉티브 조합 설정: index/noindex, follow/nofollow, noarchive, nosnippet, noimageindex 등 다양한 크롤러 디렉티브를 자유롭게 조합 가능
author 메타 태그: content-author, article:author 등 저자 표시 태그 설정 지원, 블로그와 뉴스 사이트에 적합
theme-color 테마 컬러 설정: 모바일 브라우저 주소창 테마 컬러 설정, 컬러 피커와 색상 값 입력 제공
og:site_name 사이트명 설정: Open Graph 프로토콜의 사이트명 필드를 전용 설정, 소셜 공유 시 정확한 사이트명 표시
twitter:site @계정 설정: Twitter/X 플랫폼 공식 @handle 계정 입력 지원, 공유 카드와 공식 계정 연동
3섹션 구조화 출력: Primary SEO, Open Graph, Twitter Card 3개 명확한 섹션으로 생성 결과 표시, 구조가 한눈에 파악
클립보드에 원클릭 복사: 생성된 코드를 수동 선택 없이 원클릭 복사, 다양한 브라우저 환경 지원
meta-tags.html로 다운로드: 생성된 태그를 완전한 HTML 파일로 다운로드 가능, 저장이나 프로젝트 직접 가져오기에 편리
실시간 생성 및 미리보기: 입력 내용으로 즉시 태그 코드 생성, SERP 검색 결과 표시와 소셜 공유 카드 스타일을 동기화 미리보기

자주 묻는 질문

Meta Tag 생성기로 생성한 코드를 그대로 사이트에 사용할 수 있나요? 수정이 필요한가요?

그대로 복사하여 사용할 수 있습니다. 생성되는 코드는 표준 형식의 HTML Meta 태그이며 HTML 엔티티 이스케이프도 자동 처리되어 있습니다. 페이지의 <head>와 </head> 사이에 붙여넣기만 하면 사용 가능합니다. 입력한 URL(canonical, og:image, og:url, twitter:image)이 실제 온라인 주소인지 확인하세요. Next.js, Nuxt.js, React Helmet, Vue Meta 등 프레임워크에서는 JSX/Vue 템플릿 구문에 맞춰 약간의 조정이 필요할 수 있습니다.

왜 og:image 이미지 입력이 필수인가요? 이미지가 없으면 어떻게 되나요?

og:image는 소셜 공유 카드의 시각적 효과와 클릭률에 직접 영향을 미칩니다. og:image가 없는 링크는 이미지 없는 텍스트 링크로 표시되거나 플랫폼이 페이지의 작은 이미지(로고, 아바타, 광고 이미지 등)를 무작위로 캡처하여 표시하므로 표시 효과가 매우 나빠집니다. 클릭률은 올바른 미리보기 이미지가 있는 공유보다 50% 이상 낮아지는 것이 일반적입니다. og:image 권장 사이즈는 1200×630픽셀(1.91:1 비율), 공개 접근 가능한 절대 URL, 5MB 이하입니다.

Open Graph와 Twitter Card 태그를 모두 설정해야 하나요? OG만 설정해도 괜찮나요?

Twitter/X는 Open Graph 태그를 폴백으로 읽지만 전용 Twitter Card 설정에는 이점이 있습니다: ①가장 적합한 twitter:card 타입을 선택할 수 있음(특히 summary_large_image 큰 이미지 타입), ②twitter:site로 공식 Twitter 계정을 연동하여 팔로우 전환을 늘릴 수 있음, ③Twitter용으로 제목과 설명 길이를 개별 최적화할 수 있음. 모두 설정하는 것을 권장합니다.

title이나 meta description이 권장 글자 수를 초과하면 어떻게 되나요? 페널티가 있나요?

글자 수 초과로 인한 검색엔진 페널티는 없지만 잘립니다. Google 검색 결과에서 title이 약 600픽셀 너비를 초과하면 줄임표로 잘리고, meta description이 약 920픽셀 너비를 초과해도 잘립니다. 너무 짧으면 표시 공간을 낭비하여 페이지 가치를 충분히 전달하지 못하고 클릭을 유도하지 못합니다. 이는 픽셀 너비 제한이며 전각문자, 대문자, W/M 등 너비가 넓은 문자, emoji는 더 많은 너비를 차지합니다.

HTML 엔티티 이스케이프는 무슨 뜻인가요? 왜 도구가 자동으로 처리하나요?

HTML에는 일부 문자에 특수한 구문 의미가 있어 속성값에 직접 쓰면 HTML 구조가 깨집니다: 큰따옴표 "는 속성값 종료 기호, &는 엔티티 이스케이프 시작 기호, <와 >는 태그 시작/종료 기호입니다. 이들 문자는 올바르게 표시하기 위해 엔티티 형식으로 작성해야 합니다: &→&, <→<, >→>, "→", '→'. 특수문자를 포함하는 title이나 description을 이스케이프 없이 작성하면 HTML 구문 오류가 발생하여 후속 태그가 모두 무효화될 수 있으므로 본 도구는 이 이스케이프를 자동 처리합니다.

왜 Facebook/Twitter 크롤러가 React/Vue로 작성한 페이지의 Meta 태그를 가져오지 못하나요?

React, Vue, Angular 등 프레임워크는 기본적으로 클라이언트 사이드 렌더링(CSR)으로 HTML 소스가 비어 있거나 컨테이너 div만 있으며 Meta 태그는 브라우저가 JavaScript를 실행한 후 DOM에 동적 삽입됩니다. 하지만 facebookexternalhit, Twitterbot, LinkedInBot 등 대부분의 소셜 크롤러는 JavaScript를 실행하지 않거나(실행 능력이 매우 제한적임) 크롤링하는 원본 HTML에 Meta 태그가 없어 공유 카드를 생성할 수 없습니다. 해결책: ①Next.js, Nuxt.js, Gatsby, Astro 등 SSR/SSG 프레임워크 사용, ②prerender.io, Rendertron 등 프리렌더링 서비스 사용, ③전용 OG 이미지 생성 서비스 활용.

동일 페이지의 canonical과 og:url은 동일한 것을 입력해야 하나요?

예, 일치시켜야 합니다. canonical은 검색엔진에 우선 URL을 알리고 og:url은 소셜 플랫폼에 콘텐츠의 고유 URL을 알려 좋아요·댓글·공유 수를 집계합니다. 둘 다 동일한 URL을 가리키는 것이 모범 사례이며 권한 분산과 소셜 카운트 단편화를 피할 수 있습니다. 둘 다 완전한 절대 URL(https://, 도메인, 완전한 경로 포함)이어야 하며 상대경로는 사용할 수 없습니다. UTM 파라미터 등이 있는 URL은 파라미터 없는 깨끗한 URL에 canonical과 og:url을 모두 설정하세요.

noindex 페이지의 링크도 크롤러가 크롤링하나요? 권한은 전달되나요?

noindex의 의미는 「이 페이지를 인덱싱하지 않음」이며 「크롤링하지 않음」도 「링크를 추적하지 않음」도 아닙니다. 크롤러는 noindex 페이지를 크롤링하고(noindex 태그를 확인하기 위해 크롤링해야 함), robots meta에 follow(기본값)가 설정되어 있으면 페이지 내 링크를 계속 크롤링합니다. 다만 권한 전달에 관해서는 Google 공식 입장에서 noindex 페이지는 결국 인덱스에서 제거되며 페이지 내 링크 가중치가 정상적으로 전달되지 않습니다(페이지 자체가 인덱싱되지 않기 때문).

theme-color는 어떤 브라우저에서 유효한가요? iOS Safari도 지원하나요?

theme-color 현재 지원 현황: Android 버전 Chrome/Firefox/Edge/Brave 등 Chromium 계열 브라우저는 오래전부터 지원하여 효과가 가장 명확합니다. Safari는 iOS 15와 macOS Monterey부터 theme-color를 지원하지만 페이지 배경색에 따라 자동 조정되는 점과 media 속성으로 다크모드/라이트모드별 색상 설정도 가능합니다. 데스크톱 Chrome도 일부 버전부터 탭바 등에서 theme-color를 적용합니다. IE와 구형 브라우저는 지원하지 않지만 미지원이라도 테마 컬러 효과가 없을 뿐 기능에는 영향을 미치지 않습니다.

왜 Google 검색 결과에 내가 작성한 description과 다른 설명이 표시될 때가 있나요?

Google은 작성된 meta description을 100% 사용한다고 보장하지 않습니다. 작성된 description이 사용자 검색 쿼리와 충분히 관련 없거나 description 품질이 낮다고(키워드 스태핑, 사이트 전체 동일, 내용 불일치 등) 판단하면 Google은 페이지 본문에서 검색어와 가장 관련 있다고 판단한 스니펫을 추출하여 검색 결과에 표시합니다. 이는 Google의 정상 동작이며 버그가 아닙니다. description이 사용될 확률을 높이려면: ①모든 페이지에 고유하고 내용을 정확히 설명하는 description 작성, ②핵심 키워드를 자연스럽게 포함하고 스태핑하지 않음, ③길이를 적절한 범위로 제어, ④description 내용이 페이지 본문에 반영되도록 확인.

태그 설정 후 올바르게 반영되었는지 확인하려면 어떻게 해야 하나요? 확인 도구가 있나요?

Meta 태그 확인 절차와 도구: ①브라우저 「페이지 소스 보기」로 원본 HTML 소스(Elements 패널 아님)에서 title, description, og: 태그가 존재하고 내용이 정확한지 검색. ②Facebook Sharing Debugger로 OG 태그 검증 및 캐시 갱신. ③Twitter Card Validator로 Twitter Card 검증. ④Google Rich Results Test로 기본 태그 확인. ⑤Google Search Console 「URL 검사」로 Google이 실제 크롤링한 페이지와 인덱싱 상태 확인. ⑥로컬 테스트에서는 User-Agent 전환으로 소셜 크롤러를 시뮬레이션하거나 curl로 Facebook UA를 지정하여 HTML을 가져와 확인할 수 있습니다.

각 페이지에 개별 Meta 태그를 설정해야 하나요? 사이트 전체에서 동일한 태그를 사용해도 괜찮나요?

절대 안 됩니다! 모든 페이지에 고유한 title과 meta description이 필요합니다. 사이트 전체에서 동일한 title과 description을 사용하면: ①검색엔진이 각 페이지 내용 주제를 구분하지 못해 올바르게 랭킹할 수 없음, ②검색 결과에서 모든 페이지가 동일한 제목과 설명을 표시하여 사용자가 어떤 것을 클릭해야 할지 구분하지 못해 CTR이 극도로 낮아짐, ③저품질 사이트로 판단되어 사이트 전체 권한에 영향을 미칠 수 있음. OG와 Twitter Card도 원칙적으로 페이지마다 달라야 합니다. theme-color, og:site_name, twitter:site 등 사이트 레벨 설정만 사이트 전체에서 통일할 수 있습니다.

지금도 meta keywords를 작성해야 하나요? 몇 개 정도가 적절한가요?

2026년 현재 Google, Bing, 바이두 등 주요 검색엔진은 meta keywords를 랭킹 요인으로 사용하지 않습니다. 작성해도 작성하지 않아도 SEO에는 기본적으로 영향을 미치지 않습니다. CMS나 템플릿에 이 필드가 있는 경우 몇 초 동안 3-5개의 핵심 키워드만 입력하면 충분하며 키워드 선택과 밀도에 시간을 쓸 필요가 없습니다. 중요한 것은 수십 개의 키워드를 채우거나 같은 단어를 여러 번 반복하거나 무관한 인기 키워드를 작성하지 않는 것입니다——이는 스팸 시그널로 처리되어 역효과를 낼 수 있습니다.

robots meta 태그와 robots.txt의 차이는 무엇인가요? 어느 것이 우선하나요?

둘은 작용하는 레벨과 메커니즘이 다릅니다: ①robots.txt는 사이트 루트에 배치되는 텍스트 파일로 사이트 또는 디렉터리 레벨에서 크롤러 동작을 제어합니다(예: Disallow: /admin/). 하지만 robots.txt는 「신사협정」이며 금지된 페이지에 외부 링크가 있으면 인덱싱될 수 있습니다. ②robots meta는 각 페이지 HTML head에 배치되는 페이지 레벨 태그로 개별 페이지 index/noindex/follow/nofollow 등을 정확히 제어할 수 있으며 robots.txt보다 우선합니다. ③X-Robots-Tag는 HTTP 응답 헤더 레벨로 robots meta와 동일한 기능을 가지며 PDF나 이미지 등 비HTML 파일에도 사용할 수 있습니다. 페이지를 완전히 인덱싱시키지 않으려면 noindex(meta 또는 X-Robots-Tag)가 필요합니다.

본 도구로 Meta 태그를 생성한 후 Schema.org 구조화 데이터(JSON-LD)도 설정해야 하나요?

Meta 태그와 Schema.org 구조화 데이터는 보완 관계이며 대체 관계가 아닙니다. Meta 태그는 주로 검색결과페이지 제목·설명, 소셜 공유 카드, 기본 크롤러 제어를 담당합니다. Schema.org 구조화 데이터(일반적으로 JSON-LD 형식으로 페이지에 임베드)는 제품 평가 별점·가격·재고, 브레드크럼 네비게이션, 글 발행일, FAQ 아코디언, 이벤트 일시·장소 등 리치 스니펫 표시를 실현하여 CTR을 더욱 향상시킬 수 있습니다. 중요한 페이지에는 둘 다 설정하는 것을 권장합니다: ①기본 Meta 태그(본 도구로 생성), ②해당 페이지 타입의 Schema.org 구조화 데이터. 둘은 충돌하지 않으며 함께 검색 표시 효과를 최적화합니다.

문제 해결

Facebook/Twitter/LinkedIn에 공유했을 때 이미지가 표시되지 않거나 설정한 og:image와 다른 이미지가 표시됨

og:image URL에 상대경로나 localhost/127.0.0.1/내부 IP를 사용하여 크롤러가 접근할 수 없음 robots.txt에서 이미지가 차단되었거나 WAF/CDN/방화벽이 크롤러 User-Agent(facebookexternalhit/Twitterbot/LinkedInBot)를 차단함 이미지 사이즈가 요건을 충족하지 않음(og:image는 200×200픽셀 이상 필요) 이미지 파일이 너무 크거나(5-8MB 초과) 미지원 형식(JPG/PNG/WebP/GIF만 지원) JavaScript로 클라이언트 사이드 동적 렌더링되어 크롤러가 JS를 실행하지 않음(SSR/SSG 필요) og:image URL이 404/403/5xx 에러를 반환하거나 로그인 페이지로 리다이렉트함 플랫폼이 오래된 캐시를 보유하고 있어 공식 디버거로 Scrape Again을 실행하지 않음

Google 검색 결과에서 title이 잘리거나 Google에 의해 자동으로 재작성됨

title이 50-60자(약 600픽셀 너비)를 초과하여 초과분이 줄임표로 잘림 title에 전각 기호나 emoji가 포함되어 추가 너비를 차지하여 실제 표시가 글자 수보다 일찍 잘림 title이 키워드 스태핑이거나 콘텐츠와 불일치하여 Google이 본문이나 앵커 텍스트에서 재작성 각 페이지 title이 중복되거나 매우 유사하여 Google이 자동으로 다른 제목 생성 title에 브랜드명만 있거나 브랜드명이 너무 김 |, -, _ 등 구분자를 과도하게 사용함 페이지 h1-h6 제목 계층이 혼란스럽거나 h1이 여러 개 있음

Meta 태그 설정 후 문자 깨짐, 특수문자 이상 표시, HTML 구문 오류가 발생함

canonical 태그가 적용되지 않아 중복 URL이 인덱싱되거나 canonical이 무시됨

canonical이 가리키는 URL이 404/403/5xx를 반환하거나 다른 페이지로 리다이렉트함 순환 canonical(A→B→A) 또는 연쇄 canonical(A→B→C→D)으로 검색엔진이 혼란스러워함 canonical이 크게 다른 콘텐츠 페이지를 가리켜 설정 오류로 판단되어 무시됨 canonical에 상대경로를 사용함(완전한 절대 URL 필요) http/https, www/비www 간 301 리다이렉트가 올바르게 설정되지 않음 페이지네이션 페이지를 모두 첫 페이지로 canonical하여 후속 콘텐츠가 인덱싱되지 않음 HTML link 태그, HTTP 응답 헤더, Sitemap에서 서로 다른 canonical URL이 선언되어 충돌함

Meta 태그를 변경했는데 재공유 시 오래된 제목·설명·이미지가 표시됨

소셜 플랫폼의 OG/Twitter Card 캐시가 장기간(며칠에서 몇 주) 유지됨 공식 디버거로 Scrape Again/재크롤을 실행하여 캐시를 강제 갱신하지 않음 CDN이 오래된 HTML 페이지를 캐시함 서버 사이드 캐시나 SSR 캐시가 클리어되지 않음 og:image URL은 같지만 이미지 내용이 업데이트된 경우 ?v=2 등 버전 파라미터가 필요 태그 변경이 프로덕션 환경에 올바르게 배포되지 않음 Meta 태그가 HTML body 내에 배치되었거나 JS로 동적 삽입되어 크롤러가 읽을 수 없음

실수로 noindex,nofollow를 설정하여 사이트나 중요 페이지가 Google에 인덱싱되지 않음

개발/스테이징 환경의 noindex,nofollow 태그가 프로덕션 릴리스 시 제거되지 않아 전체 사이트가 noindex 상태로 공개됨 WordPress 등 CMS의 「검색엔진이 이 사이트를 인덱싱하지 않도록 권장」 옵션이 체크된 채 공개되어 모든 페이지에 자동으로 noindex가 추가됨 robots.txt에 Disallow가 설정되어 크롤러가 페이지에 접근조차 못하지만 외부 링크가 있으면 여전히 인덱싱될 수 있음 HTTP 응답 헤더에서 X-Robots-Tag: noindex가 반환됨(메타태그보다 우선순위가 높으며 많은 사람이 응답 헤더를 간과함, Nginx/Apache 설정, CDN 설정이 원인일 수 있음) CDN/WAF/보안 플러그인이 자동으로 noindex 헤더를 추가함(일부 보안 플러그인의 오동작이나 기본 설정) 잘못된 디렉티브 조합 사용(예: noindex를 index로 썼지만 다른 파라미터가 충돌, 또는 전체 사이트 템플릿에 noindex가 포함되어 있고 메인페이지만 제거하고 내부페이지는 그대로 남아있음) 스테이징에서 프로덕션으로 마이그레이션 시 base URL, canonical, robots 설정이 업데이트되지 않아 테스트 환경의 noindex가 프로덕션 환경에 남음

용어집

Meta tag: HTML 메타태그. head 영역 내에 배치되어 페이지 메타데이터를 기술하고 브라우저, 검색엔진, 소셜 플랫폼에 페이지 정보를 전달합니다.
title: HTML 제목 태그. 브라우저 탭과 SERP의 클릭 가능한 제목을 정의하는 SEO 최중요 태그, 권장 50-60자.
meta description: 페이지 설명 메타태그. SERP 제목 아래 표시되는 설명문으로 CTR에 큰 영향, 권장 120-160자.
meta keywords: 키워드 메타태그. Google은 2009년부터 사용하지 않으며 현재 기본적으로 SEO 가치가 없습니다.
canonical: 정규 링크 태그(rel="canonical"). 여러 유사 URL 중 우선 버전을 검색엔진에 알려 중복 콘텐츠 문제를 해결합니다.
Open Graph: Facebook이 2010년에 제정한 소셜 공유 프로토콜. og: 접두사 태그로 공유 카드 스타일을 제어하며 거의 모든 소셜 플랫폼에서 지원됩니다.
Twitter Card: Twitter/X의 공유 카드 프로토콜. twitter: 접두사 태그를 사용하며 summary/summary_large_image/app/player 4타입을 지원. OG 태그보다 우선합니다.
og:type: Open Graph 페이지 타입 태그. website, article, product, profile 중 하나를 지정하여 소셜 플랫폼의 콘텐츠 해석 방식을 결정합니다.
og:image: Open Graph 공유 이미지 태그. 공유 카드 미리보기 이미지 URL 지정, 권장 1200×630픽셀, 공개 접근 가능한 절대 URL.
twitter:card: Twitter Card 타입 지정 태그(필수). summary, summary_large_image, app, player 중 하나를 지정.
robots meta: 크롤러 제어 메타태그. 페이지 레벨에서 index/noindex/follow/nofollow 등을 제어하며 robots.txt보다 우선합니다.
noindex: robots 디렉티브 중 하나. 페이지 인덱싱을 금지합니다. 테스트 페이지, 내부 페이지에서 사용됩니다.
nofollow: robots 디렉티브 중 하나. 페이지 내 모든 링크 추적을 금지합니다.
theme-color: 모바일 브라우저 주소창/툴바 색상을 정의하는 메타태그. 브랜드 경험을 향상시킵니다.
author meta: 저자 메타태그(name="author"). 콘텐츠 작성자 정보를 선언합니다.
HTML entity: HTML 엔티티 이스케이프 문자. 특수문자를 안전하게 표시하는 데 사용되며 &가 &, <가 < 등을 나타냅니다.
SERP: Search Engine Results Page(검색엔진 결과페이지). 제목, 설명, URL 등을 포함한 검색 결과 페이지.
CTR: Click-Through Rate(클릭률). 검색 결과 표시 후 사용자 클릭 비율로 SEO 핵심 지표 중 하나.
crawl budget: 크롤 예산. 검색엔진이 사이트에 할당하는 크롤 횟수와 페이지 수.
viewport: 뷰포트 메타태그(name="viewport"). 모바일에서 페이지 렌더링 너비와 초기 줌을 제어하는 필수 태그.

자주 사용되는 Meta 태그 목록표

og:type 용도 대응표

twitter:card 타입 대응표