display:none;を使うと、SEOそのコンテンツはないことになるようですが、どうすれば評価してもらえるように出来るのでしょうか？

Question

display:none;を使うと、SEOそのコンテンツはないことになるようですが、どうすれば評価してもらえるように出来るのでしょうか？

ゲームの答えを見えないようにして、ボタンを押すと見えるようにしているのですが、できればSEO上回答も評価してほしいです。

Comments

[yoshinavi]

SEOのタグも付けてください。

Answer 1

alt 属性なら検索対象になるはずです。

<p>
	<img src="images/Q.png" alt="富士山">
	日本一高い山は？
</p>

Comments

[退会済みユーザー]

解答を、文字や数値ではなくあえて画像にするという事ですか？

ただこの画像がすぐに回答がわかる画像だと結局同じですよね？

[Zuishin]

ボタンとかアイコンとかのような、すべての問題で共通して使うような画像にすればいいのではないですか？

[退会済みユーザー]

解答が記載してある画像のailタグに入れるのではなく。

解答は書いていないボタンの画像のaltタグに入れるという事ですね。

そしてこれをクリックすると回答が出てくるので、クローキングにならないという事ですか？

クローキングになる可能性もあるかなと心配ですが、ないというお考えなのですね。

[Zuishin]

ならないと思いますが、そこまで心配なら非表示のテキストを検索させるというグレーなこと自体やめたらいいいと思います。

[退会済みユーザー]

グレーなことなんかやってません。勝手に失礼なこと言うから通報済み。回答は始めはないなんて何処もやっている。

[Zuishin]

それをやめたらクローキングにはなりません。
これで解決するんだから抜け道を探すのはグレーです。

[Zuishin]

まあだいたい WebPage さんでしたっけ？
あなたと絡むとこういう結末が見えるので、名前を変えないでくれませんか？
迷惑です。

Answer 2

そもそもSEO以前の問題で、「答えをhtml上に載せておく」こと自体、ゲームとして成り立たないように思います。
回答をして初めて実際の答えと照合されて正誤のみ分かるものではないですかね。
その答えも誰でも見れるようなところに置いておくのではなくDBとの照合とかユーザーが関与できない場所でやるべきかと。
どのようなものでどのような概念で作られているものか分からないので、今回の質問内容のみの印象ですけど。

Answer 3

検索エンジンスパム

• 隠しテキストと隠しリンク - Search Console ヘルプ

見えないコンテンツをHTML上に置くことは、手段を問わず、検索エンジンスパムとなります。
スパム判定を回避しつつ、動的に答えを出力するには、答えが必要になった時に、DOMノードを生成して挿入する事になります。

• Document.createElement - Web API インターフェイス | MDN
• document.createTextNode - Web API インターフェイス | MDN
• element.insertAdjacentHTML - Web API インターフェイス | MDN

回答を評価

できればSEO上回答も評価してほしいです。

「回答も評価」の意味が判然としないので、詳細説明が欲しいところです。
ゲーム制作側からすると、「回答が検索エンジンにインデックスされる」のは検索エンジンを使う事でカンニングが出来てしまうので、本来避けたい事象のはずです。
そこまで秘密主義ではなく、カンニング出来る事は許容して、検索エンジンにインデックスさせたい、ということでしょうか。

SEO対策の基本的な考え方は究極的には、下記になると私は考えます。

• 制作者CSSを無効化しても閲覧できる
• クライアントサイドJavaScriptを無効化しても閲覧できる

上述で「見えないコンテンツをHTML上に置くことは、手段を問わず、検索エンジンスパム」と書きましたが、厳密には「Lynx等の「CSSを解釈できないブラウザ」で閲覧した時の表示に支障がでる場合」に限定されています。
ですので、次のように組むのは有りです。

1. Lynxで閲覧可能なHTMLを出力する(ゲーム上の質問/答えは「見えるコンテンツ」として表示しておく)
2. JavaScriptで出力HTMLをDOM上で書き換えて、質問/答えを変数に格納しておき、DOM上から削除しておき、ゲームを起動する

