Open Graphでソーシャルネットワークでのページのプレビューをコントロールし、JSON-LDのschema.orgでリッチリザルトを狙います。
このレッスンを Kodokon で開くURLがソーシャルネットワークやメッセージングアプリで共有されると、スクレイパーがHTMLを読み込んでプレビューカードを組み立てます。Open Graphプロトコルがそのカードを制御します。og:title、og:description、og:type、og:url、そして何より og:image で、これは絶対URLでなければなりません(相対パスはほとんどのプラットフォームで無視されます)。実際の落とし穴: これらのスクレイパーはJavaScriptを実行しません。あなたのタグがフレームワークによってクライアント側で注入されるなら、プレビューは空になります。タグは、最初に配信されるHTML(SSRまたは静的生成)の中に存在していなければなりません。
<meta property="og:title"
content="The filter coffee guide">
<meta property="og:type" content="article">
<meta property="og:url"
content="https://example.com/cafe-filtre">
<meta property="og:image"
content="https://example.com/cover-1200.jpg">
<meta property="og:description"
content="Ratios and techniques for a clean cup.">2つの追加で基本セットが完成します。<link rel="canonical"> は、ページが複数のアドレス(トラッキングパラメータ、ページ送り)で到達できるときに、基準となるURLを指定します。重複コンテンツに対するあなたの防御です。そしてTwitter Cardsのタグ: プラットフォームは内容についてはOpen Graphにフォールバックしますが、表示形式、特に summary_large_image を選ぶには twitter:card がやはり必要です。
<link rel="canonical"
href="https://example.com/cafe-filtre">
<meta name="twitter:card"
content="summary_large_image">schema.orgの構造化データは、あなたのコンテンツの意味を検索エンジンに説明します。記事、商品、レシピ、パンくず、FAQなど。3つの構文(microdata、RDFa、JSON-LD)がありますが、GoogleはJSON-LDを推奨しています。<script type="application/ld+json"> の中の自己完結したブロックで、視覚的なマークアップから切り離されているため、生成と保守が容易です。このマークアップこそが、あなたのページをリッチリザルトの対象にします。レビューの星、価格、イベントの日付が、検索結果ページに直接表示されるのです。
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "The filter coffee guide",
"datePublished": "2026-05-12",
"author": {
"@type": "Person",
"name": "Ana Costa"
}
}
</script>