質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

10251閲覧

ヘッダーロゴはどのタグで囲えばよいのか?<h1>?<p>?<div>?

nomura02

総合スコア133

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

7グッド

11クリップ

投稿2020/09/09 02:47

編集2020/09/09 10:20

初心者です。
超基本的な部分の質問ですが、いつも悩む部分なのでアドバイス頂けると幸いです。


ヘッダー-----------------

ロゴ←

大見出し(サイトの名前など)

ヘッダー-----------------

こういった場合のロゴに、なんのタグを当てればよいのか、いつも迷います。

ヘッダーのロゴはh1でも構わないという記述をいくつかのサイトで参考にさせていただきました。
参考サイト
参考サイト


しかし、感覚的に、大見出しをh1にしたいので、
なんとなく、存在感があまり強くないヘッダーロゴにh1を使うのは気が引けます。

とすると、
テキストの場合は、<h2>を頭から使うわけにもいかないだろうし、

<p>タグだろうかと 思ってしまい今は<p>タグをあてているのですが、間違っていますか?

画像のロゴの場合は

<div>タグ…?

実際の現役の方はどうしていらっしゃるのかなと思い、質問させて頂きました。

どうぞ宜しくお願いします。

[追記]
当方、ローカル環境で、課題をこなしている勉強中の者です。
この質問に、SEO的な観点や、どういった効果をもたらすのかなど、細かい指定の無い質問でした。
いつもなんとなく<p>タグで囲っていたので、調べたところ、
意見が様々あり、また参考にした記事の更新日も気になったので、
現役の方や、詳しい方の今のご意見をお聞きしたく質問した次第でした。

kokemomo.sour, miyabi_pudding, GenbuHase, omochi_123, jmt, Mackie👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/09/09 03:48

>実際の現役の方は たぶん、本気でで実務に関する情報欲しかったら実務に入るしかないと思いますよ。でなきゃ、それなりの対価を支払うか。 どのレベルでのアドバイスを求めているのか分かりませんが、場合によりQAでおさまる範囲ではないです。 現状だとふんわりした感じのものになります。
miyabi_takatsuk

2020/09/09 08:05

どの観点でしょうか? SEO的な話でしょうか?
nomura02

2020/09/09 09:44

すみません!!!それ程根深い問題と思わず、ちょっと気軽に聞いてしまいました!! 私の今の現状で言うと、課題をこなしているだけの駆け出しなので… 下記のご回答を参考にさせていただきたいと思います!!
m.ts10806

2020/09/09 09:48 編集

誤解の与えないよう、質問を編集してください。
m.ts10806

2020/09/09 09:49

それに課題でしたら本来は出題者に聞くべきで。
nomura02

2020/09/09 10:21

すみません!!気になって仕方なくて、出題者とのコミュニケーションの日が待てずに聞いてしまいました!気をつけます!
guest

回答3

0

ベストアンサー

これ、実はすごく、人によって実装揺れがあり、また、時代にもよるのでなんとも言えないのですが、
SEOの観点から、私が様々調査し、試した上での現代においての結論で、回答をいたします。

端的に申し上げますと、Webページの内容にもよりますが、
トップとセカンドページで使う要素を変えることが、トレンドであり、SEOに有効である、ということです。
トップページでは、h1
セカンドページでは、pdivを使う、ということです。

それは、h1の仕様や意味に起因します。
一昔前は、ロゴマークは、h1で囲うことがSEOの常識であり、慣習的に取り入れられておりました。
いわゆる全ページのヘッダーにつけるサイトタイトルという位置づけです。
一昔前は、それでも十分サイト構成として間違ってはいませんでした。
しかし、最近になって、
h1には、そのWebサイトにおいて、ページ別のユニークタイトルを入れるべきだ、
となっていきました。
(調査、研究結果、またGoogleの公式を読み解いた末、そうすべきだともわかってきています)
つまり、全ページで共通の内容を入れることは、SEOにおいてはバッドプラクティスとなるわけです。

なので、トップなど、
そのページ固有のタイトルが存在しなく、サイトタイトルを示す時は、h1
そのページのタイトルが入る箇所があるならば、そこにh1を当て、
ロゴの部分にはpdivを当てるのがベストである、と導かれます。

一応そのような構築にしたWebサイトにおいては、一定の効果が得られているとお見受けしますので、現段階ではそれが一番なのでは?と思われます。

以上、ご参考になれば幸いです。

投稿2020/09/09 08:21

編集2020/09/15 13:31
miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nomura02

2020/09/09 10:15

非常に参考になりました! 今回の私の例だと、ロゴはただのちっちゃいマーク的な要素が強いので h1は、やはり大見出しのサイトタイトルにつけるのが良いと分かりました! ありがとうございます!
miyabi_takatsuk

2020/09/09 15:25

> そのページ固有のタイトルが存在しなく この条件を忘れないでください。 そのページ固有のタイトルが存在するなら、 h1はそこに当てるべきです。 上記の場合は、サイトタイトルもpを当てるべきです。 大事なのは、 ・Webサイト全体で、全ページ共通のものにh1を当てるべきではない ・ページ固有のタイトルにh1を当てるべき の二点です。 トップが、固有タイトルがないのであれば、逆に、サイトタイトルに対して、 h1を当てるべきでしょう。 ロゴ云々より、上記の二点の条件が大事になります。
nomura02

2020/09/11 08:01

はい!良く分かりました!! ご丁寧に、ありがとうございます!!勉強になりました!
guest

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
Lhankor_Mhy

総合スコア35860

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2020/09/09 07:37

あ、現役の人ではなかったのに答えてしまいました。すみません。
nomura02

2020/09/09 10:04

とんでもないです!! ロゴにh1あてたくないなあくらいの気持ちで聞いた質問でしたが非常に勉強になりました!!! <hgroup>というのも初めて知ることができました!ありがとうございます!!
guest

0

<p>でくくるのも<div>でくくるのも間違いではないです。 ただ今回の場合、ロゴなどのデザインでの画像配置の場合は、<div>で問題ないと思います。 個人的には<div>での実装の方が多いです。使う意図や用途によって変えて問題はないと思います。 <p>でも<div>でも表示は可能です。

投稿2020/09/09 07:09

編集2020/09/09 07:11
tr_09

総合スコア44

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nomura02

2020/09/09 09:47

なるほど、ありがとうございます! h1じゃなくていいということが分かっただけでも進歩です!ありがとうございます!
tr_09

2020/09/09 11:13

あまりお力になれずすみません… わたしもまだまだ勉強中なので頑張りましょう!
nomura02

2020/09/11 08:00

とんでも無いです!!! 本当にありがとうございます!一緒に頑張りましょう!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問