質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

4回答

1488閲覧

SEO的に良いコードにしたい

takane

総合スコア63

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2018/12/27 05:09

編集2018/12/27 05:19

こんにちは。javascriptでギミックを作っています。

下のコードを実行すると、divがサイズごとに並ぶのですが、一つ問題があります。
最初の段階で、parent(div)はoverflow: hidden;になっているのですが、
SEOの観点からすると、hiddenだとマイナス要因になるかもしれないと考えました。

jsでforループの最後にdisplay:noneをつけてみましたが、それをつけると
せっかく配置したdivまで消えてしまいました。

根本的な部分ですので直すのは難しいかと思いますが、どなたかいい知恵はありますか?

html

1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>無題ドキュメント</title> 6 <link rel="stylesheet" href="css/style.css"> 7</head> 8 9<body> 10 11 <div class="containers clearfix"> 12 <div id="content01"></div> 13 <div id="content02"></div> 14 <div id="content03"></div> 15 </div> 16 <div id="parent"> 17 <div class="list" name ="1">テキストテキストテキストテキストテキストテキストトテキストトテキストトテキストトテキスト</div> 18 <div class="list" name ="2">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div> 19 <div class="list" name ="3">テキストテキストテキストテキストテキストテキスト</div> 20 <div class="list" name ="4">テキストテキストテキストテキスト</div> 21 <div class="list" name ="5">テキストテキスト</div> 22 <div class="list" name ="6">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div> 23 <div class="list" name ="7">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div> 24 <div class="list" name ="8">テキストテキストテキストテキスト</div> 25 </div> 26 27 <script src="js/masonry.js"></script> 28</body> 29</html> 30

css

1@charset "utf-8"; 2/* CSS Document */ 3 4.containers{ 5 position: relative; 6} 7.containers div{ 8 margin-left: 20px; 9} 10#content01{ 11 position: absolute; 12 left: 0; 13} 14#content02{ 15 position: absolute; 16 left: 220px; 17} 18#content03{ 19 position: absolute; 20 left: 440px; 21} 22#parent{ 23 height: 0; 24 overflow: hidden; 25} 26ul{ 27 width: 660px; 28 position: relative; 29} 30.list{ 31 background-color: #ddd; 32 width: 200px; 33 margin-bottom: 20px; 34 list-style: none; 35 padding: 15px; 36 box-sizing: border-box; 37 margin-left: 20px; 38 margin-top: 20px; 39 /*display: none;*/ 40 /*position: absolute;*/ 41} 42.narabekae{ 43 display: block; 44 transition: 1.5s; 45} 46 47.clearfix::after{ 48 content: ""; 49 display: block; 50 clear: both; 51} 52 53.none{ 54 display: none; 55}

js

1// JavaScript Document 2 3(function(){ 4 var parent = document.getElementById("parent"); 5 var content01 = document.getElementById("content01"); 6 var content02 = document.getElementById("content02"); 7 var content03 = document.getElementById("content03"); 8 9 var p_chidren = parent.children; 10 var list = document.getElementsByClassName("list"); 11 var minimumHeight = 0; 12 var height01 =0; 13 var height02 =0; 14 var height03 =0; 15 16 //console.log(p_chidren) 17 for(var i = 0; i < list.length; i++ ){ 18 var thisList = list[i]; 19 20 if(i === 0){ 21 content01.style.heght = height01; 22 content01.insertAdjacentElement('afterbegin', thisList); 23 height01 += thisList.offsetHeight; 24 //console.log(height01); 25 }else if(i === 1){ 26 content02.insertAdjacentElement('afterbegin', thisList); 27 height02 += thisList.offsetHeight; 28 }else if(i === 2){ 29 content03.insertAdjacentElement('afterbegin', thisList); 30 height03 += thisList.offsetHeight; 31 }else{ 32 console.log(thisList) 33 if(height01 < height02 && height01 < height03){ 34 content01.insertAdjacentElement('beforeend', thisList); 35 height01 += thisList.offsetHeight; 36 }else if(height02 < height01 && height02 < height03){ 37 content02.insertAdjacentElement('beforeend', thisList); 38 height02 += thisList.offsetHeight; 39 }else if(height03 < height01 && height03 < height02){ 40 content03.insertAdjacentElement('beforeend', thisList); 41 height03 += thisList.offsetHeight; 42 }else if(height01 === height02 || height01 === height03){ 43 content01.insertAdjacentElement('beforeend', thisList); 44 height01 += thisList.offsetHeight; 45 }else if(height02 === height03){ 46 content02.insertAdjacentElement('beforeend', thisList); 47 height02 += thisList.offsetHeight; 48 } 49 50 } 51 52 53 54 //thisList.classList.add("none"); 55 56 57 } 58 59 60 61 62 //var offsetParent = document.getElementsByClassName("li")[0].offsetParent ; 63 64 65 66})();

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/12/27 05:16

