質問: display:none;を使うと、SEOそのコンテンツはないことになるようですが、どうすれば評価してもらえるように出来るのでしょうか? ゲームの答えを見えないようにして、ボタンを押すと見えるようにしているのですが、できればSEO上回答も評価してほしいです。
回答: ### 検索エンジンスパム * 隠しテキストと隠しリンク - 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 さん