コメントアウトでちょっとやらかした件「FC2ブログ個人設定によるOGP」

対象テンプレートは2018.7.17現時点で最新のLa_Vita です。

La_Vita - FC2ブログテンプレート

La_Vitaテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

vanillaice000.blog.fc2.com

テンプレートのhtmlソース内に以下のようなコメントがあります。

<!-- 注)アクセス解析ここから(google analyticsの場合は</head>直前に入れてください) -->

みなさんがテンプレートのカスタマイズをされる際に目にするのも上記と全く同じ内容です。で、これは「コメント」なのでhtmlに変換されることは無いのですが、FC2ブログのシステムによって内容が変更(というか追加) が行われます。

みなさん FC2独自変数 という言葉を耳にしたことがあると思います。ある特定の文字列を記しておくと、サーバーサイドで対応するテキストに変換されます。例えば <%author_name> と記しておくと、サーバーからデータが戻って来てブラウザに表示される際には私の場合であれば vanillaice (Akira) となっています。つまり各々のユーザーハンドルネームに変換されます。

こうしたサーバーサイドの処理はいたる所で見受けられるのですが、今回の場合は変換ではなく ユーザ任意の「OGP設定」のON/OFFをFC2サーバーサイドがどのように処理しているか に関係します。

<!-- 注)アクセス解析ここから(google analyticsの場合は</head>直前に入れてください) -->

上記文字列は以下のように変化します。

<!-- 注)アクセス解析ここから(google analyticsの場合は<meta property="og:site_name" content="ブログ名">
<meta property="og:title" content="記事タイトル">
<meta property="og:type" content="blog">
<meta property="og:description" content="記事概要文">
<meta property="og:image" content="記事URL">
</head>直前に入れてください) -->

緑の部位が追加されている内容です。
OGP設定内容がそのまま表示されています。

この理由なんですが、バックエンド(サーバーサイド)処理であろうとフロンドエンド(ユーザーサイド)処理であろうと、html内に何かを 書き足そう と思えば必ず 目印 が必要です。htmlソースコード内から特定の文字列を見つけ、そこへ差し込むわけですね。OGPに関するmeta要素を追加する際、FC2ブログサーバーでは </head> を目印にその直前にOGP関連meta要素を挿入しています。例えそれがhtml変換を避けるためのコメントであろうと、文字列を発見すれば問答無用でmeta要素の追加が行われる、という仕組みです。

FC2ブログはテンプレートデザインはおろかhtml内容も全く統一されていませんので、どんなテンプレートにも必ず記述されており、かつ構文ルールとしても正しい位置 </head> 直前を目印にすることは合理的だと言えます。

それでですね、この状態(コメント内にOGPhtml出力)がレンダリング等に何かしらの害を及ぼすかと言えばそれはありません。コメント内はhtml構文ではなく単なる文字列として扱われます。SEO的にもGoogle botがこの文字列を見たところで無視します。そもそもそれがコメントの役割です。ただ、右クリックによるソース開示や要素検証などをした際に「なんじゃこれ。変なの (´・ω・｀)」と思われることはあるかもしれない(笑)

この現象自体は予測可能でしたが、私は全く失念というか気にしてなかった (´・ω・｀) ←
ユーザーさんにとっては head終了タグの直前に と記すよりも </head>直前に とした方がわかりやすいですよね。わかりやすさしか気にしておりませんでした （￣∀￣；）

もしかしたら「なんかhtmlがおかしいよ！！ 」と焦ってしまう方もいらっしゃるかもしれませんのでお伝えしておきます。気になる方はコメントを削除するなどの処理をお願いします。