html head の書き方 – sns でシェアされたページを写真付きでカード形式で表示する方法

前回は html の head 部分に記載する SEO に関連する内容を中心にまとめました。今回は sns 対策を中心に、 head 部分に記載する内容をまとめていきます。

html 基本のキ。head に書くべき最低限のこと

facebook や twitter でリンクシェアされた際の設定

作成したページが SNS でシェアされたときに、美しく表示されるように設定しましょう。

例えば twitter で記事がシェアされるとこのように画像とともにカード形式で表示されるようにできます。

リンクがカード形式で表示されると見栄えもいいし、リンクをポチってくれやすくなるので設定しておいて損はありません。

twitter 対策方法

twitter でリンクがシェアされた時に表示されるカード形式は4種類。ここでは2種類紹介します。

上の画像のように「画像が小さく表示されるカード」か「画像が大きく表示されるカード」があります。

画像が小さく表示されるカードの設定方法

下記のように head 内に記述します。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@yukiYetiNavi">
<meta name="twitter:title" content="RRSPで始める税金対策...など紹介します">
<meta name="twitter:description" content="カナダで長期滞在するなら...解説します。">
<meta name="twitter:image" content="https://yeti-app.com/.../money.jpg">

twitter:cardsummary の場合、小さな画像のカード形式で表示されます。

画像が大きく表示されるカードの設定方法

下記のように head 内に記述します。

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yukiYetiNavi">
<meta name="twitter:title" content="RRSPで始める税金対策...など紹介します">
<meta name="twitter:image" content="https://yeti-app.com/.../money.jpg">

twitter:cardsummary_large_image の場合、大きな画像のカード形式で表示されます。

この場合、 twitter:description は設定していても表示されないので削除可能です。

twitter card が正しく設定されているか確認したい場合は、下記のリンクから確認できます。
twitter developer – card validator

また、詳細はオフィシャルホームページで確認できます。
twitter developer – twitter card (英語)

facebook など対策方法

twitter では独自の方式でウェブページから情報を取得してカードを作成していますが、facebook やその他サービスでは opengraph という方式を採用しています。

open graph の例は下記の通り。 head 内に記述します。

<meta property="og:url" content="https://yeti-app.com/rrsp" />
<meta property="og:type" content="article" />
<meta property="og:title" content="RRSPで始める税金対策...など紹介します" />
<meta property="og:description" content="カナダで長期滞在するなら...解説します。" />
<meta property="og:site_name" content="YETI NAVI" />
<meta property="og:image" content="https://yeti-app.com/.../money.jpg" />

og:type

og:type には下記のようなものを指定できます。

  • website: ウェブサイト
    更新などがないページの場合はこちらを利用する。
  • article : ブログ記事のようなウェブページ
    リリース日や更新日など、細かい指定が可能。最新の記事だということを伝えやすい。
  • video: ビデオ
    何分のビデオか・誰が出演しているか、などビデオに基づいた設定が可能

他にも profile, image, music, book など多くの指定が可能。

og:title

タイトルを指定します。facebook では、タイトルが長い場合は og.description が非表示になる場合があります。

og:image

リンクをカード形式で表示する際の画像を指定します。これを指定しないと魅力的に見えないので必須の項目です。

open graph ではその他多くの項目を設定可能です。詳しくは下記リンクで確認できます。
Open Graph Protocol (英語)

こんな記事も読まれています

投稿はありません。

もう記事がありません

エラーが発生しました

もっと表示する

ウェブ開発へのお問い合わせはこちらから

ウェブサイトやアプリ開発をしております。
どんなものを作りたいのかを明記した上でお問い合わせをお願いします。
また、簡単な質問や要望も受け付けています。まずはお気軽にお問い合わせください。

  • 入力必須です。
  • 入力必須です。
  • メールアドレスの形式で入力してください。
  • 入力必須です。
OR

お問い合わせを送信しました。
24時間以内に返信させていただきますので、しばらくお待ちください。
お問い合わせありがとうございました。

送信に失敗しました。
何度も失敗するようでしたら、こちらからお問い合わせください。