2023.8.23更新
私も初めてこの疑問に取り組んだ際には、てこづりました(汗)
X(旧Twitter)は、
Facebookのように投稿に貼るURLからサムネ画像やページ情報を自動で取得してくれません。
(一部、You-YubeやShoppifyなど利用者が多いドメインには対応しているようですが、ほとんどの独自ドメインは未対応です。)
X(旧Twitter)で、
URL情報を反映したツイートをするには、
①そのURLのページに必要なコードを埋め込み、
②X(旧Twitter)側にURL情報を登録することが必要です。
最初は慣れないので煩雑に感じますが、
慣れれば問題なくなります。
私自身このことをネット検索した際に、
的確な解説が見つけられなかったので、
備忘録の意味も込めて、
以下にまとめました。
★ツィート画像にURLをリンクさせる方法★
(正確にはTwitterカード「Summary Card with Large Image」という仕組みになります)
ツィート画像にURLをリンクさせる方法は以下の通りです。
①ツイートに表示させる縦横比1:2の画像を用意する。
②リンク先となるWebページを作り、HTMLコードを操作(書き込み)する。
③Twitterで正常に表示されるかの確認を兼ねてURL情報を専用サイトから登録する。
必要となる環境やスキルは、
WordPressなどでWebページが作成できること、
その個別ページのhead部分に特定のHTMLコードを書き込めることです。
では、具体的に解説していきます。
①ツイートに表示させる縦横比1:2の画像を用意する
※画像は自分のサイトに(メディア)アップロードしURLを控えておく。
②リンク先となるWebページを作り、HTMLコードを(書き加える)操作する。
この作業は「(Webページの)ヘッダーにHTMLコードを書き加える」というものです。
以下の説明はWordpressでページを作成することを前提にお話しています。
ここでの作業は、
Webサイト(ドメイン)一括で設定するか、
個別Webページごとに設定するかのどちらでも可能です。
一括設定した場合は、
SNSで表示される画像などがどの同一サイト内URLを貼っても同じ表示になってしまいます。
やはり、個別ページ毎に作業なさるのが手間ですが)現実的でしょう。
「(Webページの)ヘッダーにHTMLコードを書き加える」方法には2つあります。
①プラグインを使う。
②個別Webページのヘッダーhtmlに直接コードを書き加える
①プラグインを使う。
WPCode というプラグインを私は使っています。
もしあなたがElementor PROをお使いでしたら、プラグインなしに個別ページのヘッダーにHTMLコードを書ける機能が実装されていますので、このようなプラグインのインストールは必要ありません。
WPCode
https://ja.wordpress.org/plugins/insert-headers-and-footers/
②個別Webページのヘッダーhtmlに直接コードを書き加える
これが簡単にできるかどうかは使っているWordpressテーマによって異なります。
ちなみに、
私が使用しているランディングページ用のWordPressテーマは、
LPテンプレートクリエイティブパック「Colorful(カラフル)」通常版 です。
今は、
1クリックで、LP全体のデザインが完成するページ単位のデザインテンプレートが用意された、
LPテンプレートクリエイティブパック「Colorful(カラフル)」上位版 もあるようです。
では、HTMLコードのテンプレートを紹介します。
以下を対象ページのリンク表示させたいページのhead部分に書き加えます。
(オレンジ色部分をあなたの情報に書き換える)
<meta name=”twitter:card” content=”summary_large_image/“>
<meta name=”twitter:site” content=”@ユーザー名(←Twitterアカウント) ” />
<meta property=”og:url” content=”リンク先WebページURL” />
<meta property=”og:title” content=”リンク先Webページのタイトル” />
<meta property=”og:description” content=”リンク先Webページの要約など” />
<meta property=”og:image” content=”表示させたい画像URL” />
上記のコードを
<head>
と
</head>
の間に挟んで書き込みます。
ここまで書いてなんですが、
「Webページのhead部分?」につまずいた方は、
その疑問を解消なさってから作業にとりかかってください。
また、
どうしてもリンクさせたいWebページで①②のどちらの作業もできない場合は、
上記作業ができる別のWebサイト(ドメイン)を用意して、
ジャンプページという手法を使って対応します。
ジャンプさせたい場合には、
上記のコードも一緒にページのhead部分に書き込みます。
<meta http-equiv=”Refresh” content=”0;URL=表示させたいWebページのURL“>
<title>表示させたいWebページのタイトル</title>
コード中の数字を「0」にしています。
これは0秒でジャンプするという設定です。
0秒といっても経由ページは一瞬表示されます。
経由ページには「ジャンプします」など記載しておくのがいいと思います。
③Twitterで正常に表示されるかの確認を兼ねてURL情報を専用サイトから登録する。
PCブラウザでまず表示させるTwitterアカウントでTwitterを開く。
タブ追加にて
https://cards-dev.twitter.com/validator
を開く。
「カードのURL」欄にリンク先ページ(コード埋め込み後)URLを入力。
問題なければ
このように表示されます。
あとは、このリンク先WebページURLを書き加えたツィートをすれば、
このように自動的に画像およびリンクが認識されますので。いつも通りツィートすればOKです。
今回は、★ツィート画像にURLをリンクさせる方法★についてご案内しました。
Webページにコードを埋め込むことさえできれば、簡単に使いこなせますね。
こちらのページ(外部サイト)でも詳しく解説されています。
更に深く理解されたい方はご参照なさってはいかがでしょうか?
Twitterカードとは?設定・確認方法と便利なツールを紹介https://keywordmap.jp/academy/twitter-card/