Movable Type.net

MovableType.net 活用ブログ

MovableType.net の新機能の使い方や、ウェブサイトの構築・運用に役立つTIPSを紹介しています。

記事アーカイブでTwitterカードに対応する方法

本日のニュースにあるように、今後適用するテーマについてはTwitterカードに対応していますが過去に適用している場合は手動で追加する必要があります。
※ テーマの再適用をするとカスタマイズした部分も初期状態に戻ってしまいますので、運営中のサイトでは再適用は行わないでください。

Twitterカードに対応すると、Twitterでシェアされた際に以下のようにURLだけでなく指定した画像やタイトル等も表示できるので、目に留まる可能性が増えると思います。

今回は既存のテーマでシェアされる確率が高い、記事アーカイブにTwitterカードを追加する方法を各テーマ事にご紹介します。

基本的にはどのテーマもデザイン>テンプレート>アーカイブ・テンプレートの記事が対象になり、headタグ内にソースを記述します。

twitter:imageでは、テーマによってカスタムフィールドで設定した画像や記事に最初に挿入した画像などが自動的に挿入されます。

Public Organization

@<$mt:Var name='twitterVia'$>はconfigモジュールで指定したTwitterアカウント名が表示されます。

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@<$mt:Var name='twitterVia'$>">
<meta name="twitter:title" content="<$mt:EntryTitle encode_html="1"$>">
<meta name="twitter:description" content="<$mt:EntryExcerpt remove_html="1" encode_html="1" words="100"$>">
<meta name="twitter:image" content="<mt:If tag="CustomFieldValue" identifier="main_image_entry"><mt:CustomFieldAsset identifier="main_image_entry"><$mt:AssetThumbnailURL width="1200"$></mt:CustomFieldAsset><mt:Else><mt:EntryAssets type="image" sort_order="ascend" limit="1"><$mt:AssetThumbnailURL width="1200"$><mt:Else><$mt:BlogURL encode_html="1"$>images/ogimage.jpg</mt:EntryAssets></mt:If>">

Gallery Black

@<$mt:Var name='twitterVia'$>はconfigモジュールで指定したTwitterアカウント名が表示されます。

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@<$mt:Var name='twitterVia'$>">
<meta name="twitter:title" content="<$mt:EntryTitle encode_html="1"$>">
<meta name="twitter:description" content="<$mt:EntryExcerpt remove_html="1" encode_html="1" words="100"$>">
<meta name="twitter:image" content="<mt:EntryAssets type="image" sort_order="ascend" limit="1"><$mt:AssetThumbnailURL width="1200"$></mt:EntryAssets>">

General Blog

@<$mt:Var name='twitter_via'$>はconfigモジュールで指定したTwitterアカウント名が表示されます。

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@<$mt:Var name='twitter_via'$>">
<meta name="twitter:title" content="<$mt:EntryTitle encode_html="1"$>">
<meta name="twitter:description" content="<$mt:EntryExcerpt remove_html="1" encode_html="1" words="100"$>">
<meta name="twitter:image" content="<mt:If tag="CustomFieldValue" identifier="main_image_entry"><mt:CustomFieldAsset identifier="main_image_entry"><$mt:AssetThumbnailURL width="1200"$></mt:CustomFieldAsset><mt:Else><mt:EntryAssets type="image" sort_order="ascend" limit="1"><$mt:AssetThumbnailURL width="1200"$><mt:Else><$mt:BlogURL encode_html="1"$>images/ogimage.png</mt:EntryAssets></mt:If>">

General Corporate

@<$mt:Var name='twitter_via'$>はconfigモジュールで指定したTwitterアカウント名が表示されます。

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@<$mt:Var name='twitter_via'$>">
<meta name="twitter:title" content="<$mt:EntryTitle encode_html="1"$>">
<meta name="twitter:description" content="<$mt:EntryExcerpt remove_html="1" encode_html="1" words="100"$>">
<meta name="twitter:image" content="<mt:If tag="CustomFieldValue" identifier="main_image_entry"><mt:CustomFieldAsset identifier="main_image_entry"><$mt:AssetThumbnailURL width="1200"$></mt:CustomFieldAsset><mt:Else><mt:EntryAssets type="image" sort_order="ascend" limit="1"><$mt:AssetThumbnailURL width="1200"$><mt:Else><$mt:BlogURL encode_html="1"$>images/ogimage.png</mt:EntryAssets></mt:If>">

Material Blog

@<$mt:Var name='twitter_via'$>はconfigモジュールで指定したTwitterアカウント名が表示されます。

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@<$mt:Var name='twitter_via'$>">
<meta name="twitter:title" content="<$mt:EntryTitle encode_html="1"$>">
<meta name="twitter:description" content="<$mt:EntryExcerpt remove_html="1" encode_html="1" words="100"$>">
<meta name="twitter:image" content="<mt:EntryAssets type="image" sort_order="ascend" limit="1"><$mt:AssetThumbnailURL width="1200"$><mt:Else><$mt:BlogURL encode_html="1"$>images/ogimage.png</mt:EntryAssets>">

MEDIA

@<$mt:Var name='twitter_via'$>はconfigモジュールで指定したTwitterアカウント名が表示されます。

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@<$mt:Var name='twitter_via'$>">
<meta name="twitter:title" content="<$mt:EntryTitle encode_html="1"$>">
<meta name="twitter:description" content="<$mt:EntryExcerpt remove_html="1" encode_html="1" words="100"$>">
<meta name="twitter:image" content="<mt:EntryAssets type="image" sort_order="ascend" limit="1"><$mt:AssetThumbnailURL width="1200"$><mt:Else><$mt:BlogURL encode_html="1"$>images/ogimage.png</mt:EntryAssets>">

One Page

