ツイッターカード対応のmetaタグとOGP設定サンプル。MT設定あり。

MTでツイッターカードを含んだOGP設定のサンプル

最終更新日:2017年5月9日

SEOには欠かせないOGPの設定サンプルと簡単な解説です。

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

これは、OGPを使ってますよという合図です。
articleとなっている部分は、記事ページ。
トップページだけは、

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">

とします。

<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:type" content="website">
<meta property="og:image" content="">
<meta name="twitter:card" content="summary_large_image">
ここが
OGPの設定です。
必須のものだけを書いています。
descption等はなければ通常のmeta:descriptionを読んでくれるはずなんですが、読まないSNSもあるので入れる必要があります。

最後の一行がツイッターカード設定です。
該当ページに関するツイッターの投稿に、設定した画像が表示されます。

Facebookの管理者の設定は

<meta property="fb:app_id" content="">
が必要です。
このサイトはfacebookにまだ関わっていないので入れていません。

<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

こちらはついでに。
スマホは電話番号を見つけると勝手にリンクにする機種があるので、それを禁止しています。
電話番号じゃないものまで電話番号だと勘違されてしまうことが多いので。

最後はInternetExplorer(IE)用のおまじないです。
常に最新のIEでレンダリングしてくれます。

OGP設定に便利なページ

OGP Checker

OGP_Checker
Chrome拡張機能です。
titleやdescriptionの文字数も教えてくれます。

titileの文字数目安は、35文字。
descriptionは、120文字。

Twitter Card

https://cards-dev.twitter.com/validator
ツイッターカード関連のmetaタグの設定が正しいかどうかチェックしてくれます。
エラーが出たらどこがダメなのかも教えてくれる(英語で)。

Facebook OGPバリデータ

Facebook OGPバリデータ
facebookのOGPが正しいかどうかチェックしてくれる。
キャッシュクリアも出来るので便利。
※FacebookのOGPは一度キャッシュされるとしばらく残るので、開発時はキャッシュクリア必須です。

OGP画像シミュレータ

http://ogimage.tsmallfield.com/
こちらのジェネレータで確認すれば今のところ間違いないです。

基本的には、1200px×630pxで作成して、真ん中の600px×600pxは独立して表示されてもいいようにデザインします。
横長に表示されるときと、正方形で表示されるときがあるので。

MovableTypeのmeta設定サンプル

このサイトのmeta設定部分のコードサンプルです。
おそらくまだ編集します。

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#"">
<meta charset="UTF-8">
<mt:If name="main_index">
<mt:IfWebsite>
<title><$mt:WebsiteName$></title>
<meta name="description" content="<$mt:WebsiteDescription$>">
<meta name="keywords" content="">
<meta property="og:title" content="<$mt:WebsiteName$>">
<meta property="og:description" content="<$mt:WebsiteDescription$>">
<mt:Else>
<title><$mt:BlogName$> | <mt:BlogParentWebsite><$mt:WebsiteName$></mt:BlogParentWebsite></title>
<meta name="description" content="<$mt:BlogDescription$>" />
<meta name="keywords" content="<$mt:BlogName$>" />
<meta property="og:title" content="<$mt:BlogName$> | <mt:BlogParentWebsite><$mt:WebsiteName$></mt:BlogParentWebsite>">
<meta property="og:description" content="<$mt:BlogDescription$>">
</mt:IfWebsite>
<mt:ElseIf name="page_archive">
<title><$mt:PageTitle remove_html="1"$> | <mt:BlogParentWebsite><$mt:WebsiteName$></mt:BlogParentWebsite></title>
<meta name="description" content="<$mt:PageExcerpt remove_html="1"$>">
<meta name="keywords" content="<$mt:PageKeywords$>">
<meta property="og:title" content="<$mt:PageTitle remove_html="1"$> | <mt:BlogParentWebsite><$mt:WebsiteName$></mt:BlogParentWebsite>">
<meta property="og:description" content="<$mt:PageExcerpt remove_html="1"$>">
<mt:ElseIf name="entry_archive">
<title><$mt:EntryTitle remove_html="1"$> | <mt:BlogParentWebsite><$mt:WebsiteName$></mt:BlogParentWebsite></title>
<meta name="description" content="<$mt:EntryExcerpt remove_html="1"$>">
<meta name="keywords" content="<$mt:EntryKeywords$>">
<meta property="og:title" content="<$mt:EntryTitle remove_html="1"$> | <mt:BlogParentWebsite><$mt:WebsiteName$></mt:BlogParentWebsite>">
<meta property="og:description" content="<$mt:EntryExcerpt remove_html="1"$>">
<mt:ElseIf name="category_archive">
<title><$mt:CategoryLabel remove_html="1"$> - <$mt:BlogName$> | <mt:BlogParentWebsite><$mt:WebsiteName$></mt:BlogParentWebsite></title>
<meta name="description" content="<$mt:CategoryDescription$>">
<meta name="keywords" content="<$mt:CategoryLabel remove_html="1"$>">
<meta property="og:title" content="<$mt:CategoryLabel remove_html="1"$> - <$mt:BlogName$> | <mt:BlogParentWebsite><$mt:WebsiteName$></mt:BlogParentWebsite>">
<meta property="og:description" content="<$mt:CategoryDescription$>">
<mt:ElseIf name="datebased_archive">
<title><$mt:ArchiveTitle remove_html="1"$>の記事一覧 - <$mt:BlogName$> | <mt:BlogParentWebsite><$mt:WebsiteName$></mt:BlogParentWebsite></title>
<meta name="description" content="<mt:BlogParentWebsite><$mt:WebsiteName$></mt:BlogParentWebsite> <$mt:BlogName$>の<$mt:ArchiveTitle remove_html="1"$>記事一覧ページ">
<meta name="keywords" content="">
<meta property="og:title" content="<$mt:ArchiveTitle remove_html="1"$>の記事一覧 - <$mt:BlogName$> | <mt:BlogParentWebsite><$mt:WebsiteName$></mt:BlogParentWebsite>">
<meta property="og:description" content="<mt:BlogParentWebsite><$mt:WebsiteName$></mt:BlogParentWebsite> <$mt:BlogName$>の<$mt:ArchiveTitle remove_html="1"$>記事一覧ページ">
<mt:else>
<title><$mt:WebsiteName$></title>
<meta name="description" content="<$mt:WebsiteDescription$>">
<meta name="keywords" content="">
<meta property="og:title" content="<$mt:WebsiteName$>">
<meta property="og:description" content="<$mt:WebsiteDescription$>">
</mt:If>
<meta property="og:type" content="website">
<mt:If tag="ImagesFigure">
<meta property="og:image" content="<$mt:WebsiteURL regex_replace="//$/",""$><mt:ImagesFigure>">
<mt:Else>
<mt:IfBlog>
<meta property="og:image" content="<$mt:WebsiteURL regex_replace="//$/",""$>/_media/images/cat/cat-<$mt:BlogRelativeURL replace="/",""$>.jpg">
<mt:Else>
<meta property="og:image" content="<$mt:WebsiteURL regex_replace="//$/",""$>/_media/images/webzin.png">
</mt:IfBlog>
</mt:If>
<meta name="twitter:card" content="summary_large_image">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="alternate" type="application/atom+xml" title="Recent Entries" href="/atom.xml">
<$mt:CanonicalLink$>

コメント(0)

コメント投稿画面を開く
CLOSE ×