fbpx

★ツィート画像にURLをリンクさせる方法★最新版★

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/

 

マーケティングの視点で見る、Twitter vs Treads

 

Twitter集客で集客・収益を生む!

Twitterを攻略して、あなたが欲しい『影響力』を手に入れよう!

Amazon Kindleにて好評発売中★電子書籍なら299円★紙書籍は1,000円

本書では、誰も表立って語ってこなかったTwitter攻略法を詳細に解説しています。
それらTwitterであなたの『影響力』を得られる方法を知ったあなたには…

↓ ↓ ↓ ↓ ↓

“攻めのビジネス”が仕掛けられるのがSNSです!

なかでもTwitterマーケットは
Twitterの利用者が多く、かつアクティブユーザーがはっきりしていて、
各Twitter利用者の属性も見極めやすいことなどから、
魅力的なSNSマーケティングの場であることは否定しようがありません。

ところが、最近少し特殊なこと、異変が起こっています。

Twitter運営側がAPIやIPなどの様々な規制を行った結果、
「Twitter自動集客ツール」で今なお生き残っているものがほとんどなくなりました。

ということは、
今のTwitterマーケットで使える「Twitter自動集客ツール」を持っている人達、
その一部の人達にとっては、
「今、Twitterは熱いよね!!」となっている訳です。

そうです。
競合がどんどんTwitterマーケットから退場していっているのです。

そんな中、2016年から進化し続ける「Twitter自動集客ツール」があります。

本書籍の巻末でも弊社虎の子の「Twitter自動集客ツール」に触れています。