■ 2018/12/30 更新 ■
本記載の内容を試したところ、サイト トップページの表示が大変遅くなる(Chrome DevTools 検証 約30秒) という事象を確認しました
本サイトでは本記事記載のプログラムを一時無効にしております
もし本記事を参考にされる方がいらっしゃいましたらご注意いただけますようお願いいたします
TwitterでURLを貼り付けると派手な表示になる場合と地味な表示になる場合がある
派手な表示の方が見栄えもよく、概要が出てるから読みたいと思うが
地味な表示だと何が表示されてるかわからいので読みたいとあまり思わない
本サイトは「地味な表示」にしかならず悲しい思いをしたので調べた内容を紹介したい
その名は「Twitter Cards (ツイッターカード)」
ブログでのリンクも派手な表示は「ブログカード」と呼ばれていた
リンクを 名刺のようなカード上に表示するから「○○カード」と呼ぶのだろうと思うのだが、由来までは確認できなかった
( 参考までに ブログカードに関する記事は以下 )
解決方法
HTMLのヘッダに metaタグを追加する
<meta name="twitter:card" content="summary">
<meta name="twitter:description" content="TwitterでURLを貼り付けると派手な表示になる場合と地味な表示になる場合がある派手な表示の方が見栄えもよく、概要が出てるから読みたいと思うが地味な表示だと何が表示されてるかわからいので読みたいと">
<meta name="twitter:title" content="Twitter リンクの表示を変えたい">
<meta name="twitter:url" content="https://www.minority.top/tips/590/">
<meta name="twitter:image" content="https://www.minority.top/wp-content/uploads/2018/12/image-63.png">
<meta name="twitter:domain" content="www.minority.top">
<meta name="twitter:image:width" content="586">
<meta name="twitter:image:height" content="286">
<meta name="twitter:creator" content="@Bee21720082">
<meta name="twitter:site" content="@Bee21720082">この記事はこんな人におすすめ
- Twitter Cardsって何ですか ?
- metaタグって何ですか ?
リンクから Twitter Cards に変換されるまで
テキストの表現で申し訳ないが、TwitterのURLへアクセスしてからブラウザに表示されるまでは以下の工程を踏む
- TwitterのURLにアクセス
- TwitterのサーバーがHTML(*1)を返却
- ブラウザ上に表示される際、HTML内の URLへアクセス
- HTML内に記載されたURLのHTMLを解析(*2)
- 解析が成功すれば Twitter Cardsに変換して表示
- 解析に失敗したら テキストリンク(青文字のやつ)として表示
*1 HTMLとは
WEBページを表現するプログラム言語。Hyper Text Markup Language の略。
ブラウザで 右クリック → ページのソースを表示 を選択するとどんなものか確認できる
人間が読みやすいものではないが、ブラウザがHTMLを解析して人間にやさしい形に変換して表示してくれている
*2 解析の内容
HTMLに記載されている特定の文字を検索し、指定された文字を抽出する
Twitter Cardsの場合の「特定の文字」とは、metaタグに記載された後述する twitter:XXX になる
metaタグを 追加しよう
他ページの情報を見やすく表示するものは「OGP」と呼ばれる技術で、Twitterに限らず Facebookなど 各種SNSにも存在している
今回は Twitterに特化して紹介する
<meta name="twitter:card" content="カードの種類">
<meta name="twitter:description" content="記事の概要">
<meta name="twitter:title" content="記事のタイトル">
<meta name="twitter:url" content="記事のURL">
<meta name="twitter:image" content="画像のURL">
<meta name="twitter:domain" content="ドメイン">
<meta name="twitter:image:width" content="横幅">
<meta name="twitter:image:height" content="高さ">
<meta name="twitter:creator" content="@アカウント">
<meta name="twitter:site" content="@アカウント">カードの種類は 2種類。summary か summary_large_image を指定。
ユーザー名は Twitter上のアカウント。@XXX で表示されている
WordPressではどうするか
metaタグは HTMLの <head>～</head>内に記述せねばならず、WordPressではテーマの編集をしないと <head />内は書き換えられない
テーマの編集では 1種類しか設定出来ないので 投稿を表示する際のプログラムを編集しないと対応できない
対応方法は 以下サイトを参考にしていただければ。
プラグイン不要でTwitterカードをコピペでサクッと設置する方法｜WordPressカスタマイズ
コピペとちょっとした編集でWordpressブログにTwitterカード情報を表示させる方法です。
2018/12/28更新。実際にやってみた
上記サイトに従い、やったことは 以下。
- twitter-card.php のソースを notepad++ にコピペ
- twitterのアカウント部 更新
- 子テーマなので get_template_directory_uriをget_stylesheet_directory_uri へ置き換え (2箇所)
- [ Twitter Cardsに登録 ] の手順は SKIP ( 記事は 1年前のもの。2018年12月時点で仕様が変わったのか 紹介されている画面等 確認できなかったので省略。動作上は問題なさそうなので twitterへアカウント登録しているのであれば手順不要かと。)
- レンタルサーバー上に ファイル作成 → twitter-card.php として保存 (保存場所は 利用中のテーマ/wp-content/themes/(テーマ名)/ の下 )
- WordPress テーマの編集 > header.php に <?php get_template_part(‘twitter-card’);?> を追加 (使ってるのが子テーマの場合は 編集するのは 親テーマ)
あとがき
未設定。上記紹介ページを参考にプログラムを編集する予定
尚、本記事を記載するにあたり 参考にさせていただいたサイトは以下。
【2018年版】Twitterカードとは？使い方と設定方法まとめ
今回はTwitterカード（ツイッターカード）の使い方と設定方法をまとめて解説します。「Twitterカードって何？」というところから解説するので、ご存じの方はサクッと読み飛ばしてください。上手く設定すれば、記事拡散時のクリック率がグッと上がるはずです。 Twitterカードとは？ 種類はどちらを選ぶべき？ Twitterカードの使い方 【ブログ別】設定方法 カードが表示されないときの対処法
2018/12/28更新 実践結果
プログラム更新後、検証サイト(Card Validator)で確認
