ブログは楽しい

このページの記事目次 (カテゴリー: ブログは楽しい

← 前のページ  total 28 pages  次のページ →  

憧れのブログのAMP化、ついに完了!(邪道)

Keep-calm-poster

AMPテストブログのプロフィール画像に使おうと思ってせっかく作ったのに、「正方形」じゃないと使えなかったので、ここに掲載いたします。
上下でフォントを合わせるほど凝る時間がなかったのですが、パソ買ったら作り直そうかな…
名前はのろのろでいいとして、ブログ名を考えなきゃいけなくて、パッと思いつかないので、「とりあえずお茶」をいれていて、その発想がまさにブログ名に変わりました。
イギリスといえば、KEEP CALM、んで、茶飲みとしては、PUT THE KETTLE ONだな。っと。

AMP化に憧れ、焦がれる

毎日2時間ぐらいはバスに乗っているのですが、スマホで調べものをしていることが多いです。AMP(Accelerated Mobile Pages)はご存じない方も多いみたいですが、私は大ファンです。ローディングがとても速いのです。

自分のブログがAMP仕様になったら、すっごくかっこいいんだけどな~っと、いろいろ試してみましたが、全然ダメでした。無料ブログの中ではSeesaaブログが、有料ブログでは、はてなブログがそれぞれAMP仕様を追加できると分かっていたのですが、特に引っ越すつもりもなく、放置しておりました。

最近、好きなブロガーさんがSeesaaブログにお引越しされたのですが、ブログを読んでいたはずが、ふらふらとアカウントを登録して、はっと気づけばAMPテストまで行っておりました。

Seesaaブログ、凄い!!!

作業は、設定を「配信する」に変更するだけです。

Seesaaブログ、お知らせより引用

【Seesaaブログ】AMP配信機能をリリースしました
AMP(Accelerated Mobile Pages)とは検索結果からの表示快速化を目的としてGoogle等が取り組むプロジェクトおよびそれに由来する仕組みです。
マイブログ>設定>ブログ設定の【AMP配信】にて「配信する」を選択している場合、そのブログはAMP配信状態となり、Googleの検索結果において従来とは別の枠でも表示されることがあります。
※通常のGoogle検索結果と同様、必ず表示されるものではありません。

Googleのバリデーターでも問題なし

Google Search Console、AMPテスト

有効なAMPページ

これ、めちゃめちゃ感動しました~!

しかし、コードを書き換えるわけでも、コードを書き加えるわけでもなく、設定をぽちっと変えるだけなんです。変な話、無理やりどうにかしてAMP化させようとしていたので、これだけあっさりしていると、肩透かしでちょっと寂しかったりします。

テストスニペット

嗚呼っ。稲妻マークが眩しい~。かっこいい~~。(この感覚はネット環境が悪いところにお住いの方にしかわからないかもしれません)

というわけで、あっさり、テストが終了してしまいました。同テストブログの寿命2時間って、流石にさびしいですし、折角なので、Seesaaブログの使い勝手をしばらく見てみるのもいいかもしれません。

Seesaaブログの感想(使用歴2時間ぐらい)

驚くほど好みな感じのテンプレートでした。
デザインではなく、CSSやHTMLの書き方が、ですが…
デフォルト&スタンダードテンプレートは、セクションタグがキレイに入ったHTML5テンプレートでしたし。
meta descriptionもmeta keywordを記事毎に設定できますし。
AMPも好みな感じのJSON-LDでのマークアップでしたし。

最近はまっているHTML、CSSのカスタマイズも、サクサクできそうな感じです。
アップロードのファイルサイズが1件10MBまで入るので、写真ブログにはいいかもしれません。
本文に「写真+撮影情報+写真に関するよもやま話」を書いて、フッター1ページ送りをつけるとmyギャラリー風になって楽しそう。
1カラムのテンプレートがパッと見つからなかったのですが、カスタマイズで仕立て直すことは出来そうです。
写真ブロガーさんたちがよく使っている、黒・グレー系の目が疲れない&写真が引き立つ背景色にしていろいろ遊んでみるのもいいかもしれません。

そして何より、当ブログでうっとおしい感満載のカスタマイズ記録の引っ越し先に最適です。

ただ、広告がめちゃめちゃ多くて、しかも大きくて、ショッキング

AMPには構文エラーがないのに、HTMLには構文エラーが9件。

んぎゃ。書いている途中に、ね、寝落ちしてしまいました…

本日は、とりあえずここまで。

一緒に添い寝トークするなら、まどか派 or えみ派? (カテゴリー削除の影響)

私の祖母は、「えみ」という名前でした。決して美人ではないけれど、かわいい人でした。

添い寝トークするなら、断然「えみ」がいい!
なぜなら、祖母は布団に入ったら即刻寝入る人で、彼女と添い寝した状態でトークをすることは不可能だったからです。
「えみ」との添い寝トークは、孫達全員の悲願でありました。

って、よく読んだら、「みえ」で、「えみ」じゃなかった…。最近のトレンドでは「みえ」が多いのかな?

えみ派

メタタグを入れないと、スニペットがひどい…

ところで、本題は、思わず目を疑った、当ブログのgoogle検索スニペットについてです。HTML5に仕立て直してから、メタタグを入れていなかったら、こんなことになっていました。笑撃…

メタタグを入れないと、ロボ子(=googlebot)がうまくコンテンツを探せないというのは本当でした!!

一番ひどいのは、削除されたカテゴリーでした。空のコンテンツなので、ページ上にある情報を適当に見繕ったら、「添い寝」のFC2広告が出てきちゃったって感じでしょうか??

ぎゃ~

削除されたカテゴリー

これが削除されたカテゴリーだけならいいのですが、実はホームも似たり寄ったりの状況で、メタタグの重要性を、ひしひしと感じました。(JSON-LDでのマークアップは、記事ページにしか効かないようにしているので、ホームやタグ、カテゴリー、新着順、全記事一覧ページは、無施策でした。)

とりあえず、削除されたカテゴリー10(海外家計管理、家計簿)のページがグーグルサーチにかかってこないようにサーチコンソールで作業していたら、エラーメッセージが出てきました。

Search Console, 古いコンテンツの削除, 削除前確認ポップアップより

削除をリクエストする

URL: http://laggy2015.blog.fc2.com/blog-category-10.html
削除しようとしているウェブページは、まだサイト所有者が削除していないようです。
Google が検索結果からコンテンツを削除するには、サイト所有者がそのコンテンツを削除または更新している必要があります。
ウェブページは元のウェブサイトで更新または削除されていますか?

カテゴリーとしては削除されていて、10番は欠番、復活もできない状態なのですが、URLとしては削除されていないみたいです。どうしたら削除できるのかわからないので、サーチコンソールでは、削除ではなく、いったん非表示のリクエストにしておきました。

まどかとみえには申し訳ないけれど…

この広告がスニペットに表示されるのは、嫌だな~。(笑えるけど…)

削除されたカテゴリーやページ以外は、メタタグで何とかなりそうだと楽観しています。ただ、削除されて、私では復活できないページは、同じものを新たに準備して上書きするしかないのかな???

単に公開→下書きにしただけのページは、違う内容で上書き→再公開してfetch as googleで新しいスニペットを作ってもらう実験をしてみます。

まどかとみえは削除できた!

ブログの設定→環境設定→検索バーの設定→検索バーの利用→利用しないです。うーん。簡単。これまで何故つけてきたのかがわからないぐらい…

私が検索バーを削除した最大の動機はW3Cの構文エラーです。この検索バーを取り除くだけで構文エラーが6つもへりました。もともと9つあったエラーが3つになったというのは快挙です。うれしい~。

FC2ヘッダーを削除したらなくなったエラー

更にいいことに、ページ内アンカーテキストがスムーズにジャンプできるようになりました。もともとスムーズにジャンプしていたのですが、検索バーに隠されていたので、本格的に使うようになったら、ネガティブマージンとやらで調節する必要がなるのかな??なんて思っておりました。

今日はブログ禁止!(笑)

うぉ~。3月に書いた記事が一個もない…

仕事が忙しかったこともあるのですが、新しい記事を書く余力がなく、夜な夜なゲームとテンプレートカスタマイズに明け暮れておりました。

ゲームは兎も角、テンプレートカスタマイズの方は、「現実逃避したくて、感情移入なしで何か没頭できること…」的な感じで始めたところ、予想外にハマってしまいました。ロボ語学習おもしろいです。

カスタマイズでやったこと

AMP (Accelerated Mobile Page)化
断念しました。おそらくFC2でもBloggerでもできません。(私には)
詳しくは→Template 25、AMP化の失敗と雑談
HTML5化
今のところ、とりあえずちゃんと動いていそうです。
詳しくは→Template 23、テンプレートをHTML5に書き換えた
コンテンツモデルへの書き換え
セクショニングタグ進捗
divタグを可能な限りheader、nav、section、article、footer等のセクショニングタグへ入れ替えて、フローコンテンツ化する。
皆様から頂いたコメントは独立したArticleとしてマークアップしております!
詳しくは→執筆ガイドライン10、コメントはArticleだ!
CommentをJSON-LDでもマークアップ
マークアップできそうじゃない??なんて思って始めたのですが、うまく行きません…(今ココ)

いただくコメントが本記事より有用…

私がブロガーとして自慢できることがあるとすれば、「想定より長く続けている」事と、「コメントでいろいろ教えてもらえる」事です。とてもうれしく思っております。

この為、コメントは独立したArticleとして扱える事を知った時、なんだかしみじみ納得いたしました。それで、HTMLをarticleに書き換えた後、JSON-LDでもマークアップしようと試みたのです。

JSON-LDコメントのマークアップ

サンプルは最近のコメントで、URLまで入れてくださっていた、さいもんさんから頂いたコメントです。適当に作った「JSON-LDの雛形」に、FC2の「テンプレート用 変数一覧」を埋め込んで、お名前、URL、コメントタイトル、コメント本文、コメント日時をマークアップしました。

キレイに入ったように見えたのですが…

JSON-LD記事全体

コメントが8件(ぷうままさんとケフコさんとのやり取りがちゃんとマークアップされていて、感涙。)、ブログ記事が1件、パンくずリストが1件、ウェブページが1件、と、エラーが2件。

このエラーが曲者で、コメント由来なのに、他の3種のマークアップにもエラー加算されちゃっていたので、削除せざるを得ません。あ~。なんかあと一歩な気がするんだけどな~~なんて思いつつ、もうそろそろ現実世界に戻らないと…、家が大変なことになっています。

本日の課題

  1. (たまっている)食器洗い
  2. (たまっている)洗濯
  3. 掃除
  4. (たまっている)アイロンがけ
  5. 食材の買い物
  6. 来週の出張のホテル&交通機関の予約
  7. その他、諸々

今回、私の最低防衛ラインは、「ゴミだし」だということがわかりました。爆笑。他のことは全滅です。あ~。家事力。お~。家事力。う~。家事力…

余談

現実逃避に新しい外国語(ロボ語)に没頭できたことはとてもよかったと思います。会社の意向次第で住む場所を選べない現実に、衝動的に会社を辞めそうになりましたが、何とか持ち直して、やり過しています。

今回、ブログの見た目は一切変わらないものの、中身(コード)をちょいちょい変えています。こういうパフォーマンスを生まないことは仕事上、「趣味」と揶揄される対象だったりします。まぁ、実際に、趣味なのですが、やってみたいことに自己責任で、が~っと没頭できるというのはスカッとしますね。

執筆ガイドライン11、「Figure+Figcaption」と「alt+title」

FigureタグとFigcaptionタグ

FC2では、アンカー要素の子要素の状態でimg要素が挿入され、alt属性、title属性を内包した状態で貼り付けられます。

ワードプレスでは、メディア(画像など)を記事に貼る際、caption(説明文)をつけるか選択することができます。figureタグ(親)の中にaタグ(子1)とそこに内包されるimgタグ(孫)、figcaptionタグ(子2)の構成になっています。↓こんな感じ↓

figure-element
Figureタグ(親)とAタグ(子1)とFigcaptionタグ(子2)

更に言えば、孫要素のimgタグの中に、alt属性とtitle属性を追加すればフル装備です。

いくつか親→子→孫のパターンを検証してみました。aタグの中にfigcaptionタグが内包できればよかったのですが、それは文法エラーの様です。ブラウザーでは表示できますケド。

figcaptionタグ、CSS追記

figcaption {
font-size: 0.75em;
color: #999;
}

画像の付属情報っぽく見えるように、字をちっさく、グレーに変えたCSSを追記しました。なんか雰囲気出たな~っと自己満足。ふふふ。

毎回この仕様で図を挿入するかは謎ですが、補足情報フル装備のサンプルは知っておいた方がいいかな~っと。

W3Cサイト関連項目「Images in HTML

執筆ガイドライン10、コメントはArticleだ!

んぉ。そうなの?

と、最初は驚いたのですが、なるほど納得する部分もあって、CSSを書き換え、独立したArticleとして扱うことにいたしました。

まずはArticleの定義から

W3C、「HTML/Elements/article」より引用

<article>
The <article> element represents an independent item section of content.

Point

  • Independent item section of content:
    • forum post
    • magazine article
    • newspaper article
    • blog entry
    • user-submitted comment [Example B] ...

In principle, content in the article element should be independently distributable or reusable.

Myヘボ訳
<article>は、独立した構成を持つコンテンツを表す。
ポイント

  • 独立した構成を持つコンテンツ:
    • 討論記事
    • 雑誌記事
    • 新聞記事
    • ブログ記事
    • ユーザーが投稿したコメント

原則として、アーティクル要素は独立して配信可能かつ再掲可能であるべき。

そして、[Example B]を当ブログに置き換えると下記のような感じでしょうか?

コメントは独立記事

当ブログの執筆ガイドライン

コメントはArticle扱いとする。

そして、今後わからないことがあったら、W3CもしくはgoogleのDeveloppers's siteにて調べる。