へっぽこ、ミニマル、DIY
2017-09-28 footfoot (0)

PluXmlでTwitterカードの設定をする

ツイッターロゴ。

ツイッターでブログ記事等をシェアする時に画像付きの見やすいリンクにするには、ブログ側でTwitterカードの設定をしないといけないのでPluXmlで実装したコードをメモしておきます。

Twitterカードの設定をしてないとツイッター内のリンクはただのテキストリンクになるので、クリックされる率はかなり下がると思います。

Twitterカードの基本

とりあえず最小限の基本のコードはこんな感じ。全部必要です。上の2つtwitter:はツイッター用のmetaで、og:と付いてるのはfacebook等の別のSNSでも使用される汎用のコードらしい。

<meta name="twitter:card" content="カードの種類" />
<meta name="twitter:site" content="@ユーザー名" />
<meta property="og:url" content="記事のURL" />
<meta property="og:title" content="記事のタイトル" />
<meta property="og:description" content="記事の要約" />
<meta property="og:image" content="画像のURL" />

これを<head></head>内に記述します。

twitter:cardの種類

twitter:cardはツイッター内で表示される画像の大きさを変えられます。summarysummary_large_imageappplayerがありますけど、通常のブログだとsummaryかsummary_large_imageになるかと思います。

summaryは小さめの画像と記事のタイトル・記事の要約・URLが横並びで表示。

twitterカードの設定。summaryは画像が小さく横に要約テキスト(description)が表示されます。

summary_large_imageは大きい画像で表示。

twitterカードの設定。summary_large_imageは画像が大きく下に要約テキスト(description)が表示されます。

画像は中央でトリミングされますね。画像がない場合はグレーになります。

この画像はツイッター側でサムネイル化されて保存されるので、自サイトのサーバーの負荷は気にしなくて大丈夫。

それとツイッターの投稿画像があるとブログの画像は表示されずテキストリンクだけになる模様。

PluXml用にカスタムしたコード

ちょっと見にくいですがこのブログで使ってるPluXml CMSのコードのサンプルです。

header.php<head></head>内に記述しました。ページによって独自タグが違うところはPHPのswitchで、home(トップページ)、article(ブログ記事)、static(固定ページ)、categorie(カテゴリページ)、default(それ以外)を分岐させてます。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@foot2_mini">
<meta property="og:title" content="<?php $plxShow->pageTitle() ?>" />
<?php switch($plxShow->mode()) { case 'home': ?>
	<meta property="og:url" content="<?php $plxShow->urlRewrite() ?>" />
	<meta property="og:description" content="<?php $plxShow->subTitle(); ?>" />
	<meta property="og:image" content="<?php $plxShow->urlRewrite() ?>data/medias/logo.png" />
<?php break; case 'article': ?>
	<meta property="og:url" content="<?php $plxShow->artUrl() ?>" />
	<meta property="og:description" content="<?php echo strip_tags($plxShow->plxMotor->plxRecord_arts->f('chapo')) ?>" />
	<meta property="og:image" content="<?php $plxShow->artThumbnail('#img_url') ?>" />
<?php break; case 'static': ?>
	<meta property="og:url" content="<?php $plxShow->staticUrl() ?>" />
	<meta property="og:description" content="<?php $plxShow->subTitle(); ?>" />
	<meta property="og:image" content="<?php $plxShow->urlRewrite() ?>data/medias/logo.png" />
<?php break; case 'categorie': ?>
	<meta property="og:url" content="<?php $plxShow->catUrl() ?>" />
	<meta property="og:description" content="<?php $plxShow->subTitle(); ?>" />
	<meta property="og:image" content="<?php $plxShow->urlRewrite() ?>data/medias/logo.png" />
<?php break; default: ?>
	<meta property="og:url" content="<?php $plxShow->urlRewrite() ?>" />
	<meta property="og:description" content="<?php $plxShow->subTitle(); ?>" />
	<meta property="og:image" content="<?php $plxShow->urlRewrite() ?>data/medias/logo.png" />
<?php break; } ?>

ブログ記事(article)ページはヘッドライン(要約)をdescriptionにして、画像は投稿画像のURLを設定。

ブログ記事以外は画像がないので適当に作ったサイトのロゴ画像にして、あとは適当。ブログ記事以外でリンクされることもそうないと思うので。URLは相対URLではダメで絶対URLじゃないといけません。

PluXmlはこのPHPのコードで分岐できるんだなぁ。勉強になった。

Twitterカードの動作確認

正常に記述できてるかはツイッター公式のツールCardValidatorでURLを入れて確認できます。

PluXml SNS
シェア

コメントを書く

最後のアルファベットを入力してください uldr?

このコメントのRSS