@<$mt:Var name='twitter_via'$>はconfigモジュールで指定したTwitterアカウント名が表示されます。

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@<$mt:Var name='twitter_via'$>">
<meta name="twitter:title" content="<$mt:EntryTitle encode_html="1"$>">
<meta name="twitter:description" content="<$mt:EntryExcerpt remove_html="1" encode_html="1" words="100"$>">
<meta name="twitter:image" content="<mt:If tag="CustomFieldValue" identifier="main_image_entry"><mt:CustomFieldAsset identifier="main_image_entry"><$mt:AssetThumbnailURL width="1200"$></mt:CustomFieldAsset><mt:Else><mt:EntryAssets type="image" sort_order="ascend" limit="1"><$mt:AssetThumbnailURL width="1200"$><mt:Else><$mt:BlogURL encode_html="1"$>images/ogimage.jpg</mt:EntryAssets></mt:If>">

Rimo

@<$mt:Var name='twitter_via'$>は共通変数モジュールで指定したTwitterアカウント名が表示されます。

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@<$mt:Var name='twitter_via'$>">
<meta name="twitter:title" content="<$mt:EntryTitle encode_html="1"$> | <$mt:BlogName encode_html="1"$>">
<meta name="twitter:description" content="<$mt:EntryExcerpt$>">
<meta name="twitter:image" content="<mt:If tag="CustomFieldValue" identifier="blog_entry_ogp_image"><mt:CustomFieldAsset identifier="blog_entry_ogp_image"><$mt:AssetThumbnailURL width="1200"$></mt:CustomFieldAsset><mt:Else><mt:EntryAssets type="image" sort_order="ascend" limit="1"><$mt:AssetThumbnailURL width="1200"$><mt:Else><$mt:BlogURL encode_html="1"$>common/images/noimage-1200.png</mt:EntryAssets></mt:If>">

Shop

@<$mt:Var name='twitterVia'$>はconfigモジュールで指定したTwitterアカウント名が表示されます。

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@<$mt:Var name='twitterVia'$>">
<meta name="twitter:title" content="<$mt:EntryTitle encode_html="1"$>">
<meta name="twitter:description" content="<$mt:EntryExcerpt remove_html="1" encode_html="1" words="100"$>">
<meta name="twitter:image" content="<mt:If tag="CustomFieldValue" identifier="main_image_entry"><mt:CustomFieldAsset identifier="main_image_entry"><$mt:AssetThumbnailURL width="1200"$></mt:CustomFieldAsset><mt:Else><mt:EntryAssets type="image" sort_order="ascend" limit="1"><$mt:AssetThumbnailURL width="1200"$><mt:Else><$mt:BlogURL encode_html="1"$>images/ogimage.png</mt:EntryAssets></mt:If>">

Simple Corporate

@<$mt:Var name='twitterVia'$>はconfigモジュールで指定したTwitterアカウント名が表示されます。

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@<$mt:Var name='twitterVia'$>">
<meta name="twitter:title" content="<$mt:EntryTitle encode_html="1"$>">
<meta name="twitter:description" content="<$mt:EntryExcerpt remove_html="1" encode_html="1" words="100"$>">
<meta name="twitter:image" content="<mt:If tag="CustomFieldValue" identifier="main_image"><mt:CustomFieldAsset identifier="main_image"><$mt:AssetThumbnailURL width="1200"$></mt:CustomFieldAsset><mt:Else><mt:EntryAssets type="image" sort_order="ascend" limit="1"><$mt:AssetThumbnailURL width="1200"$><mt:Else><$mt:BlogURL encode_html="1"$>images/ogimage.png</mt:EntryAssets></mt:If>">

Simple Product

@<$mt:Var name='twitterVia'$>はconfigモジュールで指定したTwitterアカウント名が表示されます。

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@<$mt:Var name='twitterVia'$>">
<meta name="twitter:title" content="<$mt:EntryTitle encode_html="1"$>">
<meta name="twitter:description" content="<$mt:EntryExcerpt remove_html="1" encode_html="1" words="100"$>">
<meta name="twitter:image" content="<mt:EntryAssets type="image" sort_order="ascend" limit="1"><$mt:AssetThumbnailURL width="1200"$><mt:Else><$mt:BlogURL encode_html="1"$>images/ogimage.png</mt:EntryAssets>">

Stylish Corporate

@<$mt:Var name='twitterVia'$>はconfigモジュールで指定したTwitterアカウント名が表示されます。

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@<$mt:Var name='twitterVia'$>">
<meta name="twitter:title" content="<$mt:EntryTitle encode_html="1"$>">
<meta name="twitter:description" content="<$mt:EntryExcerpt remove_html="1" encode_html="1" words="100"$>">
<meta name="twitter:image" content="<mt:If tag="CustomFieldValue" identifier="main_image_entry"><mt:CustomFieldAsset identifier="main_image_entry"><$mt:AssetThumbnailURL width="1200"$></mt:CustomFieldAsset><mt:Else><mt:EntryAssets type="image" sort_order="ascend" limit="1"><$mt:AssetThumbnailURL width="1200"$><mt:Else><$mt:BlogURL encode_html="1"$>images/ogimage.jpg</mt:EntryAssets></mt:If>">

以上各テーマの記事アーカイブでTwitterCardに対応する方法をご紹介してきました。
是非お試しいただければと思います!

アカウント作成は無料! 同じアカウントでウェブサイトをいくつでも作成でき、作成したウェブサイト毎に14日間無料で利用可能です。

アカウント作成

Movable Type.net は無料トライアルが可能です。
Web制作者の方で、デモや評価利用をご希望の場合は、制作者向け評価ライセンスをご利用ください。

無料トライアル 資料ダウンロード 制作者向け評価ライセンス