スキップしてメイン コンテンツに移動

投稿

BloggerのデフォルトのOGP設定にtypeとlocaleを追加するSEO対策

イメージ
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 content='ページのURL&…

Firebaseのホスティングのプロジェクト/アプリ開発やサイト作成を立ち上げる

イメージ
GoogleのWebサービスの一つ、Firebaseを使うとアプリ開発やサイト作成をプロジェクトとして立ち上げてコンテンツを配信できる。料金は無料のSparkプランで1GBの容量が得られる。他にも機能が幾つもあって例えばデータベースやストレージたと1GBや5GBずつ得られるようになっている(無料で開始)。ホスティング以外に機能を追加して使うならば一つのアカウントで実際に提供されるサーバー容量はもっと大きい。転送量も機能毎に制限されていてホスティングでは10GBだけれどもアクセスが増えれば有料版へ移行してサーバー容量も含めて許容範囲を広げられる。定額制のFlameプランと従量制のBlazeプランに分かれていてアプリやサイトの稼働状況に合わせて選べる仕組みだ。今まではアプリ開発とサイト作成はおよそ別々だったけれども一つに明らかに統合したのがFirebaseで、とても面白いWebサービスだと知…

Bloggerブログで記事の更新日を表示する方法

イメージ
公式テーマの新旧で、Bloggerブログで記事の更新日を表示する方法は異なっている。Bloggerの新テーマウィジェットバージョン2/レイアウトバージョン3 ContempoSohoEmporioNotableBloggerの旧テーマウィジェットバージョン1/レイアウトバージョン2 シンプル動的ビュー画像ウィンドウAwesome Inc.ウォーターマークエスィリアルBloggerの更新日は表示できる範囲も公式テーマの新旧で異なっていて新テーマは注目とブログと人気の投稿、旧テーマはブログの投稿のウィジェットに所定のソースコードを記載しなくてはならない。widgetタグのTypeでいうと前者はFeaturedPostとBlogとPopularPosts、後者はBlogにマークアップを行うとブログに反映する。目次二つのテーマの更新日のマークアップ新テーマで更新日を表示する独自タグ旧テーマで更新…

Bloggerの注目とブログと人気の投稿のウィジェットのスニペットの表示されない文字数を減らす

イメージ
Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableのインデックスページ(トップ、アーカイブ、ラベルなど)の記事の抜粋などに使われるスニペットの文字数が実際に表示されるよりもソースコードに多く記載されている。Three types of devices by coffeebeanworks [CC0], via Pixabay調べると必要なのはスマホとパソコンで百文字と二百五十文字程度――文字サイズによって前後するし、小さなサムネイル画像と横並びの文章のデザインの場合は八十文字と百七十文字前後まで減る――なのにテンプレートはデフォルトで千文字が記事の本文の冒頭から抜き取られる設定になっているんだ。最も多く必要なパソコン版の文章だけのスニペットで表現される文字数からしても七百五十文字程度が無駄だと思うし、ブログの表示速度を下げて利便性も下げるか…

BloggerブログのJSON-LDの構造化データのSEO対策のためのカスタマイズについて

イメージ
Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableの記事/追加ページにはJSON-LDの構造化データがデフォルトで付けられている。目次Google推奨のJSON-LDの構造化データはSEO対策に相応しいBloggerの新テーマのJSON-LDの構造化データのソースコードインデックスページの記事毎のJSON-LDの構造化データを削除するインデックスページに専用のJSON-LDの構造化データを付ける方法JSON-LDの構造化データのソースコードのサンプル新テーマのテンプレートへのマークアップの仕方Google推奨のJSON-LDの構造化データはSEO対策に相応しいJSON-LD(推奨)ページのheadやbodyに<script>タグで埋め込まれたJavascriptの表記法です。マークアップは利用者に見える文章で挿入されてませんが、…

BloggerブログでOGP設定の画像を全ページで一枚ずつ配信する方法

イメージ
Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableはトップやアーカイブなどのインデックスページでのSNSのためのOGP設定の画像(og:image)が記事の抜粋の画像の掲載数に一致している。OGP設定の画像はSNSに共有する際に一枚しか使われないので、配信するのは一枚で良いと思う。幾つも記載されるとソースコードが長くなって表示速度を落としてしまう。Bloggerで使われる画像URLは文字列が細かく識別されて只でさも普通よりは伸びるから影響は大きそうだ。しかもインデックスページは専用の画像ではないから記事が更新されて画像が追加されると変わるのが個人的に落ち着かない。固定の画像を付けるのが望ましいから併せてカスタマイズを行いたくなる。旧テーマのシンプルと動的ビューと画像ウィンドウとAwesome Inc.とウォーターマークとエスィリアルではイン…

サイトの表示速度をlinkタグの「rel="preconnect"」で上げる/WebPagetestで事前接続を調べる

イメージ
htmlのリソースヒント(日本語訳)に載っているlinkタグの「rel="preconnect"」がサイトの表示速度を上げるのに役立つと知ってブログに取り入れたんだ。速くなるのは確かながらほんの僅かで、体感上、殆ど変わらないようだけど、しかしブラウザの外部ファイルの読み込みを効率化できるので、訪問者が以前よりも安定して閲覧できるかも知れないから外すには至らない。Luminescence of cars running on a dark road by Mateusz Dach [CC0], via Pexels目次リソースヒントのpreconnectの仕組みlinkタグの「rel="preconnect"」の記述法サイトの表示速度を上げ易くする条件WebPagetestで事前接続を調べる方法WebPagetestの通常の入力画面の日本語訳事前接続…