システム作っていて、twitterカードを設置したくなる。
URLより画像ある方が使ってくれる率は上がるしね。
最低限の設定で表示させる方法。
現状このブログにはカードを設定してはいないが、そのうち付けたいとは思っている…思っては、いる。
基本
最低限、これだけの情報あれば表示出来る。
<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" />
コメント