Open Graph(OG) 태그란 무엇인가요?

Open Graph는 Facebook이 만든 프로토콜로, 웹 페이지가 소셜 미디어에서 공유될 때 제목, 설명, 이미지 등을 표준화된 형식으로 표시합니다. Facebook, LinkedIn, Discord, 카카오톡 등 대부분의 플랫폼에서 지원합니다.

OG 이미지의 권장 크기는 얼마인가요?

Open Graph 이미지는 1200x630px을 권장합니다. 이 크기는 Facebook, LinkedIn 등 대부분의 플랫폼에서 잘림 없이 표시됩니다. 파일 크기는 5MB 이하를 권장합니다.

Canonical URL은 왜 설정하나요?

Canonical URL은 동일한 콘텐츠가 여러 URL에서 접근 가능할 때, 검색 엔진에 원본 URL을 알려주는 역할을 합니다. 중복 콘텐츠 문제를 방지하고 SEO 점수를 집중시킵니다.

robots 메타 태그의 noindex와 nofollow 차이는 무엇인가요?

noindex는 검색 엔진이 해당 페이지를 검색 결과에 표시하지 않도록 하고, nofollow는 페이지 내 링크를 추적하지 않도록 합니다. 두 옵션은 독립적으로 설정할 수 있습니다.

Twitter Card의 summary와 summary_large_image 차이는 무엇인가요?

summary는 작은 썸네일과 함께 제목, 설명을 표시하고, summary_large_image는 큰 이미지를 전면에 표시합니다. 비주얼 콘텐츠가 중요한 페이지에는 summary_large_image를 권장합니다.

메타 태그 생성기

SEO 메타 태그와 소셜 미디어 공유 태그를 생성

기본 정보

페이지 제목

0/60

페이지 설명

0/150

메타 설명 길이

프리셋을 선택하거나 50-300자 사이에서 직접 입력할 수 있습니다. 선택값은 쿠키에 저장됩니다.

페이지 URL

키워드

작성자

Canonical URL

Open Graph

OG 제목

OG 설명

OG 이미지 URL

콘텐츠 유형

언어/지역

사이트 이름

Twitter Card

카드 유형

사이트 계정

작성자 계정

추가 설정

검색 로봇 설정

미리보기

https://example.com

Page Title

Page description will appear here...

코드

<meta name="robots" content="index, follow">
<meta property="og:type" content="website">
<meta property="og:locale" content="ko_KR">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">

최적화 팁

제목은 50-60자 이내로 작성하세요

설명은 선택한 글자 수 기준에 맞춰 핵심 내용을 담으세요

OG 이미지는 1200x630px 크기를 권장합니다

각 페이지마다 고유한 메타 태그를 사용하세요

메타 태그 생성기란?

메타 태그 생성기는 웹 페이지의 SEO 메타 태그, Open Graph(OG) 태그, Twitter Card 태그를 폼 입력만으로 손쉽게 생성하는 도구입니다. Google 검색 결과, Facebook, LinkedIn, Discord 등 다양한 플랫폼에서의 미리보기를 실시간으로 확인할 수 있으며, HTML과 Next.js/Nuxt.js 코드를 자동 생성하여 바로 프로젝트에 적용할 수 있습니다.

SEO 기본 메타 태그(title, description, keywords, canonical) 생성
Open Graph 태그(og:title, og:image 등)로 소셜 미디어 공유 최적화
Twitter Card(summary, large image) 메타 태그 생성
Google, Facebook, LinkedIn, Discord 실시간 미리보기
HTML, Next.js, Nuxt.js 코드 형식으로 자동 출력
robots 메타 태그로 검색 로봇 색인 제어

사용 방법

1
기본 정보 입력
페이지 제목, 설명, URL, 키워드 등 기본 SEO 정보를 입력합니다. 권장 글자 수가 안내됩니다.
2
Open Graph & Twitter 설정
OG 이미지 URL, 콘텐츠 유형, Twitter Card 형식 등 소셜 미디어 공유 설정을 입력합니다.
3
미리보기 확인
Google, Facebook, LinkedIn, Discord에서 페이지가 어떻게 표시되는지 실시간 미리보기로 확인합니다.
4
코드 복사
HTML 또는 Next.js/Nuxt.js 형식의 코드 탭을 선택하고, 전체 복사 버튼으로 생성된 메타 태그를 복사합니다.

자주 묻는 질문

활용 팁

제목은 50-60자, 설명은 150-160자 이내로 작성해야 검색 결과에서 잘리지 않습니다
각 페이지마다 고유한 메타 태그를 설정하여 검색 엔진 최적화 효과를 극대화하세요
OG 이미지에 텍스트를 포함할 때는 이미지의 중앙에 배치하여 잘림을 방지하세요
Google Search Console에서 실제 검색 결과 표시를 확인하여 메타 태그 효과를 검증하세요
Next.js 프로젝트에서는 Metadata API를 사용하면 더 효율적으로 메타 태그를 관리할 수 있습니다

<meta name="robots" content="index, follow"> <meta property="og:type" content="website"> <meta property="og:locale" content="ko_KR">  <meta name="twitter:card" content="summary_large_image">

메타 태그 생성기란?

SEO 기본 메타 태그(title, description, keywords, canonical) 생성

Open Graph 태그(og:title, og:image 등)로 소셜 미디어 공유 최적화

Twitter Card(summary, large image) 메타 태그 생성

Google, Facebook, LinkedIn, Discord 실시간 미리보기

HTML, Next.js, Nuxt.js 코드 형식으로 자동 출력

robots 메타 태그로 검색 로봇 색인 제어

사용 방법

기본 정보 입력

페이지 제목, 설명, URL, 키워드 등 기본 SEO 정보를 입력합니다. 권장 글자 수가 안내됩니다.

Open Graph & Twitter 설정

OG 이미지 URL, 콘텐츠 유형, Twitter Card 형식 등 소셜 미디어 공유 설정을 입력합니다.

미리보기 확인

Google, Facebook, LinkedIn, Discord에서 페이지가 어떻게 표시되는지 실시간 미리보기로 확인합니다.

코드 복사

HTML 또는 Next.js/Nuxt.js 형식의 코드 탭을 선택하고, 전체 복사 버튼으로 생성된 메타 태그를 복사합니다.

활용 팁

제목은 50-60자, 설명은 150-160자 이내로 작성해야 검색 결과에서 잘리지 않습니다

각 페이지마다 고유한 메타 태그를 설정하여 검색 엔진 최적화 효과를 극대화하세요

OG 이미지에 텍스트를 포함할 때는 이미지의 중앙에 배치하여 잘림을 방지하세요

Google Search Console에서 실제 검색 결과 표시를 확인하여 메타 태그 효과를 검증하세요

Next.js 프로젝트에서는 Metadata API를 사용하면 더 효율적으로 메타 태그를 관리할 수 있습니다