Q&A
気になるならやめた方がいいと思いますが、SEO対策が重要だとは思えませんが・・・
実現したいこと
Q＆A掲示板の質問画面と回答画面を非同期通信で作成したい。
発生している問題・分からないこと
質問画面と回答画面をJavascriptで作成する際に共通の処理をまとめて書いているのですが、HTMLクラスを付ける際に同じで良いのか悩んでおります…
重複コンテンツとして認識された場合コンテンツの順位を下げられてしまうのでしょうか？
該当のソースコード
javascipt
1<!-- 回答画面 --> 2<script> 3 fetch("<?php echo home_url('wp-admin/admin-ajax.php'); ?>", opt) 4 .then(response => { 5 6 submit_button.disabled = false; 7 8 submit_button.classList.remove('wait'); 9 return response.json(); 10 }) 11 .then(json => { 12 if (json.error != "") { 13 alert(json.error); 14 return; 15 } 16 name_value = json.name; 17 text_value = json.text; 18 19 confirm_area.textContent = ''; 20 var div; 21 var child; 22 /* アイコン画像要素作成 */ 23 const comment_area = document.createElement("div"); 24 const divUserArea = document.createElement("div"); 25 const divUserIcon = document.createElement("div"); 26 divUserArea.classList.add("user-area"); 27 divUserIcon.classList.add("user-icon"); 28 child = document.createElement("p"); 29 // child = document.createElement("p"); 30 // divUserIcon.appendChild(child); 31 divUserIcon.appendChild(child); 32 divUserArea.appendChild(divUserIcon); 33 comment_area.appendChild(divUserArea); 34 35 /* 名前要素作成 */ 36 const usericonImg = document.createElement("img"); 37 const divNamePartialParts = create_name_parts("answer-name-area", name_value, usericonImg); 38 comment_area.appendChild(divNamePartialParts); 39 40 /* コメント要素作成 */ 41 const divBodyPartialParts = create_text_parts("answer-text-area", text_value); 42 comment_area.appendChild(divBodyPartialParts); 43 44 /* ファイルアップロード要素作成 */ 45 const divImagePartial = create_image_parts("uploadfile-area", 0, usericonImg); 46 const image_area = document.createElement("div"); 47 image_area.appendChild(divImagePartial); 48 49 /* アップロードファイルサイズ制限事項要素作成 */ 50 const divFilesizeRestrictionArea = document.createElement("div"); 51 comment_area.appendChild(divFilesizeRestrictionArea); 52 53 /* 確認画面送信ボタン要素作成 */ 54 const divPostButton = create_button_parts(2); 55 comment_area.appendChild(divPostButton); 56 confirm_area.appendChild(comment_area); 57 const image_count = image_area.getElementsByClassName("changeImg").length; 58 if (image_count == 1) { 59 divUserArea.style.float = "left"; 60 } else if (image_count == 2) { 61 divUserArea.style.float = "left"; 62 divBodyPartialParts.style.height = "728px"; 63 } else if (image_count == 3) { 64 Array.from(divUserArea.children).forEach(x => x.style.float = "left"); 65 } 66 input_area.style.display = "none"; 67 confirm_area.style.display = "block"; 68 }) 69 .catch(error => { 70 console.log(error); 71 }); 72 } 73 const confirm_button_click = function() { 74 const formData = new FormData(); 75 formData.append("action", "bbs_quest_confirm"); 76 const opt = { 77 method: "post", 78 body: formData 79 } 80 fetch("<?php echo home_url('wp-admin/admin-ajax.php'); ?>", opt) 81 .then(response => { 82 return response.json(); 83 }) 84 .then(json => { 85 if (json.error != "") { 86 alert(json.error); 87 return; 88 } 89 // change3(); 90 const buttons = document.querySelectorAll('.post-button'); 91 buttons.forEach(x => x.style.display = "none"); 92 }) 93 .catch(error => { 94 console.log(error); 95 }); 96 } 97</script>
Javascript
1<!-- 質問画面 --> 2<script> 3 fetch("<?php echo home_url('wp-admin/admin-ajax.php'); ?>", opt) 4 .then(response => { 5 6 submit_button.disabled = false; 7 8 submit_button.classList.remove('wait'); 9 return response.json(); 10 }) 11 .then(json => { 12 if (json.error != "") { 13 alert(json.error); 14 return; 15 } 16 name_value = json.name; 17 text_value = json.text; 18 title_value = json.title; 19 const stamps = document.getElementsByName('stamp'); 20 for (var stamp of stamps) { 21 if (stamp.checked) { 22 stamp_value = stamp.value; 23 break; 24 } 25 } 26 change2(); 27 28 confirm_area.textContent = ''; 29 var div; 30 var child; 31 /* ファイルアップロード要素作成 */ 32 const usericonImg = document.createElement("img"); 33 const divImagePartial = create_image_parts("image-partial", 3, usericonImg); 34 const image_area = document.createElement("div"); 35 image_area.appendChild(divImagePartial); 36 37 /* コメント要素作成 */ 38 const comment_area = document.createElement("div"); 39 const divBodyPartialParts = create_text_parts("text-partial-parts", text_value); 40 comment_area.appendChild(divBodyPartialParts); 41 42 /* タイトル要素作成 */ 43 const divTitlePartialParts = create_title_parts("title-partial-parts", title_value); 44 comment_area.appendChild(divTitlePartialParts); 45 46 /* スタンプ画像要素作成 */ 47 const divStampPartial = document.createElement("div"); 48 divStampPartial.classList.add("stamp-partial"); 49 50 child = document.createElement("input"); 51 child.type = "radio"; 52 child.name = "stamp"; 53 child.id = "confirm_stamp"; 54 child.value = stamp_value; 55 child.checked = true; 56 divStampPartial.appendChild(child); 57 child = document.createElement("label"); 58 child.htmlFor = "confirm_stamp"; 59 divStampPartial.appendChild(child); 60 comment_area.appendChild(divStampPartial); 61 62 /* 名前要素作成 */ 63 const divNamePartialParts = create_name_parts("name-partial-parts", name_value, usericonImg); 64 comment_area.appendChild(divNamePartialParts); 65 66 /* 確認画面送信ボタン要素作成 */ 67 const divPostButton = create_button_parts(1); 68 comment_area.appendChild(divPostButton); 69 confirm_area.appendChild(image_area); 70 confirm_area.appendChild(comment_area); 71 const image_count = image_area.getElementsByClassName("changeImg").length; 72 if (image_count == 1) { 73 divImagePartial.style.float = "left"; 74 } else if (image_count == 2) { 75 divImagePartial.style.float = "left"; 76 divBodyPartialParts.style.height = "728px"; 77 } else if (image_count == 3) { 78 Array.from(divImagePartial.children).forEach(x => x.style.float = "left"); 79 } 80 input_area.style.display = "none"; 81 confirm_area.style.display = "block"; 82 }) 83 .catch(error => { 84 console.log(error); 85 }); 86 } 87 88 const confirm_button_click = function() { 89 const formData = new FormData(); 90 formData.append("action", "bbs_quest_confirm"); 91 const opt = { 92 method: "post", 93 body: formData 94 } 95 fetch("<?php echo home_url('wp-admin/admin-ajax.php'); ?>", opt) 96 .then(response => { 97 return response.json(); 98 }) 99 .then(json => { 100 if (json.error != "") { 101 alert(json.error); 102 return; 103 } 104 change3(); 105 const buttons = document.querySelectorAll('.post-button'); 106 buttons.forEach(x => x.style.display = "none"); 107 }) 108 .catch(error => { 109 console.log(error); 110 }); 111 } 112</script>
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
参考サイトを見たところJavaScript を使用してコンテンツを動的に追加する場合レンダリングという方法で対策するのではないかと考えております。
補足
※参考サイト
https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics?hl=ja
> 参考サイトを見たところJavaScript を使用してコンテンツを動的に追加する場合レンダリングという方法で対策するのではないかと考えております。
それは レンダリング という方法 というよりも javascript で処理した結果（＝レンダリングフェーズ）も 対象にしているくらいのニュアンスでいいと思われます。
yambejpさん回答ありがとうございます。
何故さほど重要でないか教えて頂けると助かります。
junerさん回答ありがとうございます。
SEO対策としてはレンダリングが最適というわけではないという事でしょうか？
>何故さほど重要でないか教えて頂けると助かります。
いまや検索エンジンでサーチすると嘘だらけのAI回答ばかりヒットしますよね
検索エンジン自体がSEOを重要視していない以上ユーザーへのリーチにはつながりません。
どうしてもページビューを稼ぎたいなら目新しく有益なコンテンツを充実させて、広告をうってインプレッションを増やすことです
yambejpさん回答ありがとうございます。
検索エンジンでサーチするとウイルスサイトが多くヒットするのは気になっていたのですが、AIの回答もヒットするんですね…
広告と有益なコンテンツということで覚えておきます。
あなたの回答
tips
プレビュー
