Twitter Cardsの設定には、1. WordPress側の設定と2. Twitterサイドの設定の両方が必要です。
WordPress側の設定は、WordPress SEO by Yoast pluginなどのプラグインを使用してもできますが、ここでは自分でコードを変更する設定を説明します。 In this article I will explain how to configure Twitter Cards without using a plugin.
1.WordPress側の設定
テーマファイルのheader.phpを開き、headタグの終了直前に次のコードをペーストします。 Open the header.php file and paste the following code just before the closing of head tag.
[code language=”php”]<?php
#twitter cards hack
if(is_single() || is_page()) {
$twitter_url = get_permalink();
$twitter_title = get_the_title();
$twitter_desc = get_the_excerpt();
$twitter_thumbs = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full );
$twitter_thumb = $twitter_thumbs[0];
if(!$twitter_thumb) {
$twitter_thumb = ‘http://www.gravatar.com/avatar/8eb9ee80d39f13cbbad56da88ef3a6ee?rating=PG&size=75’;
}
$twitter_name = str_replace(‘@’, ”, get_the_author_meta(‘twitter’));
?>
<meta name="twitter:card" value="summary" />
<meta name="twitter:url" value="<?php echo $twitter_url; ?>" />
<meta name="twitter:title" value="<?php echo $twitter_title; ?>" />
<meta name="twitter:description" value="<?php echo $twitter_desc; ?>" />
<meta name="twitter:image" value="<?php echo $twitter_thumb; ?>" />
<meta name="twitter:site" value="@libdemvoice" />
<meta name="twitter:domain" content="example.com" />
<?
if($twitter_name) {
?>
<meta name="twitter:creator" value="@<?php echo $twitter_name; ?>" />
<?
}
}
?>
[/code]
(Source: Ryan Cullen @artesea)
次に、
[code language=”php”]
<meta name="twitter:card" value="summary" />
<pre>[/code]
のvalueをsummary, product,photo,summary_large_image,player,appのいずれかから選択します。選択したカードタイプで表示されます。 Next, replace the “value” with one from “summary,product,photo,summary_large_image,player,app”, which will be used as the card type of your Twitter Cards.
[code language=”php”]
<meta name="twitter:domain" content="example.com" /></pre>
[/code]
のcontentを自分のドメイン名に変更します。Then change the “content” to your domain.
さらに、
[code language=”php”] <meta name="twitter:site" value="@libdemvoice" /> [/code]
の@libdemvoiceを自分のTwitterアカウント名に変更して保存します。Lastly, replace the “@libdemvoice” with your own Twitter account name.
2.Twitterサイドの設定
Card Validatiorにアクセスして、Card Catalogから上記のvalueと同じカードタイプを選択します。Validate & Applyタブで、自分のブログ記事の任意のURLを入力し、Goを押すと、判定が表示されます。Access the card validator and choose the same card type as the card type you’ve selected before. On the Validate & Apply tab, input the URL of your blog post and click Go, and result of validation will show up.
Applyしてフォームに必要事項を入力して、送信すると、すぐに”Your Twitter card is ready!”というメールが届き、準備が整います。 Apply and fill the form, and send. You will soon receive “Your Twitter card is ready!”mail.
実際に投稿して、Twitterでの表示を確認します。Now test it by posting an article and checking on Twitter app.
