본문으로 건너뛰기
🛠️ToolsShed

메타 태그 생성기

SEO, Open Graph, Twitter Card용 HTML 메타 태그를 생성합니다.

18/60

50/155

소셜 미리보기

OG Image: https://example.com/og-image.png

https://example.com/page

My Awesome Website

A short description of this page for SEO purposes.

생성된 HTML
<!-- Primary Meta Tags -->
<title>My Awesome Website</title>
<meta name="title" content="My Awesome Website" />
<meta name="description" content="A short description of this page for SEO purposes." />
<meta name="keywords" content="web, tools, free" />
<meta name="author" content="Author Name" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://example.com/page" />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:title" content="My Awesome Website" />
<meta property="og:description" content="A short description of this page for SEO purposes." />
<meta property="og:image" content="https://example.com/og-image.png" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://example.com/page" />
<meta property="twitter:title" content="My Awesome Website" />
<meta property="twitter:description" content="A short description of this page for SEO purposes." />
<meta property="twitter:image" content="https://example.com/og-image.png" />

이 도구 소개

메타 태그는 검색 엔진, 소셜 미디어 플랫폼, 브라우저에 페이지 내용을 알려주기 위해 웹사이트의 HTML에 추가하는 보이지 않는 지시문입니다. Google 검색 결과에서 사이트가 어떻게 표시되는지 그리고 누군가가 Facebook, Twitter, LinkedIn에서 링크를 공유할 때의 모습을 제어합니다. 적절한 메타 태그가 없으면 검색 엔진이 콘텐츠를 오해할 수 있으며, 소셜 미디어에서 공유될 때 링크가 단순하게 보입니다.

이 메타 태그 생성기를 사용하면 웹사이트에 필요한 모든 중요한 메타 태그(제목, 설명, 키워드, 작성자, 로봇 지시사항, Canonical URL)를 빠르게 생성할 수 있습니다. 소셜 미디어 미리보기를 제어하는 Open Graph 태그와 트윗을 강화하는 Twitter Cards도 생성합니다. 페이지 정보를 입력하고 생성된 HTML 코드를 복사하여 페이지의 <head> 섹션에 붙여넣으면 됩니다. 실시간 미리보기는 소셜 플랫폼에서 페이지가 정확히 어떻게 표시되는지 보여줍니다.

웹 개발자, 콘텐츠 크리에이터, SEO 전문가는 이 도구를 사용하여 워크플로우를 간소화하고 구문 오류를 방지합니다. 새로운 블로그를 시작하든, 전자상거래 제품 페이지를 최적화하든, 중복 콘텐츠가 순위에 영향을 주지 않도록 하든 이 생성기는 시간을 절약하고 사이트 전체의 일관성을 보장합니다.

자주 묻는 질문

코드 구현

def generate_meta_tags(
    title: str,
    description: str,
    url: str,
    image: str = "",
    site_name: str = "",
    twitter_handle: str = "",
    locale: str = "en_US",
) -> str:
    lines = []
    lines.append(f'<title>{title}</title>')
    lines.append(f'<meta name="description" content="{description}">')
    # Open Graph
    lines.append(f'<meta property="og:title" content="{title}">')
    lines.append(f'<meta property="og:description" content="{description}">')
    lines.append(f'<meta property="og:url" content="{url}">')
    lines.append(f'<meta property="og:type" content="website">')
    lines.append(f'<meta property="og:locale" content="{locale}">')
    if site_name:
        lines.append(f'<meta property="og:site_name" content="{site_name}">')
    if image:
        lines.append(f'<meta property="og:image" content="{image}">')
        lines.append(f'<meta property="og:image:width" content="1200">')
        lines.append(f'<meta property="og:image:height" content="630">')
    # Twitter Card
    card = "summary_large_image" if image else "summary"
    lines.append(f'<meta name="twitter:card" content="{card}">')
    lines.append(f'<meta name="twitter:title" content="{title}">')
    lines.append(f'<meta name="twitter:description" content="{description}">')
    if twitter_handle:
        lines.append(f'<meta name="twitter:site" content="{twitter_handle}">')
    if image:
        lines.append(f'<meta name="twitter:image" content="{image}">')
    return "\n".join(lines)

print(generate_meta_tags(
    title="My Page",
    description="A great page.",
    url="https://example.com",
    image="https://example.com/og.png",
    site_name="Example",
    twitter_handle="@example",
))

Comments & Feedback

Comments are powered by Giscus. Sign in with GitHub to leave a comment.