タイトルと質問内容が合致していないように思います。 調整願います。
guest

回答4

0

ベストアンサー

根本として「そこに気付けたのは流石」です。
私はそこそこSEOを勉強しているので「まぁそうなるな」という印象ですが、こういう気付きって中々難しいものです。
しかし対策に関しては、「あのGoogleがそんな事も判別できないと思いますか?」という話になってしまい、
我々一般人ではどうしようもし難い部分があります。

この辺、軽くSEOの歴史に触れましょうか。
今は廃れましたが、昔は多く存在していたSEO業者は検索順位を上げる為に、
「どうにかして」本文と関係ないワードでHTML内に詰め込みまくってdisplay: hidden;position: absolute; top: -10000px;等を駆使してゴミデータを非表示にするテクニックを駆使していました。

Googleの検索エンジンは初期の頃はこういったテクニックが素通りで
ある程度知識のある人間ならば誰でも狙った検索ワードで上位に輝かせることが可能でしたが、
度重なるアップデートにより、現在SEO業者はほぼ業務を停止しています。

数少ない生き残っている業者は、ほぼ全てリスティング広告(GoogleやYahooの検索結果等に出てくる正規広告)の販売代理店として活動しています。
その際に「良いページを作って」検索順位を上げるためのSEOテクを顧客に多少披露する程度の事しかできません。


さて、この前提を元に本質問を考えてみましょう。

SEOの観点からすると、hiddenだとマイナス要因になるかもしれないと考えました。

結論から言えば「別にそんなに気にする必要はないんじゃないの?」って感じです。
根拠は下記。

現在の検索エンジンは非表示の項目は単に評価しないというロジックになったはずで、
でかいマイナス点が付けられてグーグル八分になる可能性はかなり低いと考えられます。

文章を書いてユーザに見せるという用途の話で考えると、
「もっと読む」リンクなりボタンをクリックさせて続きを読ませるという手法は、
前の文章がつまらないと誰も続きは読みたくないというリスクがあります。

つまり続きが読みたいと思わせるものでなくてはなりません。
なのでこのページは最も面白い文章が最初に載っているはずです。(当たり前だよなぁ?)

この前提ならば非表示になっている二章目以降が、
別に検索エンジンに評価されても、されなくても、あまり変わりませんよね?
「いやいや評価して欲しいよ!」というなら、「なんで非表示なんかにしたの?」と突っ込まれて当然。
最初から露出させたり、ページ指定で直接読めるようなWebサイト構成にするというアプローチの方が良いかと思います。

投稿2018/12/27 05:32

編集2018/12/27 05:33
miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takane

2018/12/27 05:36

た・・確かに。 ただ、やっぱり、最強のjsというものがあれば見たいと思いまして。
miyabi-sun

2018/12/27 05:47

