 |
| 宮島に渡るフェリー |
去る２月１７日に，廿日市市商工会議所青年部主催で廿日市ビジネスチャレンジコンテストが開催されました。
聴講に行ってきましたが，なんと1等賞は安田女子大学の学生さん，廿日市の特産品である牡蠣に関する牡蠣殻の脱臭剤というリサイクル新規事業のご提案でした。
牡蠣殻は，多孔質で脱臭効果があるそうで，廿日市市でも牡蠣殻の処分に困っており，誠に時機を得た提案ということです。
大学生の方が1位になるって，社会経験もまだそんなに無いのに凄いですね。
さて，今回は，ぱんくずリストの作成です。ぱんくずリストというのは，英語では「breadcrumbs」と言い，ウェブページの位置をツリー構造を持ったリンクとして示す仕組みで，ブログのTopに以下のように表示されます。
Home > カテゴリー名 > ハッシュタグ名 > 記事名称
Webサイトを訪れたユーザが，サイト内の今何処にいるかを視覚的に分かり易くする効果が期待されますが，残念ながら，GoogleBloggerにはその機能はありません。
また，ラベルも１種類しかないため，カテゴリー（大分類），ハッシュタグ（中分類）と分類するのが難しいところです。
そこで，Bloggerのラベルを工夫し，特定の記号「#」をつけることで，カテゴリーとタグを識別するようにサイトのテーマHTMLを修正して，それらしく加工する手法を学習しました。
基本的には，Bloggerをやっておられるベテラン実例サイトを参考に，それぞれに修正して活用させて頂きました。詳しくは，ベテランエンジニアのサイトを見られるのが良いと思いますが，実際の実装方法について学習したいと思います。
それでは学習を始めます。
パンくずリストの効果
さて，パンくずリストの効果って何でしょうか。冒頭でウェブページの位置をツリー構造で示すものと言いましたが，このようなデータのことを「構造化データ」と言います。
この構造化データのメリットには，「サイト内でのページの位置をユーザに知らしめる」というメリットと，「検索エンジンなどのロボットがページやその文字列の意味を理解する」という二つのメリットがあります。
構造化データのマークアップ方法
この構造化データをサイト上で実現するためのマークアップ方法には，JSON-LD形式、RDFa形式、microdata形式の3種類があり，どちらかの方式を使って「パンくずリスト」を実現しているということです。
因みに，これらの構造化データを利用して，Google検索エンジンでは検索結果に「リッチリザルト」という特殊な表現をしています。「パンくずリスト」もその中の一つです。詳しくはGoogleの公式ページをご覧ください。
なお，Googleは 2020 年 2 月 21
日に、以前あった「data-vocabulary.org」方式
によるリッチリザルトの表示は終了したとのことです。
ネット上にはパンくずリストのCode例が沢山ありますが，「data-vocabulary.org」
方式の場合は，Google検索エンジンがクロールすると警告表示されますのでご注意ください。
Codeの中に「data-vocabulary.org」という単語が出てきますのですぐわかります。
「JSON-LD形式」は構造化データをJSON形式としてscriptタグ内に記述します。今回参考にさせて頂いたのは「microdata形式」でした。
パンくずリストの具体的な作成方法
パンくずリストを作成するには，Bloggerの公式テーマには機能がありませんので，HTML文を修正することになります。
Bloggerのコンテンツは，記事とページという区分があります。また，これらのコンテンツは，記事であればHomeから公開年＞公開月日＞ファイル名という形でアーカイブに格納されています。
ただ，公開年や公開月日は，ユーザにとっては何の意味も持たないので，これによるパンくずは意味を成し得ません。
そのため，ファイルに付けるラベルを整理して，カテゴリーとハッシュタグ「#」に分けて，記事とページファイルに設定し，ぱんくずリストとして表示する形にします。
具体的には，Bloggerの先輩サイトである以下のサイトを参考にさせて頂きました。
こちらのサイトは凄いです。尊敬します。こちらのようなサイトを作れるようになるのはいつのことかです。
【最新】Blogger専用パンくずリストを作ってみました | IB-Note
最新の構造化データに対応したBlogger専用のパンくずリストを作成しました。最新版パンくずリストの機能や導入方法について、詳しくご紹介します。
itblogger-note.blogspot.com
【Blogger】ラベル表示をカテゴリーとハッシュタグに分ける方法 | IB-Note
JetThemeのブログでよく見かけるあの仕様を通常テーマで再現する方法について、詳しくご紹介します。
itblogger-note.blogspot.com
具体的な作成方法については，上記サイトをご覧いただければと思います。実際やってみましたが，十分実用に耐えるパンくずリストが構成できます。
見事です。
ただ，一点だけ気になるとすれば，お示し頂いたCSSの中にある記号，つまりパンくずの階層を隔てる記号「＞」等が，Font
Awesome 5 Free版の「\F105」等を使っておられるので，そのフォントをお使いになるのであれば，link文でシートファイルを読み込む必要があります。ご注意ください。
もう既にフォントシートを読み込んでおられる方は問題ありません。Font Awesome
5 Free版にはリリースのバージョンがいろいろあるのですが，以下のシートぐらいでよろしいかと思います。機会があればFontAwesome 5について，別途，学習してみたいと思います。
これを<head>～</head>の中にご挿入ください。
コード
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"/>
本当は，Bloggerのテーマの修正文とCSSコードをお示ししたいところですが，Googleに「独自性とオリジナル性が無く有用でない」と言われましたので，先程のサイトをご覧ください。
先人の方の素晴らしい実績を実際に確かめることは，IT技術者にはとても重要な事で，実際に自分でやって理解を深めることで新たな進歩が期待できると思うのですが，どうも世の中は違うようです。
なお，対応されたページがリッチリザルトに対応出来ているかは，Googleのリッチリザルトテストで確かめることができます。
GoogleBloggerの独自タグについて
それと，GoogleBloggerは独自タグを使っています。はじめ私もよくわからなかったのですが，それに関する説明も以下のサイトに詳しく紹介されています。素晴らしいです。
【Blogger】独自タグの活用方法まとめ | IB-Note
BloggerのHTML編集で使える独自タグについて、具体的な使用法とともに詳しくご紹介します。
itblogger-note.blogspot.com
ブログカードについて
今回初めてブログカードなるものを利用しました。詳しくは，下記のサイトをご覧ください。私は，Web系HTMLの経験が浅いので，Linkを貼る場合は，Tableタグ等で自作すればいいかと思っておりました。
WordPressなどでは，利用するテーマによってブログカードが付属されているのですが，Bloggerではその機能がないため自作するしかないと考えておりました。そんな中，こちらのサイトの存在を知りました。
こちらのサイトは，現状で相手サイトのブログカードを簡単に作成するツールとしては最高です。相手サイトがページ内容を変えた場合の追随機能はありませんが，シンプルに作る上では申し分ないと思います。
使い方は，以下のサイトをご覧ください。
ブログカード作成ブックマークレットをアップデートしました
FC2ブログのみならず汎くお使い頂いているようで甲斐があったなぁ、と思っております ブログカード なんですが、アップデート、というか少しhtml内容を変更しました。...
なお，こちらのサイトでは，引用したいブログカードと，自分のサイト内のブログカードについて，カードを作るブックマークレット（ブックマーク上で動くプログラム）が分かれています。
まずは各々のブックマークレットをブックマークに登録し，ブログカードを作りたいWebページを表示させた後，該当するブックマークレットをクリックすると，コピーするHTMLスクリプトが表示されます。
それを，ご自分の記事のHTML文にコピー＆ペーストすれば完了です。なお，利用すべきCSS文が必要ですので，予めご自分のブログのテーマに仕込んでおく必要があります。
いままでLink文を貼るのが味気なかったので，使わせて頂きたいと思います。詳しくは先方のサイトをご覧ください。
最後に
今回は，一般的な評価を目的に申請したGoogleアドセンス審査の評価に大変悩みました。
内容が，有用性がない，独自性がない，オリジナル性もない，価値が低いといった評価だったからです。
当研究会のブログとして，これまで分かり易くかつ，これからのIT技術者の参考になることを念頭にやってきたつもりですが，その根底が間違っていたのかと考え込みました。
広告を出すための審査基準に適合するのであれば，これまで作ってきたブログの記事を全て見直し，当会の目的や活動方針を全て変えなくてはならなくなります。
実際，IT系ブログの記事は内容の信頼性を担保するため，実際に動かして評価するなどの時間が必要になり，２～３日の周期で記事を書くことなど出来ません。
もしも，PVを稼ぐために，話題性があり読者の多そうなオリジナル分野の記事を書くのであれば，「ITリテラシーを高め，社会に貢献するという基本的な考え」自体が無理なテーマだと思います。
悩んだ末，有用性がないとか，オリジナル性がない，価値が低いといったアドセンス審査基準への改修対応はとても無理との考えに至りました。
もとよりGoogleアドセンスに審査合格すれば，それなりのレベルになった証にはなると思いますが，それでは当会の目的が達成できなくなります。
相当に悩みましたが，今後も同じ路線で，いつかはオリジナルで価値の高い有用性のある記事の掲載を目指したいと考えます。
IT技術者は，他者の技術を学習し，さらにその上の新技術を開発することで，進歩があると考えていますので，ブレないで行こうと決めました。
それでは，またお会いしましょう。
0 件のコメント:
コメントを投稿