Q&A
>実際の現役の方は
たぶん、本気でで実務に関する情報欲しかったら実務に入るしかないと思いますよ。でなきゃ、それなりの対価を支払うか。
どのレベルでのアドバイスを求めているのか分かりませんが、場合によりQAでおさまる範囲ではないです。
現状だとふんわりした感じのものになります。
初心者です。
超基本的な部分の質問ですが、いつも悩む部分なのでアドバイス頂けると幸いです。
ヘッダー-----------------
ロゴ←
大見出し(サイトの名前など)
ヘッダー-----------------
こういった場合のロゴに、なんのタグを当てればよいのか、いつも迷います。
ヘッダーのロゴはh1でも構わないという記述をいくつかのサイトで参考にさせていただきました。
参考サイト
参考サイト
しかし、感覚的に、大見出しをh1にしたいので、
なんとなく、存在感があまり強くないヘッダーロゴにh1を使うのは気が引けます。
とすると、
テキストの場合は、<h2>を頭から使うわけにもいかないだろうし、
画像のロゴの場合は
<div>タグ…？実際の現役の方はどうしていらっしゃるのかなと思い、質問させて頂きました。
どうぞ宜しくお願いします。
[追記]
当方、ローカル環境で、課題をこなしている勉強中の者です。
この質問に、SEO的な観点や、どういった効果をもたらすのかなど、細かい指定の無い質問でした。
いつもなんとなく<p>タグで囲っていたので、調べたところ、
意見が様々あり、また参考にした記事の更新日も気になったので、
現役の方や、詳しい方の今のご意見をお聞きしたく質問した次第でした。
回答3件
0
ベストアンサー
これ、実はすごく、人によって実装揺れがあり、また、時代にもよるのでなんとも言えないのですが、
SEOの観点から、私が様々調査し、試した上での現代においての結論で、回答をいたします。
端的に申し上げますと、Webページの内容にもよりますが、
トップとセカンドページで使う要素を変えることが、トレンドであり、SEOに有効である、ということです。
トップページでは、h1、
セカンドページでは、pやdivを使う、ということです。
それは、h1の仕様や意味に起因します。
一昔前は、ロゴマークは、h1で囲うことがSEOの常識であり、慣習的に取り入れられておりました。
いわゆる全ページのヘッダーにつけるサイトタイトルという位置づけです。
一昔前は、それでも十分サイト構成として間違ってはいませんでした。
しかし、最近になって、
h1には、そのWebサイトにおいて、ページ別のユニークタイトルを入れるべきだ、
となっていきました。
（調査、研究結果、またGoogleの公式を読み解いた末、そうすべきだともわかってきています）
つまり、全ページで共通の内容を入れることは、SEOにおいてはバッドプラクティスとなるわけです。
なので、トップなど、
そのページ固有のタイトルが存在しなく、サイトタイトルを示す時は、h1、
そのページのタイトルが入る箇所があるならば、そこにh1を当て、
ロゴの部分にはpやdivを当てるのがベストである、と導かれます。
一応そのような構築にしたWebサイトにおいては、一定の効果が得られているとお見受けしますので、現段階ではそれが一番なのでは？と思われます。
以上、ご参考になれば幸いです。
投稿2020/09/09 08:21
編集2020/09/15 13:31
総合スコア9555
非常に参考になりました！
今回の私の例だと、ロゴはただのちっちゃいマーク的な要素が強いので
h1は、やはり大見出しのサイトタイトルにつけるのが良いと分かりました！
ありがとうございます！
> そのページ固有のタイトルが存在しなく
この条件を忘れないでください。
そのページ固有のタイトルが存在するなら、
h1はそこに当てるべきです。
上記の場合は、サイトタイトルもpを当てるべきです。
大事なのは、
・Webサイト全体で、全ページ共通のものにh1を当てるべきではない
・ページ固有のタイトルにh1を当てるべき
の二点です。
トップが、固有タイトルがないのであれば、逆に、サイトタイトルに対して、
h1を当てるべきでしょう。
ロゴ云々より、上記の二点の条件が大事になります。
はい！良く分かりました！！
ご丁寧に、ありがとうございます！！勉強になりました！
0
こんにちは。
私見を述べさせていただきます。
<p>タグをあてているのですが、間違っていますか？
間違っているとは言えないと思います。
まず、セマンティクスに関して、headerの子要素であるということで「ヘッダーの一部」という意味が付されているはずです。
そして、p要素には特段のセマンティクスがありませんから、ヘッダー内部で使用することについて、問題はありません。
他に特段の意味がないのであれば、p要素でいいと思います。
また、アクセシビリティについて、headerはbannerロールとみなされますし、おそらく特段の属性や状態も持たないでしょうから、子要素にロールを持たせる必要はないと思います。
SEOについて、そのロゴがターゲットキーワードであるならば見出しタグをつけるべきだと思いますが、質問からはそのような想定を読み取れなかったので、不明です。
以上から「間違っているとは言えない」と言えるかと思います。
画像のロゴの場合は
<div>タグ…？
普通にimg要素がいいのでは……？
SEOを気にしてdiv+backgroundで書いているのだと思いますが、alt属性で十分に補えるかと思いますよ。
もし、重要なキーワードであるならば、そもそも見出しタグで書くところでしょう。
あー、hgroup の存在を忘れてました。
<hgroup> - HTML: HyperText Markup Language | MDN
そうすると、こういうのがセマンティックになるのかなあ……？
html
1<header> 2 <hgroup> 3 <h1>大見出し</h1> 4 <h2>ロゴ</h2> 5 </hgroup> 6</header>
投稿2020/09/09 07:37
編集2020/09/09 08:40
総合スコア36960
あ、現役の人ではなかったのに答えてしまいました。すみません。
とんでもないです！！
ロゴにh1あてたくないなあくらいの気持ちで聞いた質問でしたが非常に勉強になりました！！！
<hgroup>というのも初めて知ることができました！ありがとうございます!!
0
<p>でくくるのも<div>でくくるのも間違いではないです。
ただ今回の場合、ロゴなどのデザインでの画像配置の場合は、<div>で問題ないと思います。
個人的には<div>での実装の方が多いです。使う意図や用途によって変えて問題はないと思います。
<p>でも<div>でも表示は可能です。
投稿2020/09/09 07:09
編集2020/09/09 07:11
総合スコア44
あなたの回答
tips
プレビュー
