些細な日常
Bloggerの公式テーマのソースコードを調べてみると 構造化データのMicroformats がもう既に殆ど組み込まれている。使うとSEO対策に役立って検索エンジンからアクセスアップが一層と可能になるかも知れないマークアップの一つなんだ。 シンプルなどの旧テーマとContempoなどの新テーマで何れも記事のブログの投稿ガジェットに著者名を表示すると前者は更新日がなくてエラーになるのを修正する、後者はエントリーを開放して更新日を付け加えるHTML編集によって機械向けにサイト内容を指し示す Microformats の hAtom が成立するようになっている。 著者名を表示しないと手間は一つ増えるにせよ、 後少しのカスタマイズで済む。他の項目も幾つか付いていて折角だからブログに取り入れて使わないと勿体ないと感じる。 目次 MicroformatsのhAtomが成立する四つの必須項目 旧テーマでのhentryのカ…
Microformats はホームページやブログのサイト内容を機械向けに表現する構造化データの一つで、検索エンジンも認識するからサイト作成に取り入れるとキーワードの検索結果からアクセスアップを齎すかも知れないSEO対策のマークアップに含まれているんだ。 近年はバージョンアップされて Microformats2 が出て来ているけど、ところがSEO対策ではGoogleなどの主要な検索エンジンに認識されないために有効性は低いと考えられる。Microformats2は構造化データとして後方互換性がないわけではないので、もしも検索エンジンからのアクセスアップを目論んでSEO対策に使うならば以前のバージョンのMicroformatsのままのマークアップに止めておくべきかも知れない。 Microformatsの構造化データのマークアップはclass属性を中心に必要ならば幾つかのrel属性も使いながら機械向けの語…
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 &…
Google のWebサービスの一つ、 Firebase を使うとアプリ開発やサイト作成をプロジェクトとして立ち上げてコンテンツを配信できる。 料金は無料のSparkプランで1GBの容量が得られる。他にも機能が幾つもあって例えばデータベースやストレージたと1GBや5GBずつ得られるようになっている（ 無料で開始 ）。ホスティング以外に機能を追加して使うならば一つのアカウントで実際に提供されるサーバー容量はもっと大きい。 転送量も機能毎に制限されていてホスティングでは10GBだけれどもアクセスが増えれば有料版へ移行してサーバー容量も含めて許容範囲を広げられる。定額制のFlameプランと従量制のBlazeプランに分かれていてアプリやサイトの稼働状況に合わせて選べる仕組みだ。 今まではアプリ開発とサイト作成はおよそ別々だったけれども一つに明らかに統合したのがFirebaseで、とても面白いWebサービスだと知…
Bloggerの 2017年の公式テーマ のContempoとSohoとEmporioとNotableのインデックスページ（トップ、アーカイブ、ラベルなど）の記事の抜粋などに使われるスニペットの文字数が実際に表示されるよりもソースコードに多く記載されている。 Three types of devices by coffeebeanworks / Pixabay 調べると必要なのはスマホとパソコンで百文字と二百五十文字程度――文字サイズによって前後するし、小さなサムネイル画像と横並びの文章のデザインの場合は八十文字と百七十文字前後まで減る――なのにテンプレートはデフォルトで千文字が記事の本文の冒頭から抜き取られる設定になっているんだ。 最も多く必要なパソコン版の文章だけのスニペットで表現される文字数からしても七百五十文字程度が無駄だと思うし、ブログの表示速度を下げて利便性も下げるから何とかできないか…
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（推奨） ページの見出しや本文の <script> タグ内に埋め込まれる JavaScript 表記。このマークアップにはユーザーに表示するテキストをそのまま挿…
Bloggerの 2017年の公式テーマ のContempoとSohoとEmporioとNotableはトップやアーカイブなどのインデックスページでのSNSのためのOGP設定の画像（og:image）が記事の抜粋の画像の掲載数に一致している。 OGP設定の画像はSNSに共有する際に一枚しか使われないので、配信するのは一枚で良いと思う。幾つも記載されるとソースコードが長くなって表示速度を落としてしまう。Bloggerで使われる画像URLは文字列が細かく識別されて只でさも普通よりは伸びるから影響は大きそうだ。しかもインデックスページは専用の画像ではないから記事が更新されて画像が追加されると変わるのが個人的に落ち着かない。固定の画像を付けるのが望ましいから併せてカスタマイズを行いたくなる。 Contempo｜ Blogger 旧テーマのシンプルと動的ビューと画像ウィンドウとAwesome Inc.とウォー…
HTMLの リソースヒント （ 日本語訳 ）に載っているlinkタグの「rel="preconnect"」がサイトの表示速度を上げるのに役立つと知ってブログに取り入れたんだ。 速くなるのは確かながらほんの僅かで、体感上、殆ど変わらないようだけど、しかしブラウザの外部ファイルの読み込みを効率化できるので、訪問者が以前よりも安定して閲覧できるかも知れないから外すには至らない。 目次 リソースヒントのpreconnectの仕組み linkタグの「rel="preconnect"」の記述法 サイトの表示速度を上げ易くする条件 WebPagetestで事前接続を調べる方法 WebPagetestの通常の入力画面の日本語訳 事前接続に含まれる三つのデータ リソースヒントのpreconnectの仕組み Luminescence of cars running on a dark road …
Bloggerは利便性を高めるためにブログのテンプレートの様々なソースコードを独自タグで自動化している。しかし独自タグが幅広い記述に対応して多くのソースコードが一辺に出力されるとテンプレートのカスタマイズが反対に難しくなってしまう。直接、手を加えられないので、どうすれば良いのかと悩まざるを得ないわけなんだ。 公式サイトでは情報が薄いみたいだけど―― ヘルプ にはマークアップの基礎知識しか紹介されてない――しかし調べると独自タグの出力する内容を載せている Blogger Code などの専門サイトが見付かってカスタマイズにとても役立つ。 Bloggerの独自タグを実際に出力される内容に置き換えて分解するとテンプレートのソースコードをさらに細かく作り替えられるようになる。 前々から気がかりだったBloggerブログのhead内のカスタマイズをついに行ってみたいと思い立った。 目次 Bloggerブログのhea…