本日のニュースにあるように、今後適用するテーマについては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に対応する方法をご紹介してきました。
是非お試しいただければと思います！
