コンテンツへスキップ
🛠️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であなたのリンクを共有する際の見え方を制御します。適切なメタタグがない場合、検索エンジンはあなたのコンテンツを誤解する可能性があり、ソーシャルメディアで共有されたときにあなたのリンクは平凡に見えます。

このメタタグジェネレータを使うと、ウェブサイトが必要とするすべての重要なメタタグ—タイトル、説明、キーワード、作者、ロボットディレクティブ、正規URLを素早く作成できます。Facebook共有時の見た目を制御するためのOpen Graphタグと、ツイート表示を強化するためのTwitterカードも生成します。ページ情報を入力して、生成されたHTMLコードをコピーし、ページの<head>セクションに貼り付けるだけです。ライブプレビューは、ソーシャルプラットフォームであなたのページがどのように表示されるかを正確に示します。

ウェブデベロッパー、コンテンツクリエイター、SEO専門家は、このツールを使用してワークフローを効率化し、構文エラーを回避しています。新しいブログの立ち上げ、e-commerce製品ページの最適化、重複コンテンツがあなたのランキングに悪影響を与えないようにするなど、このジェネレータは時間を節約し、サイト全体の一貫性を確保します。

よくある質問

コード実装

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.