Bloggerのブログ上部に「-->」が表示される

2020/09/132021/12/02

はじめに
発生条件
発生原因
暫定対応
最終対応
備考（ブログ下部に「-->」が表示される）
別解（HTMLのコメントアウト）

はじめに

お盆明けにサイト見に行ったら、サイト上部に見慣れぬ「-->」の文字がありました。直前のテーマ編集時になにか間違えたかと思い調べてみたら、Bloggerの仕様変更が絡む問題のようです。長い間、良い方法が見つからず対処方法が本決まりしませんでしたが、良い方法が見つかったため、記事にします。

発生条件

発生条件は、「Blogger側の自動追加ヘッダーをコメントアウトする処理」と「GoogleAdSenseとBloggerがリンクしている」の2つの条件に合致することです。

「Blogger側の自動追加ヘッダーをコメントアウトする処理」とは、次のコードです。

&lt;/head&gt;&lt;!--</head>--&gt;
or
&lt;!--<head/>--&gt;&lt;/head&gt;

発生原因

Bloggerの自動追加ヘッダー内にコメントアウトされたコードが追加されたことが原因です。「Blogger側の自動追加ヘッダーをコメントアウトする処理」の内部にコメントアウトされた自動追加ヘッダーが現れたため、2重にコメントアウトが発生して、「-->」がコメントアウトされなくなり問題の現象が発生していました。

※HTML5では、<body>は省略できるため、</head>直後の「-->」は通常の本文として処理されて表示された。

二重にコメントアウトした例...

<head>

...

</head><!--

<!-- data-ad-client=ca-pub-7747394132802715 -->

</head>-->
<body>

...

考察

なぜ、コメントアウトされたAdSense用コードが自動追加ヘッダー内に追加されたのかは不明です。ただし、この頃Bloggerは、大規模な管理画面まわりの変更を行っています。そのため、その一環として自動追加ヘッダー内のコード修正があったものと考えられます。

現状でこの問題コードは、通常の処理として意味をなしていません。そのため、対応されて削除される可能性があります。ただし、無意味なコードのため放置される可能性もありえます。なので、時間が経てば治っている類の問題かと問われれば疑問が残ります。

暫定対応

問題箇所を次のコードに置き換える。

</head>

※ごくごく普通の</head>です。自動追加ヘッダーは、コメントアウトできなくなります。
※TOPや投稿で読み込むCSSが異なるようです。

最終対応

問題箇所を次のコードに置き換える。

&lt;!--</head>&lt;!-- --&gt;

解説

元々のコードは、正規の</head>をコメントアウトして、偽物の</head>で<head>を閉じていました。

新規のコードは、通常の場合、正規の</head>をコメントアウトして、</head>を省略します。2重コメントとなった場合、正規の</head>と（空のコメントアウト）として動作します。

※問題のコードが、追加コード全体の最後にくることを前提としています。
※HTML5では、</head>は、条件を満たせば省略することが可能です。
※2重コメントとなるため、W3Cのチェッカーで指摘されます。

元々のコード例<head>

...

<!--
自動追加ヘッダー
</head>--></head>
<body>

...

新規のコード例（2重コメントなし）<head>

...

<!--
自動追加ヘッダー
</head><!-- -->
<body>

...

新規のコード例（2重コメントあり）<head>

...

<!--
自動追加ヘッダー
<!-- data-ad-client=ca-pub-7747394132802715 -->
</head><!-- -->
<body>

...

備考（ブログ下部に「-->」が表示される）

ちなみに、</body>側でも問題が発生しています。ただし、日本ではなく、EU圏で発生します。欧州データ保護規則（GDPR）絡みの処理で同様に追加コード内の2重コメントで問題が発生します。

ただし、こちらではコメントアウトコードより後に有効な処理が記述されているため、追加コードを完全にコメントアウトすることはできません。

問題発生コード例&lt;!--</body>--&gt;&lt;/body&gt;

問題発生例<!--<script src='https://apis.google.com/js/plusone.js' type='text/javascript'></script>
<!--Es liegt in deiner Verantwortung, deine Besucher \xfcber die in deinem Blog verwendeten Cookies und die dort erfassten Daten zu informieren. Blogger stellt daf\xfcr eine Standardbenachrichtigung zur Verf\xfcgung, die du \xfcbernehmen, anpassen oder durch deine eigene Mitteilung ersetzen kannst. Weitere Informationen findest du unter http://www.blogger.com/go/cookiechoices.-->
<script defer='' src='/js/cookienotice.js'></script>
<script>
    document.addEventListener('DOMContentLoaded', function(event) {
      window.cookieChoices && cookieChoices.showCookieConsentBar && cookieChoices.showCookieConsentBar(
          (window.cookieOptions && cookieOptions.msg) || 'Diese Website verwendet Cookies von Google, um Dienste anzubieten und Zugriffe zu analysieren. Deine IP-Adresse und dein User-Agent werden zusammen mit Messwerten zur Leistung und Sicherheit f\xfcr Google freigegeben. So k\xf6nnen Nutzungsstatistiken generiert, Missbrauchsf\xe4lle erkannt und behoben und die Qualit\xe4t des Dienstes gew\xe4hrleistet werden.',
          (window.cookieOptions && cookieOptions.close) || 'OK',
          (window.cookieOptions && cookieOptions.learn) || 'Weitere Informationen',
          (window.cookieOptions && cookieOptions.link) || 'https://www.blogger.com/go/blogspot-cookies');
    });
  </script>

</body>--></body>

回避策&lt;!--</body>&lt;!-- --&gt;

※別解の<style>を使用する方法で完全なコメントアウトが可能です。

別解（HTMLのコメントアウト）

style&lt;style&gt;/* </head> */&lt;/style&gt;

&lt;style&gt;/* </body> */&lt;/style&gt;

template&lt;template&gt;</body>&lt;/template&gt;

script&lt;script type="text/template"&gt;</body>&lt;/script&gt;

※<style>は、<body>内で正式には使用不可
※<template>は、IE非対応
※<script>は、コード内に</script>があるため、今回は使用不可