ブログを始めてから「OGP（Open Graph Protocol）」という仕組みがあることを知り、自分のブログにも導入してみました。
X（旧Twitter）などのSNSで記事をシェアした際、アイキャッチ画像を大きく綺麗に表示させるための必須設定です。皆さんがそのままコピペして使える共通テンプレートも用意しましたので、ぜひ活用してください！
OGPとは？
OGP（Open Graph Protocol）とは、Webの記事やページがX（旧Twitter）などのSNSでシェアされた際に、「ページのタイトル」「サムネイル画像（アイキャッチ）」「概要文」などを正しく伝えるための仕組みです。
HTMLのコード内では、og: から始まるメタタグとして記述します。実際にOGPを設定している場合と、設定していない場合でXでの見栄えがどう変わるのかを比較してみます。
OGPを設定した時の見栄え比較（あり・なし）
① OGP設定あり（大きな画像で目立つ！）
OGPとTwitterカード（summary_large_image）を設定すると、以下のように記事のアイキャッチ画像が大きく表示され、タイムライン上でも非常に目を引きます。
② OGP設定なし（文字やURLだけで寂しい…）
一方、OGPがうまく設定されていないと、画像が表示されなかったり小さなカードになったりしてしまい、せっかく書いた記事の魅力が伝わりにくくなってしまいます。
BloggerでページごとのOGPを設定する方法
比較してみると一目瞭然で、視覚的にOGPを設定していた方が圧倒的にクリックされやすくなりますよね。
Bloggerの「テーマ」＞「HTMLを編集」を開き、<head> タグの周辺を以下のテンプレートのように設定すれば、記事ごとのタイトルやURL、大きなアイキャッチ画像が自動で反映されるようになりますので、ぜひお試しください。
（※Blogger独自のデータタグを使っているためBlogger専用の書き方になりますが、仕組みが理解できれば他のブログサービスにも応用できます！）
▼ Blogger用 OGP設定テンプレート
<head prefix='og: http://ogp.me/ns#'>
<!-- Blogger標準のOGP自動出力タグ -->
<b:include data='blog' name='all-head-content'/>
<!-- サイト名・記事タイプの追加設定 -->
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='article' property='og:type'/>
<!-- X（旧Twitter）で大きな画像カードを表示する設定 -->
<meta content='summary_large_image' name='twitter:card'/>※もしテーマ内に <b:include data='blog' name='all-head-content'/> が入っていないテンプレートの場合は、以下のタグを個別に <head> 内に追加することでも設定可能です。
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>参考サイト・おわりに
OGPの基本仕様やBloggerのレイアウトタグについて、さらに詳しく知りたい方は以下の公式ヘルプや解説サイトも参考にしてみてください。
コード量も少なくて済むので、一度仕組みがわかればそれほど時間をかけずに導入できるかと思います。
もし設定方法などで気づいた点があれば、コメント等でご指摘いただけますと幸いです。
では、また次回！
0 件のコメント:
コメントを投稿