なるほど、そういう観点で行くなら手はあります。 その場合、冒頭の文字だけ読めて二章目が非表示になっている現状は発展途上です。 何故って?5章目くらいまで読んでて、今日はここまでにしようとページを閉じて明日開いたらどうなっていますか? また最初の文章に戻ってしまいますのでユーザビリティ的にもあまり良い仕組みではありません。 なので、どの道ページ遷移という概念はどうしても必要です。 この辺の解説はちょっと面倒なので割愛しますが最終的には 「Vue.js等のJSフレームワーク」、「サーバーサイドレンダリング」、「ルータ」の3つの合わせ技で解決できます。 現在のフロントエンドエンジニアの最先端なのでちょっと要求される技術レベルは高いかなと思うのですが 覚えておけば来年・再来年の勉強で有利になるので追いかけていく意味でも学習し始めた方が良いかと思います。
m.ts10806

2018/12/27 05:58

「今の状態を保存しておきたい」ならLocalStorageも一応選択肢に入りますね。(初期で非表示になっていることにかわりはありませんが)
takane

2018/12/27 06:03

もしかして読み違いをさせていたらすみません。 parent内のdivを非表示にしておいて、そこからjsでcontent01から03にピックアップしていく仕組みです。 なので、非表示にしないと、ピックアップするもとのdivと同じ要素が出てきてしまうのです。 ところで、Vue.jsやサーバーサイドレンダリング、ルータなどが最先端なのですね。 私程度で使い道があるかわかりませんが、目を通しておきます。 ありがとうございます。
miyabi-sun

2018/12/27 06:16

んーと、content03までピックアップされた状態で ページを再読込するとどうなりますか?
takane

2018/12/27 06:57

最初からやり直しになります。 認識あっていますでしょうか?
guest

0

最近のJSも解釈するようなインテリジェントなSEOであれば
隠れているものはすべてコンテンツ外とみなすでしょうから
隠さず全部を見せるのが正しい考え方では?

そもそも昨今のSEO恐怖症の風潮はどうかと思いますけどね。

投稿2018/12/27 05:34

yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

おそらくこちらの記事を読まれたことがあるのかなと思いましたが、それでしたら答えは1つ。

display:noneを利用しなくて良い作りにする。

コードを全て読んだわけではないですが、「そもそもなぜメインコンテンツ部分である#parentを非表示にしなければならないか」「本当に非表示でないと実現できないのか」という観点で考えていく必要があると思います。

以前、メーソンリーレイアウトを自作しようとされていた方かと思いますが、
どうしても自作ではこう作るしかなかった、考えたけどこれ以上案が出てこない
というのであれば、プラグイン使うのも1つの回避策です。
SEOを気にされるのであれば尚更ですね。

SEOも「どこまで対応するか」というところが一つの論点となってくるところはあります。
どこまでも対応していっても思うとおりにならないこともあります。
SEOに重点を置くのでしたら非表示自体全くせずに、コンテンツの中身だけで勝負するのを考えられた方がいいですし、
「いや自分が作ったものでいきたいんだ」というのであれば当該箇所以外でSEO対策をそれなりに施せば良い話であるとも言えます。

投稿2018/12/27 05:35

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takane

2018/12/27 05:40

なるほど・・・ちょっと意見が割れますね。 どうも、最初の最初、考え方がよくないようですね。 SEO的に微弱なインパクトしかないのであれば無視するのも一つの考え方だ、という方が多いようですね。
m.ts10806

2018/12/27 05:50

そこは回答に書いたようにどこに重きを置くか です。 実際は実装するにあたりhiddenを利用しなきゃいけないわけでもないはずなので、 気になるならhiddenを使わない作りを模索するのもあり、というだけですね。 現在付いている回答の共通の意見としては「そんなこと気にする前にコンテンツの中身で勝負しろ」ということですが。
guest

0

「overflow: hidden;」を設定したからSEO的にダメって事はありません。

その部分にキーワード関連のテキストを入れなければ良いだけです。

投稿2018/12/27 09:49

yoshinavi

総合スコア3521

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問