プロローグ
先日にあった、あるサイトの更新の話
クライアント：「期間限定キャンペーンの部分、もういらないから消してください」
私：（消すのはいいけど、絶対にまた同じ様なキャンペーン内容を表示させるよな...）
問題：非表示にする最適解は？
クライアントは「消せ」というが、サイト管理者として完全に消したくない場合に（該当部を非表示で留めておきたい場合に）、どの手段を取るのが最適か？
なお、htmlファイル単体で更新を行うものとします。
選択肢
- A）該当部に
style="display:none"を追加 - B）該当部に
style="visibility:hidden"を追加 - C）該当部をコメントアウト
<!-- -->
上記はいずれもコンテンツを見た目上では非表示にすることができます（ソースコード上には残っています）
検討
参考サイト１） display:none と visibility:hidden の違い
【CSS】display:noneとvisibility:hiddenの違いと非表示にする際の注意点
- 要約すると「display:none と visibility:hiddenの違いは、要素をなくすか非表示にだけするか」ということ
参考サイト2） 「display:none」はSEO効果を下げる！？
「display:none」はSEO効果を下げる／Google発言、長い論争に決着
- 要約すると、例えばウィンドウサイズで（メディアクエリで）コンテンツの表示/非表示を切り替えるために「display:none」を使うのは構わないが、常時に（どんな場合でも）「display:none」しているようなコンテンツがあると、SEO的に不利でっせ、ということ
参考サイト3） コメントアウト部をGoogleは完全に無視する
- 要約すると「コメントアウト部をGoogleは完全に無視する」「ただし、コメントアウト部が多ければ、ファイル量も増えるし、レスポンスの観点からSEO的には不利になるんちゃうかな。不要なコメントアウトは消しましょう」ということ
結論
今回は「C）該当部をコメントアウトする」を選択しました。
A）じゃない理由
- A）該当部に
style="display:none"を追加 - クライアントの指示があるまで該当部は、ずっと非表示にしているので、SEO的に良くない為。
B）じゃない理由
- B）該当部に
style="visibility:hidden"を追加 - 要素自体が消えるわけではなく、サイトのデザイン的に不自然な空白が生まれる為。
C）である理由
- C）該当部をコメントアウト
- 非表示にしたかったのは、画像１つとテキスト数行だけ。レスポンスに影響があるようなものではないと思うので。
本稿は以上です。