超単純にTwitterカードを設置する方法

WEBシステム作っていたら、Twitterカードを設置したくなるよね

TwitterだけじゃなくSNSにサービスのURLを貼る場合、URLだけ表示されるより画像ある方が見てくれる率が上がる。
ブログやThreadsとかでもカード画像は使われるし、どうせなら指定しておきたい。

でもめんどくさいことはしたくない。
心から。

だから最低限の設定で表示させる方法。

WEBシステム作っていたら、Twitterカードを設置したくなるよね

基本というか最低限

最低限、これだけの情報あれば表示出来る。

<meta name="twitter:card" content="カード種類" />
<meta name="twitter:site" content="@アカウントID" />
<meta property="og:url" content="対象URL" />
<meta property="og:title" content="対象タイトル" />
<meta property="og:description" content="対象の説明" />
<meta property="og:image" content="対象用画像のURL" />

『og:』は他のSNSでも有効になる。
設定内容については、こっちの記事に書きました。

確認方法

意図通りに表示さるかどうか、実際のイメージを確認する。
上記で設定したアカウントと同じアカウントからではなくとも、確認は出来る。
Card Validator | Twitter Developers

PHP

画像は決め打ち。
画像をどうにかしたい場合は、各々頑張ってください。

<?php
$og_url = (empty($_SERVER['HTTPS']) ? 'http://' : 'https://') . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
$html = file_get_contents($og_url);
$html = mb_convert_encoding($html, mb_internal_encoding(), "auto" );
$og_title = '';
if ( preg_match( "/<title>(.*?)<\/title>/i", $html, $matches) ) {
   $og_title = $matches[1];
}
$meta = get_meta_tags($og_url);
$og_description = $meta["description"];
?>
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@qooga" />
<meta property="og:url" content="<?php echo $og_url; ?>" />
<meta property="og:title" content="<?php echo $og_title; ?>" />
<meta property="og:description" content="<?php echo $og_description; ?>" />
<meta property="og:image" content="http://ex.com/img/kakkokari.jpg" />

WordPressで突貫

All in One SEOとかプラグイン使ったり、テーマ適応するだけで設置できるから、基本的に気にしなくていいけど

完全ゼロからテンプレート作っていて、プラグインは最低限だけですー

とか、会社にあるあるなど都合上使えない人向け。
画像は決め打ち。

<?php
if( is_singular() ) { // 記事・固定ページ
   $og_title = $GLOBALS['post']->post_title;
   $og_description = mb_substr(strip_tags($GLOBALS['post']->post_content), 0, 100);
   $og_url = get_permalink();
} elseif ( is_front_page() || is_home() ) { // トップページ
   $og_title = get_bloginfo('name');
   $og_description = get_bloginfo('description');
   $og_url = home_url();
}
?>
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@qooga" />
<meta property="og:url" content="<?php echo $og_url; ?>" />
<meta property="og:title" content="<?php echo $og_title; ?>" />
<meta property="og:description" content="<?php echo $og_description; ?>" />
<meta property="og:image" content="<?php echo home_url(); ?>/img/kakkokari.jpg" />

カード設定の注意点

Twitterでは画像名に使うとスパム判定される文字がある

カードの指定にはURLを使うから、あっちから画像ファイル名が見れるわけじゃない。
その画像ファイルの名前に一定の文字があると、いつまでもキャッチが表示されなかったり、センシティブ扱いされたりする。

例えば『spam』とか書いてたら画像が表示されなかったりする。
でも禁止な画像名一覧なんてものは存在しないので、作ってみないと分からない。

なので、センシティブ扱いされたり、いつまでたっても画像が表示されない場合は

これはアウトな画像名だったかー

とあっさり切り替えて、画像名を更新してください。

で画像を変えたら、⇩ココにカード指定したサイトのURLを送り込んで、画像の更新しましょう。

https://cards-dev.x.com/validator

ちょっと待ってから、その記事のURL載せたツイートみたら、キャッチ画像が表示されているはず。