OGPとTwitterカードをWordPressで実装した SNSに強い施策

更新 2022/09/21

上の画像のように、デバイスにあわせて横幅を自動調整表示してくれる、このレスポンシブサイト、
スマホでもタブレットでも、縦でも横でも自動で横幅にあわせて表示してくれるから便利ですよね。

TwitterカードとかOGPって何ですか?

URLつきツイートの時に、リンク先のタイトルや説明文、サムネイル画像などの詳細情報を、リッチに
わかりやすく表示してくれるTwitterの機能の事をTwitterカードといいます。

OGP(Open Graph Pro)は同じような内容をFacebookに表示してくれる機能の事です。Facebookの投稿欄に、
urlを貼り付けただけで、一瞬でそのリンク先の詳細が画像付きで表示される便利な機能の事。

この機能を自社のウェブサイトに実装しておくと、SNSでの拡散がしやすくSNSマーケティングに効果的です。

プロでも手間のかかるこの作業を簡単にしてくれるテーマがあります。

「テーマ」というのはワードプレスのテンプレートの事ですが、レスポンシブサイトでしかも、
SNSのSEOに強いと評判なのが「賢威」です。「賢威」はバージョン6.2からTwitterカードとかOGPの
実装を採用しやすくなりました。

それ以外にもこのポートフォリオサイトのテーマ「INNOVATE HACK」にもTwitterカードとかOGPの実装
機能が搭載されています。それ以外にもいろんなテーマに採用されているはずなのでチェックを入れて
おいてくださいね。

参考:OGPとは. Twitterカードとは

「INNOVATE HACK」での設定

OGPとTwitterカードをWordpressで実装した SNSに強い施策

「賢威」での設定

OGPとTwitterカードをWordpressで実装した SNSに強い施策

それぞれのテーマの設定の中に、Facebook、Google+、Twitterカードの項目があり、設定してしまうだけで、
何と下のように、ソースのheadに、OGPと、microdataと、Twitterカードのmetaが自動書き出しされてしまいました。

OGPとTwitterカードをWordpressで実装した SNSに強い施策

このすごさは、OGPと、microdataと、Twitterカードの設定を、別々に手動でやった事がある人には、
わかるはず。大変な手間がかかる作業で、このSEO対策を専門にしてる会社があるくらいです。
つまりWebデザイナーも、これができると、「SEOもできます」と言って差し支えありません。

今後のために賢威でのTwitterカードとOGPを同時設定をメモしておきます。

先にFacebookの設定を先に行います。つまりOGPを設定しないと、Twitterカードの設定も活きない
からです。この段階でのポイントは、Facebookでの自分のIDの、AppIDと、管理者IDを、
Facebook設定画像の各欄に入れ、タグの出力を有効にして、変更を保存。

次に、その下のGoogle+の設定は、タグの出力を「無効にする」から「有効にする」に変え、
サムネイル画像を設定して、変更を保存するだけですから簡単です。

ここから問題のTwitterカードの設定です。左で「Twitterカード」を選び、タグの出力を
「有効にする」、種類は、Summary Cardが、サムネイル画像の大きさが少し小さいだけ、
Summary card with Large Imageの方は、サムネイル画像が少し大きくなります。
その画像をこのように決めたら、変更を保存します。

OGPとTwitterカードをWordpressで実装した SNSに強い施策

TwitterカードのCard validatorで、チェックすると、ここまでの段階で、まだ下のように、
「Not whitelisted」ホワイトリストに登録されていないという警告が出ています。

OGPとTwitterカードをWordpressで実装した SNSに強い施策

これを解除するために、Twitterカードに申請を行います。申請時のガイドラインはこちら。

URL を Twitter に承認申請して、ホワイトリスト化してもらう手順が必要なのです。上の画像で、
「Preview card」の下に、「Request Approval」という青いボタンがありますから、そこをクリックします。
すると次のステップはこのようになります。ここで記入するのは、Website Infomationの下にある、
Descriptionの欄です。ここにそのサイトの説明(ソースでdescriptionに記入するテキスト)を入力して、
下の「Request Approval」を押し、申請を送信します。きちんと準備して1回だけ送信します。

この時、記載されているEmailアドレスを確認しておきます。

OGPとTwitterカードをWordpressで実装した SNSに強い施策

Descriptionの下に、Mark my cards as containing sensitive contentと記載のチェックは
つけないようにします。これはコンテンツが一般的ではなく、暴力とかアダルトとか、
の場合につけて、内容により許可をもらうよう申請するためのチェックです。

申請後の画面はこのように、申請を受付、保留中の表示に変わります。

OGPとTwitterカードをWordpressで実装した SNSに強い施策

しばらくすると確認しておいたEmailアドレスに、「Your Twitter card is ready!」という件名の
メールが届きます。「あなたの◯◯◯.comサイトは、Twitterカードでアクティベートされました」

OGPとTwitterカードをWordpressで実装した SNSに強い施策

念のためCard validatorを、サイドチェックしたら、ここでも「Card loaded successfully」と表示確認。

OGPとTwitterカードをWordpressで実装した SNSに強い施策

そのサイトのソースheadが、上から3番目の画像のように、自動出力されたのを確認できます。
また、そのサイトのワードプレスの管理画面で、新規投稿しょうとすると、このように、
「OGP・Microdata・Twitterカードの個別設定」という欄が、作成されています。

OGPとTwitterカードをWordpressで実装した SNSに強い施策

これは何かというと、今後の投稿記事は、投稿時ここに、投稿内容のタイトルや、説明文など、
記入しておけば、設定しておいたサムネイル画像とともに、タイトルや説明が表示され、
SNSからのアクセスを集めやすくなるわけです。

Webサイト作品集_齋藤天津子

Webサイト作品集_齋藤天津子 Webデザイナー

お問合せ_Atsuko Saitoh

お問い合わせフォーム_齋藤天津子 Webデザイナー

ピックアップ記事

  1. 上のアイキャッチ画像を見て下さい。スパイウエア「ペガサス」がスマホやPCに入ってしまったら、被害者は…
  2. 「あなたの名前"Copilot"さんって、何て読むんですか?」と本人に聞いてみたところ、Copi…
  3. Affinity Photoでも簡単に電子印鑑ができます!
    目次2023年10月インボイス制度導入前、Affinity Photoでの電子印鑑…
  4. ホームページの制作(Web制作)は、専門職がチームを組んで行います。見ず知らずの人たちが一緒に仕事を…
  5. (3)-3 GAFAMAからの脱出 2022年ブラウザはこれに決めました!おすすめ理由
    目次GAFAMAからの脱出する上で何はともあれブラウザの存在は大きいブラウザのセキュリティ度計…

Web制作の流れ

Web制作の流れ
もっとくわしい何を頼めるの?料金は?
PAGE TOP