0
2
テーマ、知りたいこと
h1タグをCSSのopacityやvisibilityで見えなくするのはSEO的に良くないでしょうか？
背景、状況
ホームページのロゴをh1タグとしてヘッダーの左上にコーディングしました
そのロゴをjQueryを使ってスクロールに応じて表示したり消したりしたいのですが、h1タグが画面から見えなくなってしまうのは良くないのではないかと思ったのですが問題ないでしょうか？
例として簡単なコードを載せておきます
【トップから400px以上スクロールすると.logoに.is-showを付けて表示、399px以下の場合は.is-showを取り除いて.logoを非表示】
HTML
1<header> 2 <h1 class="logo"> 3 <a href="#"><img src="〇〇.png" alt=""></a> 4 </h1> 5</header>
CSS
1.logo { 2 opacity: 0; 3 visibility: hidden; 4} 5 6.logo.is-show { 7 opacity: 1; 8 visibility: visible; 9}
JavaScript
1jQuery(window).on("scroll", function() { 2 if (400 < jQuery(this).scrollTop()) { 3 jQuery('.logo').addClass( 'is-show' ); 4 } else { 5 jQuery('.logo').removeClass( 'is-show' ); 6 } 7 });
回答3件
#1
総合スコア684
投稿2023/05/30 12:25
検索エンジンはいくつもあり、日々進化していること、
また、公式が公表している情報も多くはありません。
Googleに限った話になりますが、
以前、関係者が「必然性があれば問題ない」と話したことがあります。
必然性という部分がかなり曖昧ですが、
要するにスパム目的でなければ問題ないという解釈を私はしています。
当然、どのような基準で必然かスパムかを識別しているかは公表されていませんが、
無闇に要素を隠したりするのは避けた方が無難だと思います。
#3
総合スコア9555
投稿2023/06/01 03:00
そのロゴをjQueryを使ってスクロールに応じて表示したり消したりしたいのですが
質問上段の一文だけだと、あまりよろしくない、としか言えませんが、
上記の状況に応じてであれば特に問題ないと考えられます。
私も、自身のサイトにおいて、スクロールによって、h1ないし、相当の要素を隠していますが、
それによって、SEOに悪影響を及ぼしてはないと判断される状況です。
補足：表示非表示より悪影響がある可能性
それは、共通ヘッダーのサイトロゴにh1を当てていることです。
h1要素は、そのWebサイトにおける、ユニークタイトルを当てるのが最も適当であると思われるものなので、
共通のサイトヘッダー部のロゴに、全Webページにおいてh1を当てることは、SEO的にあまりよろしくありません。
Webページのユニークタイトルが存在しないような、トップページなどには、ありかと思います。
そして、セカンドページ以降は、そのWebページのユニークタイトルにh1を当てる、
これが、現状最もSEOに適っているマークアップと思われます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。