w
문서 핵심 도구 Open Graph Meta Generator

기본 사용 가이드

이 가이드는 도구를 사용해 Open Graph 메타 태그를 생성하는 기본 단계를 차례대로 안내합니다.

1단계: 도구 열기

메인 도구 페이지에서 Open Graph Meta Generator 로 이동하거나 URL 을 직접 입력해 엽니다.

2단계: 기본 정보 입력

페이지 유형

페이지에 맞는 콘텐츠 유형을 선택합니다.

  • Website: 일반 웹사이트 페이지
  • Article: 블로그 글, 뉴스 기사, 튜토리얼
  • Book: 도서 페이지, 전자책
  • Profile: 개인 또는 비즈니스 프로필
  • Music: 음악 트랙, 앨범, 재생목록
  • Video: 비디오 콘텐츠, 영화, TV 프로그램

제목

페이지에 사용할 매력적인 제목을 입력합니다.

  • 최적의 표시를 위해 60자 이내로 유지합니다
  • 설명적이면서도 흥미를 끌 수 있게 작성합니다
  • 관련 키워드를 자연스럽게 포함합니다

설명

콘텐츠를 명확하게 설명하는 문구를 작성합니다.

  • 150~160자 정도를 목표로 합니다
  • 사용자가 페이지에서 무엇을 보게 될지 요약합니다
  • 클릭을 유도할 수 있도록 매력적으로 작성합니다

페이지 URL

페이지의 전체 URL 을 입력합니다.

  • 절대 URL 을 사용합니다 (https:// 포함)
  • 해당 URL 에 실제로 접근 가능한지 확인합니다
  • 깔끔하고 설명적인 URL 을 사용합니다

사이트 이름

웹사이트 또는 브랜드 이름을 입력합니다.

  • 이 이름은 소셜 미디어 게시물에 표시됩니다
  • 모든 페이지에서 일관되게 유지합니다
  • 공식 브랜드명을 사용합니다

3단계: 이미지 설정 구성

이미지 URL

소셜 미디어에 표시할 이미지의 URL 을 입력합니다.

  • 절대 URL 을 사용합니다 (https:// 포함)
  • 이미지가 공개적으로 접근 가능한지 확인합니다
  • 권장 크기: 1200x630 픽셀

이미지 대체 텍스트

접근성을 위해 설명이 있는 Alt 텍스트를 추가합니다.

  • 이미지에 무엇이 있는지 설명합니다
  • 간결하지만 충분히 설명적으로 작성합니다
  • 스크린 리더 사용자에게 중요합니다

이미지 크기

이미지의 너비와 높이를 지정합니다.

  • 너비: 일반적으로 1200픽셀
  • 높이: 일반적으로 630픽셀
  • 이 값은 소셜 플랫폼이 표시를 최적화하는 데 도움을 줍니다

4단계: Twitter 설정

카드 유형

적절한 Twitter Card 유형을 선택합니다.

  • Summary: 제목, 설명, 썸네일이 포함된 기본 카드
  • Summary with Large Image: 큰 이미지가 포함된 확장 카드
  • App: 모바일 앱 홍보용
  • Player: 비디오 또는 오디오 콘텐츠용

사이트 계정

웹사이트의 Twitter 핸들을 입력합니다.

  • 형식: @yourhandle
  • Twitter 게시물에 표시됩니다
  • 선택 사항이지만 권장됩니다

작성자 계정

콘텐츠 작성자의 Twitter 핸들을 입력합니다.

  • 형식: @authorhandle
  • 기사와 블로그 게시물에 특히 유용합니다
  • 선택 사항입니다

5단계: 메타 태그 생성 및 복사

모든 정보를 입력한 후에는 다음 순서로 진행합니다.

  1. 메타 태그가 실시간으로 자동 생성됩니다
  2. 출력 영역에서 생성된 HTML 을 검토합니다
  3. "Copy Meta Tags" 버튼을 눌러 클립보드에 복사합니다
  4. 미리보기 영역에서 소셜 미디어 표시 모습을 확인합니다

6단계: 웹사이트에 적용

복사한 메타 태그를 웹사이트 HTML 의 <head> 섹션에 추가합니다.

<head>
  <!-- Your existing head content -->

  <!-- Open Graph Meta Tags -->
  <meta property="og:type" content="website" />
  <meta property="og:title" content="Your Page Title" />
  <!-- ... other meta tags ... -->

  <!-- Twitter Meta Tags -->
  <meta name="twitter:card" content="summary_large_image" />
  <!-- ... other Twitter meta tags ... -->
</head>

빠른 팁

더 좋은 결과를 위해:

  • 항상 고품질이며 관련성 높은 이미지를 사용합니다
  • 소셜 미디어 디버깅 도구로 메타 태그를 테스트합니다
  • 제목과 설명은 권장 글자 수 안에 유지합니다
  • 모든 페이지에서 일관된 브랜딩을 유지합니다

피해야 할 일반적인 실수:

  • 절대 URL 대신 상대 URL 을 사용하는 것
  • 이미지 Alt 텍스트를 빠뜨리는 것
  • 너무 작거나 너무 큰 이미지를 사용하는 것
  • 플랫폼별 표시 결과를 테스트하지 않는 것

메타 태그 테스트하기

적용 후에는 다음 도구로 메타 태그를 확인할 수 있습니다.

이 도구들은 공유 시 콘텐츠가 실제로 어떻게 보이는지 보여 주고, 잠재적인 문제를 찾는 데 도움을 줍니다.

다음 단계

기본 사용법을 이해했다면, Advanced Features 가이드를 살펴보고 더 고급 설정과 사용자 지정 방법을 확인해 보세요.

이 페이지가 도움이 되었나요?