投稿日：2019-05-30T03:30:52+09:00

【SEO関連】独自データ属性(カスタムデータ属性)を使って、CSS擬似要素のcontentをhtmlからattr()で取得してみても、おそらく検索エンジンには認識されない。

はじめに

本日ふと思ったのだが、CSS擬似要素のcontentでも、HTMLに記述していれば、SEO的にオッケーなんじゃね？と思ったので、独自データ属性(カスタムデータ属性)を使って、CSS擬似要素のcontentをhtmlからattr()で取得してみ他場合に、タグのスタイリングを継承するのか(継承という言葉で良いのかは置いておいて、、)また、検索エンジンには認識されるのか、実験してみた。正しい実験になっているかどうかは不明笑

実験方法

色々調べていると、擬似要素はブラウザ上でドラッグした場合に、選択範囲に入らないことが分かった。つまり、擬似要素とわかる=検索エンジンに認識されないと判断できる。ということであると考えられる。ということで今回の実験はこう。

もし、h1タグに対して独自データ属性を使ってcontentを取得した場合に、
1. h1タグで通常囲んだ文字列と同じスタイリングであれば、h1を継承されていると判断
2. ブラウザ上でドラッグした場合に選択範囲に入らなければ検索エンジンに認識されないと判断

ということで実験してみた。

実験結果

結果は、
1. 同じスタイリングだったので、h1のスタイリングは継承されたと判断
2. 選択範囲に入らなかったので、検索エンジンに認識されないと判断

つまり、

見かけ上、検索エンジンに認識されているように見えるものの、おそらく検索エンジンには認識されない。

やはり、cssでcontentsを指定するときと同じく、大事なテキストなどは、擬似要素で表示させるべきではないと言えると思われる。

実験結果詳細

下記画像の通りである。

index.html

<body>
    <div class="box">
        <div class="img"><img src="./img/emiko.jpg" alt="上沼恵美子" width="159" height="212"></div>
        <h1 class="geininn" data-subtitle="~えみちゃんねるでお馴染み~">上沼恵美子</h1>
    </div>
</body>

index.css

.geininn::after{
    display: block;
    content: attr(data-subtitle)"";
}

20190530の新人プログラマ応援に関する記事は1件です。

【SEO関連】独自データ属性(カスタムデータ属性)を使って、CSS擬似要素のcontentをhtmlからattr()で取得してみても、おそらく検索エンジンには認識されない。

はじめに

実験方法

実験結果

実験結果詳細

参考

関連バックナンバー

【全く関係ない宣伝】

日付別

タグ一覧