HTML
JavaScript
HTML5
SEO
検索エンジン

転生したらGoogleボットだった件

※フィクションです。Googleの検索アルゴリズムが実際このように動いているという話ではありません。


やれやれ、ワイは蘇生した。

ワイ「・・・うーん・・・ハッ!?」

ワイ「あれ・・・?」

ワイ「ワイ・・・生きてるんか!?」

ワイ「・・・何やこの真っ白い部屋は・・・!」

ワイ「何がどうなってるんや・・・」

ワイ「確かワイは・・・」


それは昨日のこと

ワイ「確か、ワイらがようやくWebサイトを作り上げた後に」

ワイ「クライアントの一番偉い人が登場して」

ワイ「仕様を根本から変えたいって言い出したんや・・・」

ワイ「それまでのウォーターフォール型開発から、突如メテオフォール型開発1に方針転換したことで」

ワイ「確か、ワイはショックで殉職してしもうたはず・・・」

ワイ「・・・と思ってたけど、どうやら一命を取り留めたようやな・・・」


しかし何かが違う

ワイ「でも、何か普段と違う感じがするで・・・」

ワイ「・・・あっ!!!」

ワイ「何やこの体・・・!」

ワイ「ワイ、Googlebotになってもうとるやないかい!!!」

ハリー先輩「なんで体を見て分かんねん

ハリー先輩「設定ムチャクチャやん


ハリー先輩もいた

ワイ「ハリー先輩!?

ハリー先輩「どうやら俺達はメテオフォールのショックで、チームメンバー全員が殉職してもうたみたいや」

ハリー先輩「そしてこの世界に転生したいうことやな」

ワイ「そんな・・・」

ワイ「ところでこの真っ白い部屋は何でっか?」

ワイ「ここはどういう世界なんでっか!?」


ここは検索エンジン

ハリー先輩「どうやらここはGoogleの検索エンジンや」

ハリー先輩「世界中のWebサイトの情報を集めて」

ハリー先輩「ユーザーが検索したワードに関する情報が載っているサイトを」

ハリー先輩「一覧にして提供するのがお仕事や」

ワイ「おお・・・!そうなんでっか・・・!」

ワイ「さすがハリー先輩・・・」

ワイ「この何もない真っ白い部屋の中に急にほっぽり出されて

ワイ「ノーヒントでそこまで状況を把握してまうなんて・・・」

ワイ「やっぱりハンパなさ過ぎますわ・・・!」

ハリー先輩「そんなことはええ」

ハリー先輩「ウダウダ言うててもしゃあない」

ハリー先輩「とにかく、お前はこの世界ではGooglebotや」

ハリー先輩「早くWebサイトをクローリングしてこい!」

ワイ「はいっ!」


クローリング開始

ワイ「まずはjzmstrjp.netlify.comいうサイトやな・・・」

ワイ「おお、一瞬で着いたで」

ワイ「どれどれ・・・」

ワイ「・・・何やこのWebサイト」

ワイ「中身が空っぽやんけ」

<div id="app"></div>

ワイ「body要素の中身、実質これだけやないか」

ワイ「ん・・・?」

ワイ「・・・なんかワイの中から不思議な力を感じるで・・・!」

ワイ「!?

<div id="app">

<header>
<h1>bfjnxkrhorzlb</h1>
</header>
<nav>
<ul>
<li><a href="/aaa/" title="">lksbjhiu</a></li>
<li><a href="/bbb/" title="">stih;bjb</a></li>
<li><a href="/ccc/" title="">nbsltuhbkls</a></li>
</ul>
</nav>
<section>
<h2>sep:igzrjf:</h2>
<p>;tpeshj;kzjbxkkb</p>
</section>

<!-- 省略 -->

<footer>
gjs;rsoibjvkjg;lrgk
</footer>
</div>

ワイ「おお・・・!」

ワイ「さっきまで空っぽに見えたdiv要素の中に」

ワイ「色んな要素たちが生成されたで・・・!」

ワイ「ワイの中のJavaScriptパワーが目覚めて」

ワイ「このサイト内のスクリプトを解釈することができたんやな」

ワイ「前世ではあんなに読めへんかったJavaScriptが」

ワイ「無意識レベルで理解できたで・・・!」

ワイ「最近のGoogleのクローラーは最新のChrome相当やっていうもんな」

ワイ「せやからこういう、JSで動的に生成されるページも解釈可能なんやな」

ワイ「よっしゃ、この調子で色んなサイトを見て回って、内容を保存していくで!」


しばらくして、ハリー先輩のところへ帰る

ワイ「ハリー先輩!」

ワイ「とりあえず10サイトで2,000ページほど保存して持ってきました!」

ハリー先輩「おう、ご苦労やったな」

ハリー先輩「どれどれ、まずはjzmstrjp.netlify.comの内容を見てみよか・・・」


解析開始

ハリー先輩「なるほどな、このページの・・・」

ハリー先輩「ここからここまでの部分は、このテーマについて書いてあるんやな・・・」

ワイ「え?ハリー先輩・・・」

<section>

<h2>sep:igzrjf:</h2>
<p>;tpeshj;kzjbxkkb</p>
<!-- 省略 -->
</section>

ワイ「この変な文字列読めるんでっか!?」

ハリー先輩「いや、読めへんで」

ハリー先輩「俺たちロボットは、日本語や英語みたいな自然言語をちゃんと理解できるわけやないからな」

ハリー先輩「sep:igzrjf:みたいな意味不明な文字列としてしか認識できひんねや」

ワイ「ほな何で文書の構造みたいなんが分かるんでっか?」

ハリー先輩「このページはちゃんとセマンティックなタグでマークアップされとるからな」

ワイ「セマンティックなタグ・・・?」

ハリー先輩「html5からぎょうさん増えた、意味のあるタグのことや」

ハリー先輩「例えば・・・」

<div>

<h2>sep:igzrjf:</h2>
<p>;tpeshj;kzjbxkkb</p>
<!-- 省略 -->
</div>

ハリー先輩「こんな感じでsectionやなくてdivタグでマークアップされとったら」

ハリー先輩「その中のh2タグがどの範囲に対する見出しなのかが曖昧やねん」

ハリー先輩「divタグってのは、文書構造的な意味を持たない汎用的なタグやからな」

ハリー先輩「せやけど、このページではちゃんとsectionタグが使われとるから」

ハリー先輩「このh2要素は、この章(セクション)に対する見出しなんやな、って分かんねん」

ハリー先輩「俺たちロボットでも読みやすい、マシンリーダブルなhtml文書やっちゅうことや」

ワイ「おお・・・なるほど・・・」

??「こっちのページなんかも分かりやすいですよ

ワイ「・・・君は・・・!?」


ハスケル子も転生していた

ワイ「天才中学生ハスケル子ちゃんやないか!」

ワイ「君も転生しとったんやな・・・!」

ワイ「っていうか、インターンなのにブラック案件に巻き込んでごめんな・・・」

ハスケル子「そんなことは今どうでもいいんです」

ワイ「(殉職も意に介さず!?)」

ハスケル子「ここのhtmlソースを見てください」

<figure>

<img src="aaa.png" alt="a;grhb;z">
<figcaption>bns*?gjrsj</figcaption>
</figure>

ハスケル子「ちゃんとfigureタグが使われているので」

ハスケル子「このfigcaptionが、この画像に対する説明だってことが分かります」

ワイ「おお〜、そんなタグもあんねんな・・・!」

ワイ「たしかに・・・」

<div>

<img src="aaa.png" alt="a;grhb;z">
<span>bns*?gjrsj</span>
</div>

ワイ「もし、こんな感じでdivspanばっかりでマークアップされとったら」

ワイ「ワイらロボットには、この画像とテキストの関係性が分からへんもんな」

ハスケル子「そういう事です」

ワイ「なるほどな〜」

ワイ「セマンティック要素を使用すると、検索エンジンに対して文書構造を明確にアピールできる・・・」

ワイ「とか聞いたことあったけど、こういうことやったんやな・・・」

ワイ「ホンマいろいろ知ってんな、ハスケル子ちゃん」

ハスケル子「やめ太郎くん・・・やめ太郎くん・・・

ワイ「ん、ハスケル子ちゃん?」

ワイ「どないしたんや?」

ハスケル子「やめ太郎くん・・・やめ太郎くん・・・」

ワイ「ハリー先輩!ハスケル子ちゃんの様子がおかしいでっせ!」

ハリー先輩「やめ太郎くん・・・やめ太郎くん・・・」

ワイ「ハリー先輩まで!」

ワイ「どないなってんねや・・・!」


ここで目が覚める

社長「やめ太郎くん・・・やめ太郎くん・・・!」

社長「おい!やめ太郎くん!

社長「堂々と昼寝すなよ・・・!

ワイ「ファッ!?

ワイ「ワイは殉職してGooglebotに・・・」

ワイ「早くクローリングの続きをせんと・・・」

社長「何を寝ぼけてんねん・・・」

社長「さっさと昨日頼んだhtmlコーディング終わらしてくれや・・・」

ワイ「ゆ、夢やったんか・・・」


気を取り直してマークアップ

ワイ「よっしゃ、夢の中で学んだことを活かして」

ワイ「セマンティックなマークアップをしていくで!」


しかし5分後

ワイ「ここは何のタグでマークアップすべきかな・・・」

ワイ「いうてもワイ、アホやから・・・」

ワイ「そもそも文章内の言葉の意味が分からん・・・」

ワイ「意味の分からん言葉意味のあるタグなんて付けられまっかいな・・・」

ワイ「・・・もう全部divタグでええわ!!!」

社長「おい、さっきから全部聞こえてんで・・・!」

社長「ほんまに殉職させたろかい!!!

〜おしまい〜





  1. 神(偉い人)が現れて、隕石のような破壊力のある指示で現場を無茶苦茶にする開発手法。