最近、コーディングを新規の外注(フリーランス)にお願いするとogpがわからずに何度か説明する機会がありました。
SEOが当たり前になった現代では必須の内容だとおもいますので、私自身ogpまわりは10年近く同じテンプレートを使用していることもあり、コピペでも無難に使えるように改めてまとめ直してみました。
目次
まとめなおした最終形態はこの形！
<html lang="ja" prefix="og: https://ogp.me/ns#"><meta property="og:locale" content="言語の指定">
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明文">
<meta property="og:type" content="ページの種類">
<meta property="og:url" content="ページのURL">
<meta property="og:image" content="ページのアイキャッチ画像のURL">
<meta property="og:site_name" content="サイト名">現在私が使用しているWPのテンプレートDIVERでも使用されている形と同じで、結果あまり昔から使っているテンプレートと全然変わらない形で落ち着きました。
※TwitterやFacebook用のogpなどもありますが、今回は最低限汎用性がある形でまとめました。
改めてOGPとは
OGPは「Open Graph Protcol」の略で、SNSやトークアプリなどでシェアされた際に表示される情報を指定する為のmetaタグです。property属性に「og:」がつくのが特徴です。
共有用に各タグの解説
prefix="og: https://ogp.me/ns#"
<html lang="ja" prefix="og: https://ogp.me/ns#">prefix="og: https://ogp.me/ns#"を記述してOGPを使うための宣言をします。
headタグに記述するといった情報もよく見かけますが、https://ogp.me/にアクセスしてみると、htmlタグに記述されているので、私はこの形にしています。
※htmlタグに記述する形で、今のところ特に問題は起こっていません。
og:locale
<meta property="og:locale" content="言語の指定">使用している言語を指定するタグ
日本語なので基本的にja_JP、海外向けのサイトなどを作るときは英語のen_USにする。
og:title
<meta property="og:title" content="ページのタイトル">サイトのタイトルではなく、そのページのタイトルを記述する。
og:site_nameでサイトの名前を指定するため、「お問い合わせ」などページの名前のみにするのがごちゃごちゃせずにスマートだと思います。
※20文字以内にするのがベストのようです
og:description
<meta property="og:description" content="ページの説明文">ページの説明文を記述する。
ogpでは80~90文字がベストのようですので、meta descriptionでは120文字前後(PCの場合)が推奨されていると思いますので、同じ内容を入れてしまうと、SNSで共有された際に文章が途切れてしまう可能性があります。
og:type
<meta property="og:type" content="ページの種類">下記から当てはまるものを指定。
「website」 WEBサイト
「article」 記事ページ
「blog」 ブログ
「video」 動画ページ
og:url
<meta property="og:url" content="ページのURL">ページのURLを指定。URLは絶対パスで記述。
og:image
<meta property="og:image" content="ページのアイキャッチ画像のURL">SNSなどで共有された際に表示される画像を絶対パスで指定。
※作成する画像は下記サイトなどを使用すると便利です。
OGPシミュレーター：https://ogimage.tsmallfield.com/
ラッコツールズ：https://rakko.tools/tools/9/
og:site_name
<meta property="og:site_name" content="サイト名">サイトのタイトルを記述。
おまけのタグ
私は使用していませんが他にも下記のようなタグもあるようです。
<meta property=”og:email” content=”メール”/>
<meta property=”og:phone_number” content=”電話”/>
<meta property=”og:fax_number” content=”FAX”/>
<meta property=”og:street-address” content=”番地建物”/>
<meta property=”og:locality” content=”市区町村”/>
<meta property=”og:region” content=”都道府県” />
<meta property=”og:postal-code” content=”郵便番号”/>
<meta property=”og:video” content=”動画のファイル” />
<meta property=”og:video:height” content=”動画の高さ” />
<meta property=”og:video:width” content=”動画の幅” />
<meta property=”og:video:type” content=”動画のファイルタイプ” />
<meta property=”og:audio” content=”音楽のファイル” />
<meta property=”og:audio:title” content=”音楽のタイトル” />
<meta property=”og:audio:artist” content=”音楽のアーティスト” />
<meta property=”og:audio:album” content=”音楽のアルバム” />
<meta property=”og:audio:type” content=”音楽のファイルタイプ”/>まとめ
最近では職業訓練校を出てすぐにフリーランスなるといった方もよくみかけますが、サイトを作れるという能力をつけておくより、OGPのような知識を沢山持っておく事で、依頼する側は仕事を出しやすくなったり、報酬アップなどにもつながりやすくなると思いますので、少しでも参考になる方がいてくださると嬉しいです。
今回10年前から使用してた状態のものもそのまま使っていても問題はなさそうでしたが、descriptionの文字数など改めて考え直すいい機会になりました。
他にもTwitterやFacebook用のタグなどについても、改めてまとめ直したいと思います。
