w
문서 핵심 도구 Open Graph Meta Generator

API 참조

이 문서는 Open Graph Meta Generator 도구와 그 기반 기능에 대한 기술 세부 사항을 제공합니다.

도구 개요

Open Graph Meta Generator는 Open Graph 및 Twitter Card 프로토콜용 HTML 메타 태그를 생성하는 클라이언트 사이드 도구입니다. 사용자 입력을 처리해 올바른 형식의 HTML 메타 태그를 출력합니다.

입력 매개변수

일반 정보

ParameterTypeRequiredDescriptionExample
pageTypestringYes콘텐츠 유형"website", "article", "book"
titlestringNo페이지 제목"My Awesome Website"
descriptionstringNo페이지 설명"A great website for developers"
urlstringNo페이지 URL"https://example.com/page"
siteNamestringNo사이트 이름"My Company"

이미지 설정

ParameterTypeRequiredDescriptionExample
imageUrlstringNo이미지 URL"https://example.com/image.jpg"
imageAltstringNo이미지 대체 텍스트"Company logo"
imageWidthstringNo이미지 너비(픽셀)"1200"
imageHeightstringNo이미지 높이(픽셀)"630"

Twitter 설정

ParameterTypeRequiredDescriptionExample
twitterCardTypestringYesTwitter 카드 유형"summary_large_image"
twitterSitestringNo사이트 Twitter 핸들"@example"
twitterCreatorstringNo작성자 Twitter 핸들"@author"

출력 형식

도구는 다음 형식의 HTML 메타 태그를 생성합니다.

Open Graph 태그

<!-- Open Graph Meta Tags -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page description" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:site_name" content="Site Name" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:image:alt" content="Image description" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Twitter 태그

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@example" />
<meta name="twitter:creator" content="@author" />
<meta name="twitter:title" content="Page Title" />
<meta name="twitter:description" content="Page description" />
<meta name="twitter:image" content="https://example.com/image.jpg" />

콘텐츠 유형

지원되는 페이지 유형

TypeDescriptionUse Case
website일반 웹사이트 페이지홈페이지, 소개 페이지, 문의 페이지
article블로그 글, 뉴스 기사블로그 글, 뉴스 기사, 튜토리얼
book도서 페이지, 전자책도서 소개, 전자책 페이지
profile개인 또는 비즈니스 프로필사용자 프로필, 회사 페이지
music음악 트랙, 앨범음악 스트리밍, 앨범 페이지
video동영상 콘텐츠동영상 페이지, 영화 목록

Twitter Card 유형

TypeDescriptionBest For
summary썸네일이 포함된 기본 카드블로그 글, 뉴스 기사
summary_large_image큰 이미지가 포함된 카드비주얼 콘텐츠, 제품
app모바일 앱 홍보앱 스토어 페이지
player동영상/오디오 콘텐츠동영상 페이지, 팟캐스트

데이터 처리

HTML 이스케이프

모든 사용자 입력은 XSS 공격을 방지하기 위해 자동으로 이스케이프됩니다.

function escapeHtml(text) {
  const div = document.createElement("div");
  div.textContent = text;
  return div.innerHTML;
}

URL 검증

URL은 올바른 형식인지 확인하기 위해 검증됩니다.

function isValidUrl(string) {
  try {
    new URL(string);
    return true;
  } catch (_) {
    return false;
  }
}

콘텐츠 길이 제한

도구는 권장 길이 제한을 적용합니다.

  • 제목: 최대 60자
  • 설명: 최대 160자
  • URL: 유효한 URL 형식이어야 함

브라우저 호환성

지원 브라우저

BrowserVersionSupport
Chrome60+완전 지원
Firefox55+완전 지원
Safari12+완전 지원
Edge79+완전 지원

필수 기능

  • ES6+ 지원
  • Clipboard API 지원
  • Local Storage 지원
  • CSS Grid 지원

성능 고려 사항

클라이언트 사이드 처리

  • 모든 처리는 브라우저에서 수행됨
  • 서버 요청 불필요
  • 즉시 생성 및 미리보기 가능
  • 메모리 사용량이 적음

캐싱

  • 생성된 메타 태그는 브라우저 저장소에 캐시됨
  • 기록 히스토리는 로컬에 저장됨
  • 외부 의존성 없음

오류 처리

입력 검증 오류

// Example error handling
if (!title.trim()) {
  showError("Title is required");
  return;
}

if (url && !isValidUrl(url)) {
  showError("Please enter a valid URL");
  return;
}

이미지 로딩 오류

// Handle image loading errors
function handleImageError(event) {
  const img = event.target;
  img.style.display = "none";
  showWarning("Image failed to load");
}

통합 예시

WordPress 통합

// Add to functions.php
function add_open_graph_tags() {
    if (is_single()) {
        $title = get_the_title();
        $description = get_the_excerpt();
        $image = get_the_post_thumbnail_url();

        echo '<meta property="og:title" content="' . esc_attr($title) . '" />';
        echo '<meta property="og:description" content="' . esc_attr($description) . '" />';
        echo '<meta property="og:image" content="' . esc_url($image) . '" />';
    }
}
add_action('wp_head', 'add_open_graph_tags');

React 통합

// React component example
function OpenGraphMeta({ title, description, image, url }) {
  return (
    <>
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:image" content={image} />
      <meta property="og:url" content={url} />
    </>
  );
}

Next.js 통합

// Next.js Head component
import Head from "next/head";

function MyPage() {
  return (
    <Head>
      <meta property="og:title" content="My Page Title" />
      <meta property="og:description" content="My page description" />
      <meta property="og:image" content="https://example.com/image.jpg" />
    </Head>
  );
}

테스트 및 검증

소셜 미디어 디버거

자동 테스트

// Example test for meta tag generation
describe("Open Graph Meta Generator", () => {
  test("generates correct meta tags", () => {
    const input = {
      pageType: "website",
      title: "Test Page",
      description: "Test description",
    };

    const output = generateMetaTags(input);

    expect(output).toContain('<meta property="og:type" content="website" />');
    expect(output).toContain('<meta property="og:title" content="Test Page" />');
  });
});

문제 해결

일반적인 문제

  1. 이미지가 표시되지 않음: URL 형식과 접근 가능 여부를 확인하세요
  2. 태그가 동작하지 않음: 소셜 미디어 디버거로 검증하세요
  3. 콘텐츠가 잘림: 문자 수 제한을 확인하세요
  4. 캐시 문제: 디버거 도구로 캐시를 새로고침하세요

디버그 모드

상세 정보를 보려면 디버그 모드를 활성화하세요.

// Enable debug logging
localStorage.setItem("debug", "true");

향후 개선 사항

계획된 기능

  • Schema.org 구조화 데이터 지원
  • 다국어 지원
  • 대량 생성 기능
  • 서버 사이드 생성을 위한 API 엔드포인트
  • 고급 이미지 최적화
  • Analytics 통합

기여하기

Open Graph Meta Generator에 기여하려면 다음 단계를 따르세요.

  1. 저장소를 포크합니다
  2. 기능 브랜치를 생성합니다
  3. 변경 사항을 적용합니다
  4. 테스트를 추가합니다
  5. Pull Request를 제출합니다

지원

기술 지원이나 문의가 필요하면 다음을 확인하세요.

  • FAQ를 확인하세요
  • Examples를 검토하세요
  • 메인 웹사이트를 통해 지원팀에 문의하세요
이 페이지가 도움이 되었나요?