些細な日常

Bloggerの公式テーマのソースコードを調べてみると構造化データのMicroformatsがもう既に殆ど組み込まれている。使うとSEO対策に役立って検索エンジンからアクセスアップが一層と可能になるかも知れないマークアップの一つなんだ。シンプルなどの旧テーマとContempoなどの新テーマで何れも記事のブログの投稿ガジェットに著者名を表示すると前者は更新日がなくてエラーになるのを修正する、後者はエントリーを開放して更新日を付け加えるhtml編集によって機械向けにサイト内容を指し示すMicroformatsのhAtomが成立するようになっている。著者名を表示しないと手間は一つ増えるにせよ、 後少しのカスタマイズで済む。他の項目も幾つか付いていて折角だからブログに取り入れて使わないと勿体ないと感じる。A girl blowing dandelion fluff by ThePixelman …

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

Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableのインデックスページ（トップ、アーカイブ、ラベルなど）の記事の抜粋などに使われるスニペットの文字数が実際に表示されるよりもソースコードに多く記載されている。Three types of devices by coffeebeanworks [CC0], via 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（推奨）ページのheadやbodyに<script>タグで埋め込まれたJavascriptの表記法です。マークアップは利用者に見える文章で挿入されてませんが、…

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

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

Bloggerは利便性を高めるためにブログのテンプレートの様々なソースコードを独自タグで自動化している。しかし独自タグが幅広い記述に対応して多くのソースコードが一辺に出力されるとテンプレートのカスタマイズが反対に難しくなってしまう。直接、手を加えられないので、どうすれば良いのかと悩まざるを得ないわけなんだ。公式サイトでは情報が薄いみたいだけど――ヘルプにはマークアップの基礎知識しか紹介されてない――しかし調べると独自タグの出力する内容を載せているBlogger Codeなどの専門サイトが見付かってカスタマイズにとても役立つ。Bloggerの独自タグを実際に出力される内容に置き換えて分解するとテンプレートのソースコードをさらに細かく作り替えられるようになる。前々から気がかりだったBloggerブログのhead内のカスタマイズをついに行ってみたいと思い立った。目次Bloggerブログのhea…