MENU

Twitterカードの設定をしてみた

【過去に書いたブログ記事のリライト版です】

目次

Twitterカードの設定をしました。

こんにちは。ふじです。

さて、Next.jsで作ったブログで、記事を投稿した際に、公開した記事の共有ボタンから自分のツイッターでブログ記事を投稿したことをお知らせしたりしています。

今日はタイトルにもあるとおり、Twitterでの共有にあたり、ブログのサムネイルやタイトル、ディスクリプションなどが表示される、いわゆる「Twitterカード」の設定についてまとめてみました。

WordPressを使ってブログを作ると、Twitterカードはちゃんと設定されているけど、自作すると設定がいくつもあり、ツイッターにちゃんと共有することは意外と大変だと感じ、ありがたみを感じています。

設定はこちらのサイトを参考にさせていただきましたので、ご紹介させていただきます。

それではやっていきましょう!

※バックエンドはmicroCMSを使用しています。ブログデータの取り出し方などはこちらの記事を参照してください。

Next.jsの設定

まずはNext.jsの設定をしていきます。

新しいプロジェクトを作成するようにcreate-next-appを実行し、プロジェクトを作成してください。

5分くらいかかると思いますので、少し待ちます。

そうするとおそらく_app.jsが作成されると思います。

これは、すべてのページに共通で適用される内容・挙動を記載しておくファイルになります。

本来であれば、ここにHTMLheadタグの中身やscriptタグでBootstrapなどを読み込む形をとることが一般的ではないかと思います。

今回は、別途componentsディレクトリの中にHeadInfo.jsというファイルを作り、headタグの中身をcomponentとして作成し、各ファイルに適用する形としています。

(デザインやその他機能の設定のため、敢えて分けています。)

それでは、今回作成したTwitterカード用の設定の全体を表示します。

(Twitterカード用の設定以外は省略しています。ご了承ください。)

import Head from "next/head";

 const Head_info = ({ title, description, ogImage, url }) => {
  // website Url
  const pageUrl = "あなたのブログのURL";
 // ogImageがない場合に表示する汎用画像など
 const ogImg = "共通の画像など";

  return (
    <>
      <Head>
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content={title ? title : "ブログタイトル"} />
        <meta
          name="twitter:description"
          content={
            description
              ? description
              : "ページディスクリプション"
          }
        />
        <meta name="twitter:image" content={url ? url : ogImg} />
      </Head>
    </>
  );
};

export default Head_info;

それでは、それぞれの詳細を見ていきます。

設定が必要な項目

Twitterカードを設定する場合には以下のような項目が必要となります。

  1. twitter:card : カードの種類(必須)
  2. twitter:site : WebサイトのTwitterID
  3. twitter:creator : コンテンツ作成者のTwitterID
  4. twitter:title : ページのタイトル(必須)
  5. twitter:description : ページの説明(必須)
  6. twitter:image : アイキャッチ画像のURL(必須)

それぞれの項目について見ていきたいと思います。

metaタグ①~twitter:card~

まず一つ目のmetaタグは、

<meta name="twitter:card" content="summary_large_image" />

です。

これは、Twitterカードを使用する際に、必須となる項目であり、カードの表示内容を決めるものです。

私のサイトの場合は、summary_large_imageを使用しています。

これを設定することで、Twitterカードの表示内容が変わります。

パターンとしては以下のような形となります。

// 通常(画像が小さい)パターン
<meta name="twitter:card" content="summary">

// 以下の画像のパターン
<meta name="twitter:card" content="summary_large_image" />

summary_large_imageの例(公式ドキュメントより)】

※summary(通常)パターンは公式には載っていませんでしたので省略します。

metaタグ②~twitter:title~

次に、

<meta name="twitter:title" content={title ? title : "ブログタイトル"} />

の設定です。

これは、Twitterカードに表示させるタイトルの設定です。

metaタグに内容を直接書いてツイッターカードに渡す情報を設定してもいいですが、それではページ毎に設定することが多く大変です。

そこで、各ページの表示の際にデータを渡し、それを使用して表示を毎回変えています。

ここで注目なのは、三項演算子を用いて表示を切り替えている点です。

波括弧「{ }」で囲むことでJavaScriptが実行されます。

今回は、titleプロパティの有無により表示を変えています。

ちなみにこのtitleプロパティについては、今回componentとして作成したHeadInfopages内で読み込む際に、各ブログ記事に渡し、その内容により表示が切り替わる、という形を取っています。

例えば、

<HeadInfo 
  title={ blog.title }
  description={ blog.description }
/>

のように、ブログの各記事では、ブログデータをmicroCMSから取り出す設定を同一ページ内に記述しています(getStaticPropsの部分ですね)。

この、各ページの生成をする場合に、microCMSからデータを受け取り、その中のblog.titletitleというプロパティに渡しています。

これらのデータが渡されない場合(プロパティとしてデータがない場合や空欄(” “)の場合など)は、三項演算子の後半部分(:(コロン)以降)が表示されます。

読み込んでいるmetaタグでは、blog.titleを渡すことで、titleプロパティがない場合でも、「ブログタイトル」の部分だけは表示されるように設定しています。

metaタグ③~twitter:description~

次は、ツイッターカードの表示にあたっての簡単な説明を表示するように設定します。

<meta
  name="twitter:description"
  content={ description ? description : "ページディスクリプション"}
/>

基本的には考え方はtwitter:titleと同じ設定です。

三項演算子を用いた表示の切り替えをしています。

データの渡し方も同じです。

metaタグ④~twitter:image~

これはTwitterカードのイメージ画像の部分を取得するmetaタグです。

<meta name="twitter:image" content={url ? url : ogImg} />

他のmetaタグと異なる部分が一箇所あります。

それは三項演算子の最後のogImgの部分です。

これは本来であれば、「FacebookバージョンのTwitterカード」みたいなものを生成するときにイメージ画像の取得をするものだったかと思います。

今回は、このogImgに固定の画像を設定しておくことで、個別のイメージ画像がないページの画像をどう表示するか判断しています。

このようにheadの中でTwitter用のmetaタグを設定するだけで、共有する際のツイッターカードが作れてしまうのは便利ですよね。

Twitterで共有した際に、より注目を浴びることができるのではないでしょうか!

最後に

今回は自作ブログにおけるTwitterカードの設定まとめてみました。

すでに皆さんは知っている内容かもしれませんが、自作するとこれって意外と難しいんだな、細かい設定があるんだなと改めて感じました。

そして、改めてWordpressは便利なんだなーと思いました。

今回はここまでです。

これからも記事を書いたら、このTwitterカードで共有したり、お知らせしたりしていきますので、今後も引き続き読んでいただけると嬉しいです。

今回も最後まで読んでいただき、ありがとうございました!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

はじめまして、ふじです。
Python、Django、FastAPI、React.js、Next.jsを学習している、ずっと文系のプログラミング独学者です。

目次