BloggerブログでOGP設定の画像を全ページで一枚ずつ配信する方法 結城永人 - 2018年8月8日 (水) Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableはトップやアーカイブなどのインデックスページでのSNSのためのOGP設定の画像(og:image)が記事の抜粋の画像の掲載数に一致している。 OGP設定の画像はSNSに共有する際に一枚しか使われないので、配信するのは一枚で良いと思う。幾つも記載されるとソースコードが長くなって表示速度を落としてしまう。Bloggerで使われる画像URLは文字列が細かく識別されて只でさも普通よりは伸びるから影響は大きそうだ。しかもインデックスページは専用の画像ではないから記事が更新されて画像が追加されると変わるのが個人的に落ち着かない。固定の画像を付けるのが望ましいから併せてカスタマイズを行いたくなる。 Contempo|Blogger 旧テーマのシンプルと動的ビューと画像ウィンドウとAwesome Inc.とウォーターマークとエスィリアルではインデックスページにOGP設定の画像自体が記載されない。なのでContempoなどの新テーマのように表示速度を落とさなくて済むけれども固定の画像をカスタマイズで付けるとインデックスページのSNSへの共有でもっと使い易くなる。 Bloggerのシンプルなどの旧テーマでインデックスと画像なしの記事/追加ページにOGP設定の画像を記載する方法 新旧のどちらのテーマでも画像なしの記事/追加ページではOGP設定の画像が記載されないので、インデックスページと同じように固定の画像を付けると良いと思う。 簡単な方法はもう既にBlogger用のTwitterカードの設定で取り上げている。Twitterカードのためのカスタマイズだけれども必要なコンテンツはOGP設定と共用できるから画像の出方をアレンジしていた。インデックスページと画像なしの記事/追加ページでも固定の画像が使えるように新しく追加したんだ。 今回は新テーマのインデックスページのSNSの共有で使われない画像を減らすのが主な目的で、同時にソースコードを簡略化できるから表示速度を上げるのに役立つと喜ばしく取り上げるけど、ただしちょっと難しい。 Bloggerブログのhead内の独自タグのall-head-content:<b:include data='blog' name='all-head-content'/>を分解しないとソースコードを適切に編集できない。 デフォルトでOGP設定のマークアップが自動的に記載されるようになっているので、それを先ずは止めなくてはならない。Bloggerの独自タグのall-head-contentには他のマークアップも含まれているから一つ残らず、記載し直すのも手間がかかる。 全ページで画像を一枚ずつ配信するOGP設定のソースコード <b:if cond='data:view.isMultipleItems'> <meta content='インデックスページの画像URL' property='og:image'/> <b:elseif cond='data:view.featuredImage'/> <meta expr:content='resizeImage(data:view.featuredImage, 1200, "1200:630")' property='og:image'/> <b:else/> <meta content='画像なしの記事/追加ページの画像URL' property='og:image'/> </b:if> ※太字の部分は画像ありの記事/追加ページの画像URLがBloggerで自動的に取り込まれる。 ※帯文字の部分は使用する画像をブログ内や外部サービス(画像URLを取得できるImgurなど)に用意して手動で記載する。 Bloggerの独自タグのall-head-contentを分解しなくても使えるし、後ろに置けば一般的に優先される。 ただし新テーマの全ページでOGP設定の画像を一枚ずつ配信するためには必ずBloggerの独自タグのall-head-contentを分解して置き換えなくてはならない。 画像ありのページで重複してしまうからソースコードが無駄にならざるを得ない。 新テーマで独自タグのall-head-contentを分解して個別のマークアップに置き換える方法 削除するデフォルトのソースコード <b:include data='blog' name='all-head-content'/> 代わりに記載するソースコード <meta expr:content='"text/html; charset=" + data:blog.encoding' http-equiv='Content-Type'/> <b:if cond='data:widgets'> <b:comment>Chrome, Firefox OS and Opera</b:comment> <meta expr:content='data:skin.vars.body_background_color' name='theme-color'/> <b:comment>Windows Phone</b:comment> <meta expr:content='data:skin.vars.body_background_color' name='msapplication-navbutton-color'/> </b:if> <meta content='blogger' name='generator'/> <link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/> <link expr:href='data:view.url.canonical' rel='canonical'/> <data:blog.feedLinks/> <data:blog.meTag/> <b:if cond='data:blog.metaDescription'> <meta expr:content='data:blog.metaDescription' name='description'/> </b:if> <b:if cond='data:blog.adultContent'> <meta content='adult' name='rating'/> </b:if> <meta expr:content='data:blog.url.canonical' property='og:url'/> <meta expr:content='data:view.title.escaped' property='og:title'/> <meta expr:content='data:view.description.escaped' property='og:description'/> 画像URLを入力した全ページで画像を一枚ずつ配信するOGP設定のソースコードを配置する 独自タグのall-head-contentに含まれる内容を全て記載してさらにOGP設定の画像はカスタマイズのソースコードに編集する。 分解しない場合はインデックスページの複数の画像がOGP設定に記載されるのを避けられないけれどもカスタマイズの手間は相当に減る。 独自タグのall-head-contentを保持しながら画像なしのページにOGP設定の画像を追加するソースコード <b:if cond='!data:blog.postImageUrl'> <meta content='画像なしのページの画像URL' property='og:image'/> </b:if> インデックスと記事/追加ページで固定の画像を振り分ける場合 <b:if cond='!data:blog.postImageUrl and data:view.isMultipleItems'> <meta content='画像なしのページのインデックスページの画像URL' property='og:image'/> </b:if> <b:if cond='!data:blog.postImageUrl and data:view.isSingleItem'> <meta content='画像なしの記事/追加ページの画像URL' property='og:image'/> </b:if> ※帯文字の部分は使用する画像をブログ内や外部サービス(画像URLを取得できるImgurなど)に用意して手動で記載する。 画像なしのページに対応するだけならば独自タグのall-head-contentの前後のどちらかに固定の画像のソースコードを追加する。 旧テーマだと画像ありの記事/追加ページしかOGP設定の画像は記載されないからBloggerの独自タグのall-head-contentを分解しなくても一枚ずつ配信するのは容易い。 画像ありの記事/追加ページ以外に固定の画像を追加するOGP設定のソースコード <b:if cond='!data:view.featuredImage'> <meta content='画像ありの記事/追加ページ以外の画像URL' property='og:image'/> </b:if> インデックスと記事/追加ページで固定の画像を振り分ける場合 <b:if cond='data:view.isMultipleItems'> <meta content='インデックスページの画像URL' property='og:image'/> <b:elseif cond='!data:view.featuredImage'/> <meta content='画像なしの記事/追加ページの画像URL' property='og:image'/> </b:if> ※帯文字の部分は使用する画像をブログ内や外部サービス(画像URLを取得できるImgurなど)に用意して手動で記載する。 head内の<b:include data='blog' name='all-head-content'/>の前後のどちらかに置いて画像ありの記事/追加ページ以外でOGP設定の画像を追加できる。 新テーマでも旧テーマと同じように使えるけど、ただしBloggerの独自タグのall-head-contentを分解して個別のマークアップに置き換えないとインデックスページで複数の画像が配置される可能性は残されるし、ブログのOGP設定の画像を全ページで一枚ずつに変えて表示速度を上げるようなカスタマイズにはならない。 関連ページImaginary|Bloggerのテンプレートの提供 コメント 新しい投稿 前の投稿
平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない 日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...
宜保愛子は本物の霊能力者だと考えられる三つの真実 昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...
伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...
若者たちがFacebookよりもTwitterを多く始めるというソーシャルメディアの利用者数の変化について 僕は Twitter をやって Facebook をやらないので、近年の特に日本の若者たちが似通って来ているのが面白いと思った。 「現在利用しているSNSサービスや動画サイト」について質問したところ、「LINE」の利用率が98.2%、「Twitter」の利用率が81.5%と前...
細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス サックス奏者の 細川慎二 のYouTubeチャンネルの Sax in the Night City で出ているサックスのストリートライヴの動画が美しい音色と相俟った街角の雰囲気の良さで心底と泣けて来るほどの感動を催させる。 細川慎二のアルトサックスの美しい音色が響き渡る街角の...
アドセンスの個人のアメリカの税務情報/W-8BEN納税フォームの書き方 アドセンスに利用者の税務情報が必要となり、2021年6月1日以降、YouTubeのサイト広告などで収益を得る場合には税務情報を提出しないとアドセンスの支払いからアメリカの源泉所得税が米国内国歳入法の第三章により、控除される。 Google は、YouTube パートナー プロ...
玉置浩二のメロディーは涙腺緩んで総毛立つ名曲中の名曲だ 玉置浩二 のYouTubeの公式チャンネルで、最も気に入りの メロディー のライブ版が追加されていた。曲自体をちゃんと聴いたのは約二十五年振りかも知れないけど、しかし初めての内容から以前にも況して大変な感動を覚えることになった。 玉置浩二 『メロディー』Live at Tok...
沖雅也の涅槃への自殺と双極性障害 かつて俳優の 沖雅也 の自殺が伝えられたとき、遺書の言葉とされた「おやじ、涅槃でまっている」と共に何なのかと疑問を感じたのを良く覚えている。聞き慣れない「涅槃」という言葉が入っても何十年も過ぎた今振り返っても自殺者の遺書として本当に珍しい表現だったと改めて驚く。 沖雅也が書い...
後藤浩輝と抑鬱傾向による突発的な自殺 中央競馬でトップ騎手の一人だった 後藤浩輝 が亡くなっていると気付いた。二千十五年だからまだ二年前の死だった。競馬ファンならば誰でも知っているくらい有名なはずだけれどもテレビのバラエティー番組でも見かけていたと思う。個人的には ダービースタリオン (ゲーム)に熱中していて後藤浩輝...
Imgurで画像URLと埋め込みコードを取得する方法 Imgur は自分でアップロードした画像については画像URL/直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。 そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。 目次 Img...
コメント