MENTAやTimeTicketでZoomオンライン指導・メンタリングを行っています。
WordPressやHTMLサイトのトラブル、SEO対策のご相談、HTML・CSS・WordPressなどのレクチャーなどが可能です。


【初めてのご質問 様】Hタグの表記について。見出しタグを開発者ツールで確認すると、キーワード以外の文字列がある

Hタグの設定がしっかりできているか?というご相談を頂きました。

見出しタグを開発者ツールで確認すると、キーワード以外の文字列がある

初めまして、WP初心者です。
新しくブログを始めたのですが、

SEO対策KWがHタグにしっかりと設定できているかを確認するために、
f12を叩き、hタグを見ると、

<h2>...<h2>

という表記になってしまっていました。

この[…]部分をダブルクリックすると、折りたたまれていた部分がが開け、

<h2> ==$0
::before
“***h2に設定したい見出しワード***”
</h2>

という表記に変更にされます。

いわゆるキュレーションメディアなどを見ると、このような表記にはなっておらず、

<h2> ***h2に設定したい見出しワード***</h2>

という非常にシンプルな表記になっているので、不安を覚えております。

「***h2に設定したい見出しワード***」部分が現在の設定でもh2に設定できているのかが不安です。

▼ご質問1
このような状態でもh2に問題なく設定できているのか?
▼ご質問2
h2に設定できている場合も、このような表記になることで、SEO的に悪影響はないのか?
▼ご質問3
こちらではHタグの設定が意図通りにできていない場合はどのような対応をすればよろしいでしょうか?オススメのプラグインなど教えていただけると助かります。。

こちらの3点を教えていただけますでしょうか?

開発者ツールの表記について

>初めてのご質問 さま
ご相談ありがとうございます。

実際にどのようなコードになっているかを確認するのは大切ですね。開発者ツールは今後カスタマイズなどをする際も役立つでしょう。

さて、今回確認頂いている文字列などは、開発者ツール独自のものと思っていただいて構いません。

当サイトでもこのようになっています。
開発者ツール

当サイトでは目次生成プラグインを利用しているため、h2タグの中にspanタグが生成され、クラスやIDが自動で設定されています。

::before
という表記については、CSSが関連しています。おそらく、見出しの前にアイコンを表示させるデザインのテーマを使っているのではないでしょうか。
そのような場合、CSSのcontentが設定され、フォントや余白が設定されていることがあります。
contentの指定内容

contentというのは、タグで囲まれたテキストの前後に、任意の文字などを追加できるものです。
「CSS content」などで検索すると、どういったことが行われているのかが学べます。
おすすめのリファレンスサイトはこちら
http://www.htmq.com/style/content.shtml

CSSでこういった指定があると、開発者ツールではそれを視覚化するために::before や ::after が表示されます。

質問内容、3は問題ありませんので、1-2に応えさせていただきます。

>▼ご質問1 このような状態でもh2に問題なく設定できているのか?
問題なく設定できています。あくまでh2タグの中のテキストのみを評価するでしょう。

>▼ご質問2 h2に設定できている場合も、このような表記になることで、SEO的に悪影響はないのか?
実際に検索エンジンはこの::before や ==$0を読み込んでいるわけではありません。なので、SEO的な悪影響は無いと思って良いでしょう。

もし、実際のHTMLコードだけを確認したい場合は、開発者ツールではなく、Chromeなら「ページのソースを表示(Ctrl+U)」を行えばコードのみを表示できます。
表示後に、Ctrl+F などでh2タグを検索してみましょう。当該部分の実際のHTMLを確認できるはずです。

参考にして頂ければ幸いです。

おすすめコンテンツ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA