Twitterカードの作り方

Twitterカード

Twitterカードに関する Twitter の解説ページは、今( 2017年 10 月 11 日現在)は日本語とか提供されていません。僕は英語に不自由しているので困ってしまいます。

Twitterカードの作り方

  1. 必要事項を書いた HTML を作ります。簡単です。
  2. 上記の URL をツイートします。ツイートに書いた URL が Twitterカードに変換されるので、 URL 自体は表示されません。
  3. Twitter が提供する表示確認ツール Card validator で確認します。

Twitterカードのいろいろなこと

絵文字

Twitter の絵文字が使えます。使うには Twitter のツイートするときの画面で絵文字を書いてコピペして使います。

Twitterカード未対応のページで使いたい

例えば、小説家になろうは Twitterカードに対応していないので自分の作品の URL を書いても Twitterカードが表示されません。そこで、自分が自由にできるサイト( FC2ホームページでもいい)に Twitterカード用のページを作って、そこから最終目的地の URL へリダイレクトさせて飛ばします。

リダイレクトされたことに、あまり気付かないのですが、でも Twitterカードには元のページのドメインが表示されているので騙された感は否めないかもしれません。要注意です。

コード

基本

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="twitter:title" content="Twitterカードのタイトル">
<meta name="twitter:description" content="Twitterカードの説明文。 64 文字くらいまで。">
<meta name="twitter:image" content="Twitterカードの画像。 504 x 252 px 。">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="Twitter の自分の ID 。例: @camellia">
</head>
</html>

リダイレクトさせるとき

<head> の中に下のコードを書きます。

<script>
window.location.href = "リダイレクトで飛ばしたい URL 。";
</script>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="twitter:title" content="Twitterカードを作ろう!">
<meta name="twitter:description" content="ゴニョゴニョ">
<meta name="twitter:image" content="http://yayoi-thyme.com/twitter-card/parts/image.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@camellia">
<script>
window.location.href = "https://twitter.com/";
</script>
</head>
</html>