こんにちは😃愛西スタッフです！
先日、移行支援事業所 障碍者ITカレッジ愛西 専用サイトをリニューアルしました！
ここで、このリニューアルサイト制作の際の失敗談を一つ話したいと思います。
トップページに「動画紹介」として広告動画がありますが、製作段階では全く別のYouTubeの動画をダミーとして置いていました。そのダミー動画に「display: none;」のスタイルを加えて隠し、これにて一件落着、と思ったのですが…
HTML
<div class="sample-img-wrapper" style="display: none;"><img class="sample-img" src="https://npo-csr.jp/wp-content/uploads/2023/05/413ce024118191959cdce60eb24ec9c4.jpg" alt="こちらはダミー画像"></div> <div class="sample-img-wrapper"><img class="sample-img" src="https://npo-csr.jp/wp-content/uploads/2021/10/b9b671906210c3f731437246b6060d07.jpg" alt="こちらを表示させたい"></div>
デモ
こちらのサンプルで本命の画像だけが表示されているように、本番サイトでも目的の動画だけが見える状態ですが、Google検索ではダミー動画のサムネイルが拾われてしまいました！
CSSで「display: none;」で非表示にしても、人の目から隠しただけであり、中のコンテンツはしっかり読み込まれています！
ダミーの後処理には最後まで気を付けなければならない、ということを痛感した一件でした＼(^o^)／