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

でもめんどくさいことはしたくない。
心から。
心から。
だから最低限の設定で表示させる方法。
基本というか最低限
最低限、これだけの情報あれば表示出来る。
<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載せたツイートみたら、キャッチ画像が表示されているはず。
コメント