OGP 확인 및 시뮬레이터
- 안전
- 진단 결과는 저장되거나 어디에도 공개되지 않습니다.
참고
OGP 태그 설정을 검증하고, SNS에 공유했을 때의 표시를 시뮬레이션하는 도구입니다.
OGP 이미지 제작 및 HTML 메타 태그 테스트에 유용합니다.
입력 소스
세 가지 방법 중 하나를 선택하세요.
| 웹사이트 URL | 공개적으로 접근 가능한 웹사이트에 적합합니다. |
|---|---|
| HTML 소스 | 개발 중이거나 접근 제한이 있는 사이트에 적합합니다. |
| 이미지 파일 | OGP 이미지 제작 중 미리보기 확인에 적합합니다. |
진단 결과
세 가지 등급으로 평가합니다.
| 등급 A | 권장 요구사항을 모두 충족합니다. |
|---|---|
| 등급 B | 필수 항목은 충족하지만 권장 항목이 있습니다. |
| 등급 C | 수정이 필요한 항목이 있습니다. |
권장 예시
아래 설정은 주요 SNS를 커버합니다.
<meta property="og:title" content="페이지 제목">
<meta property="og:description" content="페이지 설명">
<meta property="og:url" content="페이지 URL">
<meta property="og:image" content="OGP 이미지 URL">
<meta property="og:type" content="페이지 유형">
<meta property="og:site_name" content="사이트 이름">
<meta name="twitter:card" content="Twitter 카드 유형">태그 상세
기본 OGP 태그
여러 SNS에서 공통으로 사용할 수 있는 태그입니다. 아래 항목은 모두 설정하는 것을 권장합니다.
`property` 속성을 사용합니다.
<meta property="og:title" content="페이지 제목">
<meta property="og:description" content="페이지 설명">
<meta property="og:url" content="페이지 URL">
<meta property="og:image" content="OGP 이미지 URL">
<meta property="og:type" content="페이지 유형">
<meta property="og:site_name" content="사이트 이름">og:title
페이지 제목을 설정합니다. 보통 `title` 태그와 동일한 값을 사용합니다.
X(Twitter)에서는 이 값이 없으면 Twitter Card가 비활성화될 수 있어 사실상 필수입니다.
<meta property="og:title" content="페이지 제목">예시
<meta property="og:title" content="OGP 확인 및 시뮬레이터">og:description
페이지 설명을 설정합니다. 보통 `description` 태그와 동일한 값을 사용합니다.
대부분의 SNS에서는 생략 시 `description`이 대체로 사용될 수 있습니다.
<meta property="og:description" content="페이지 설명">예시
<meta property="og:description" content="URL 또는 HTML 소스에서 OGP 설정을 진단하고 SNS에 공유했을 때의 표시를 미리볼 수 있습니다. X, Facebook, LINE을 지원하며, 이미지 파일로도 시뮬레이션할 수 있습니다.">og:url
대상 페이지 URL을 절대 URL로 설정합니다.
<meta property="og:url" content="페이지 URL">예시
<meta property="og:url" content="https://develop.tools/ogp-simulator/">og:image
OGP 이미지 URL을 절대 URL로 설정합니다. 권장 크기는 `1200px`×`630px`입니다.
1:1로 표시될 수 있으므로 중요한 정보는 중앙 `630px`×`630px` 영역에 배치하세요.
<meta property="og:image" content="OGP 이미지 URL">예시
<meta property="og:image" content="https://develop.tools/_assets/img/meta/ogp/tools/ogp-simulator.png">og:type
페이지 유형을 지정합니다.
| website | 웹사이트 메인 페이지 |
|---|---|
| article | 기사 페이지 등 메인이 아닌 페이지 |
| blog | 블로그 메인 페이지 |
| product | 제품/서비스 상세 페이지 |
<meta property="og:type" content="페이지 유형">예시
<meta property="og:type" content="article">og:site_name
웹사이트 이름을 지정합니다. 보통 모든 페이지에서 공통입니다.
<meta property="og:site_name" content="사이트 이름">예시
<meta property="og:site_name" content="develop.tools">X(Twitter) 태그
X(구 Twitter)에서 우선적으로 사용하는 태그입니다.
기본 OGP 태그가 설정되어 있다면 모두 생략해도 문제가 없습니다.
썸네일 크기를 제어하고 싶을 때만 `twitter:card`를 설정하세요.
`name` 속성을 사용합니다.
<meta name="twitter:card" content="Twitter 카드 유형">
<meta name="twitter:title" content="페이지 제목">
<meta name="twitter:description" content="페이지 설명">
<meta name="twitter:image" content="썸네일 이미지 URL">
<meta name="twitter:site" content="사이트의 X/Twitter 사용자명">
<meta name="twitter:creator" content="작성자의 X/Twitter 사용자명">twitter:card
Twitter Card 유형을 설정합니다. 큰 썸네일을 원할 때 지정합니다.
생략하면 `summary`가 됩니다.
| summary | 작은 썸네일(정사각) + 사이트 정보 좌우 배치 |
|---|---|
| summary_large_image | 큰 썸네일 + 사이트 정보 상하 배치 |
<meta name="twitter:card" content="Twitter 카드 유형">예시
<meta name="twitter:card" content="summary_large_image">Facebook 태그
Facebook에서 사용하는 태그입니다.
Facebook 전용 분석 기능을 사용하려면 지정하세요.
<meta property="fb:app_id" content="Facebook 앱 ID">