私も初めてこの疑問に取り組んだ際には、てこづりました(汗)
Twitterは、
Facebookのように投稿に貼るURLから自動的にサムネ画像やページ情報を取得してくれません。
(一部、You-YubeやShoppifyなど利用者が多いドメインには対応しているようですが、ほとんどの独自ドメインは未対応です。)
Twitterで、
URL情報を反映したツイートをするには、
そのURLのページに必要なコードを埋め込み、
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ページにはコード埋め込みが必要なため、第三者のWebページは向きません。
筆者は複数のドメインを所有していますが、
WordPressテーマによっては、
各ページのhead部分にコードを書き込むのが(私レベルのスキルでは)難しいものもありました。
ランディングページ向きのWordPressテーマは各ページごとの設定が容易なようです。
ちなみに、
私が使用しているランディングページ用のWordPressテーマは、
LPテンプレートクリエイティブパック「Colorful(カラフル)」通常版 です。
今は、
1クリックで、LP全体のデザインが完成するページ単位のデザインテンプレートが用意された、
LPテンプレートクリエイティブパック「Colorful(カラフル)」上位版 もあるようです。
私のブログ記事に使用している(上記のカラフルではない)WordPressテーマは、
個々の記事ページのhead部分に故―d-が(私のスキルでは)書き込めませんでした。
そこで、
ジャンプページという手法を使って、
カラフルで作成したランディングページを経由する形で、
Twitterにブログ記事のURLを貼ることで対応しています。
ジャンプさせたい場合には、
以下のコードも一緒にページのhead部分に書き込みます。
<meta http-equiv=”Refresh” content=”0;URL=表示させたいWebページのURL“>
<title>表示させたいWebページのタイトル</title>
コード中の数字を「0」にしています。
これは0秒でジャンプするという設定です。
0秒といっても経由ページは一瞬表示されます。
経由ページには「ジャンプします」など記載しておくのがいいと思います。
では、(ジャンプページを含まない)コードのテンプレートを紹介します。
以下を対象ページのリンク表示させたいページの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部分?」につまずいた方は、
その疑問を解消なさってから作業にとりかかってください。
③Twitterで正常に表示されるかの確認を兼ねてURL情報を専用サイトから登録する。
PCブラウザでまず表示させるTwitterアカウントでTwitterを開く。
タブ追加にて
https://cards-dev.twitter.com/validator
を開く。
「カードのURL」欄にリンク先ページ(コード埋め込み後)URLを入力。
問題なければ
このように表示されます。
あとは、このリンク先WebページURLを書き加えたツィートをすれば、
このように自動的に画像およびリンクが認識されますので。いつも通りツィートすればOKです。
今回は、★ツィート画像にURLをリンクさせる方法★についてご案内しました。
Webページにコードを埋め込むことさえできれば、簡単に使いこなせますね。