あるいは、昔からあるゲームブック(サウンドノベル)のように選択肢をリンクにする静的HTMLだけで構築するのも有りでしょう(そして、JavaScript有効環境ではFetch APIで動的に答えを得るように書き換えるのも勿論、有りです)。

---

残念ながら、隠しテキストが表示されてしまった場合が考慮されておらず、Lynxでブラウジングされた場合の表示が意味不明なコンテンツが出力されるサイトは、数多く存在しています。
理由は制作コストが跳ね上がるからでしょう。

• 画像表示/CSS/JavaScriptが有効なGoogle Chrome, Firefox, IE11, MS Edge, Safari...etcで動作確認
• 画像表示/CSS/JavaScriptが無効なLynxで動作確認

Lynxだけ異端で表示される内容が全く違います。
しかし、スクリーン リーダー利用者からすると、JavaScriptで動的生成されたコンテンツの閲覧が容易ではない事は想像に難くありません。
クリックしないと見えないコンテンツがあったとして、クリックする対象が画像でalt属性がなかったり、記号でスクリーンリーダーに読み上げさせると意味不明だったりすれば、何をどう押したらいいのかをユーザは判断できないでしょう。
文章だけで意味が読み取れるようにする配慮が必要になります。

Re: qqqqqqqqqqqq さん

Answer 4

SEOの対策として、「答え」の部分も含める場合は「display:none;」を使わなければ良いです。

しかし、一般的な考えとして、検索対象に「答え」は含めず、「質問」のみでSEO対策する方が、一覧に並んだ中でも表示タイトルで選択されやすいと、個人的には思います。

Comments

[退会済みユーザー]

visivilityならOKという事ですか？

それともそのまま表記しておくべきという事でしょうか？

[yoshinavi]

コンテンツの構成により一概には言えませんが、SEO対策としてみれば「visibility:hidden;」でもダメです。
どうしても「質問」と「答え」を検索エンジンに認識させたいのであれば、「そのまま表記しておくべき」だと思います。
例えば、「質問」のあとに、ファーストビューに入らない程度のスクロール後に「答え」を表示、等です。

Answer 5

基本的には表示上見えないものは評価されません。
cssなどスタイルを使用するとthink49さんのコメントにもある通りスパム扱いになります。
やるとするならば回答ページを別に設けてリンクを表示させるなどでしょうか。。
もしくはajaxで回答を表示させるかになると思います(実装方法に注意)。

あとはjson-ldを使用して回答を埋め込む方法がありますが、
これも使い方を誤るとスパムになる可能性があるかもしれません。
json-ld
Google推奨「JSON-LD」で構造化マークアップ
schema.org項目一覧

Comments

[退会済みユーザー]

ご回答ありがとうございます。

＞＞＞
もしくはajaxで回答を表示させるかになると思います(実装方法に注意)。

ajaxを使ってクリック時に回答を作成するとクローラーは認識できて評価してくれるという事でしょうか？

実装方法を間違えると認識しない可能性もあるのですね。

これはinnerHTMLなどでDOM生成するのと何が違うのでしょうか？

[退会済みユーザー]

https://teratail.com/questions/151819#reply-230294
こちらの質問にも通ずるところがある気がするのですが。
もしかしてajaxを使ってアプリの説明など重複コンテンツになる部分をDOM生成するように作ると、クローキングにならずに、重複コンテンツになる部分はクローラーに見せないように出来るのでしょうか？

Answer 6

google に関しては、普通にアクセスして見えない項目は検索にも表示されない仕様のようですので、検索でヒットさせたい項目は、普通にアクセスした際に常時見えるようにするしか方法はなさそうです。

Comments

[退会済みユーザー]

検索にひっかけたい場合は、visivilityに使用が何しようが見えない限り無理なのですね。

SEO上の評価に関しても全く同じでしょうか？

[KojiDoi]

背景色と文字色を同じにしておけばよろしいのでは。

[think49]

文字色/背景色が同色はスパムですね。
https://support.google.com/webmasters/answer/66353

[退会済みユーザー]

おっしゃる通りスパムです。

[KojiDoi]

なるほど。＞スパム