Twitter にサイトのURLを投稿した場合にタイトルや説明文や画像などが自動的に追加される Twitterカード はサイトの設定が必要で、以前、 一般的な方法 と Blogger用の方法 を取り上げたんだ。 Bloggerについては公式テーマならば初期値のOPG設定（ Facebook でのURL投稿のカード表示）と結び付けるのがTwitterカードを表示するための簡単な仕方なんだけれども最近はブログのソースコードに一行を追加するだけでも大丈夫に変わったから改めて取り上げておきたい。 以前は画像なしのページがエラーで止まってしまうために一行を追加するだけという手早い表示方法は可能でもちょっと使い辛かったんだ。 BloggerのTwitterカードの一行追加の手順 ブログのソースコードの編集 Twitterカードの実装の検証 ブログのソースコードの編集 テーマ｜Blogger B…
BloggerのOGP設定 はデフォルトでurlとtitleとdescriptionとimageが出力される。テーマのHTML編集やバックアップ／復元のテーマをダウンロードから確認できるけれどもhead内の独自タグの <b:include data='blog' name='all-head-content'/> にOGP設定のマークアップが含まれている。機械的にブログのソースコードに記載されて主にソーシャルメディアへの共有でブログの内容を表示するために使われる。 目次 BloggerのデフォルトのOGP設定の四項目 OGP設定が構造化データに検出される条件 OGP設定のtypeとlocaleのマークアップ Bloggerの独自タグで振り分けるソースコード BloggerのデフォルトのOGP設定の四項目 <meta c…
Bloggerの 2017年の公式テーマ のContempoとSohoとEmporioとNotableはトップやアーカイブなどのインデックスページでのSNSのためのOGP設定の画像（og:image）が記事の抜粋の画像の掲載数に一致している。 OGP設定の画像はSNSに共有する際に一枚しか使われないので、配信するのは一枚で良いと思う。幾つも記載されるとソースコードが長くなって表示速度を落としてしまう。Bloggerで使われる画像URLは文字列が細かく識別されて只でさも普通よりは伸びるから影響は大きそうだ。しかもインデックスページは専用の画像ではないから記事が更新されて画像が追加されると変わるのが個人的に落ち着かない。固定の画像を付けるのが望ましいから併せてカスタマイズを行いたくなる。 旧テーマのシンプルと動的ビューと画像ウィンドウとAwesome Inc.…
2017年からBloggerブログにはOGP設定の基本項目／URLとサイト名と説明文と画像の全てが自動で挿入されるように変わった。なので Twitterカードのサイトへの一般的な導入 と同じように、最低限、カードタイプをHTML編集のhead内に記載して Twitter の 検証ツール に合格すれば Twitterカード を使用できる。 <meta content=' カードタイプ ' name='twitter:card'/> 最も簡単な方法ではTwitterのカードタイプのソースコードを追加するだけで済んでしまう。 追記：Twitterカードの仕様が変わり、 簡単でもっと便利な方法 が取れるようになった。 基本項目を表示する場合のカードタイプは「summary」（サムネイル付き）か、「summary_large_image」（大きな…
Twitter にブログの記事を共有しても何も取り込まれなくて普通のツイートと全く同じになってしまうので、他のサイトではできているにも拘わらず、一体、なぜなのかと調べてみると Twitterカード が設置してないとコンテンツがツイートに反映しないためだった。 やってみるとツイートにサイトのURLを入力するだけでタイトルや説明文や画像が直ぐに取り込まれてリッチに反映するから物凄く便利だと感心した。 サイトに専用のmetaタグを記載して 検証ツール でOKが出るとTwitterカードが実際に使えるようになる。専用のmetaタグが適切か、またはrobots.txtでTwitterのクローラーが除外されてなければサイトのコンテンツがURLを入力するだけでツイートに反映して来る。 Getting Started Guide によるとTwitterのmetaタグが幾つかあって常…