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

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

ただいまの
回答率

89.63%

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

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 432

takane

score 53

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

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

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

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <div class="containers clearfix">
        <div id="content01"></div>
        <div id="content02"></div>
        <div id="content03"></div>
    </div>
    <div id="parent">
        <div class="list" name ="1">テキストテキストテキストテキストテキストテキストトテキストトテキストトテキストトテキスト</div>
        <div class="list" name ="2">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
        <div class="list" name ="3">テキストテキストテキストテキストテキストテキスト</div>
        <div class="list" name ="4">テキストテキストテキストテキスト</div>
        <div class="list" name ="5">テキストテキスト</div>
        <div class="list" name ="6">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
        <div class="list" name ="7">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
        <div class="list" name ="8">テキストテキストテキストテキスト</div>
    </div>

    <script src="js/masonry.js"></script>
</body>
</html>
@charset "utf-8";
/* CSS Document */

.containers{
    position: relative;
}
.containers div{
    margin-left: 20px;
}
#content01{
    position: absolute;
    left: 0;
}
#content02{
    position: absolute;
    left: 220px;
}
#content03{
    position: absolute;
    left: 440px;
}
#parent{
    height: 0;
    overflow: hidden;
}
ul{
    width: 660px;
    position: relative;
}
.list{
    background-color: #ddd;
    width: 200px;
    margin-bottom: 20px;
    list-style: none;
    padding: 15px;
    box-sizing: border-box;
    margin-left: 20px;
    margin-top: 20px;
    /*display: none;*/
    /*position: absolute;*/
}
.narabekae{
    display: block; 
    transition: 1.5s;
}

.clearfix::after{
  content: "";
  display: block;
  clear: both;
}

.none{
    display: none;
}
// JavaScript Document

(function(){
    var parent = document.getElementById("parent");
    var content01 = document.getElementById("content01");
    var content02 = document.getElementById("content02");
    var content03 = document.getElementById("content03");

    var p_chidren = parent.children;
    var list = document.getElementsByClassName("list");
    var minimumHeight = 0;
    var height01 =0;
    var height02 =0;
    var height03 =0;

    //console.log(p_chidren)
    for(var i = 0; i < list.length; i++ ){
        var thisList = list[i];

        if(i === 0){
            content01.style.heght = height01;
           content01.insertAdjacentElement('afterbegin', thisList);
            height01 += thisList.offsetHeight;
            //console.log(height01);
        }else if(i === 1){
            content02.insertAdjacentElement('afterbegin', thisList);
            height02 += thisList.offsetHeight;
        }else if(i === 2){
            content03.insertAdjacentElement('afterbegin', thisList);
            height03 += thisList.offsetHeight;
        }else{
            console.log(thisList)
            if(height01 < height02 && height01 < height03){
                content01.insertAdjacentElement('beforeend', thisList);
                height01 += thisList.offsetHeight;
               }else if(height02 < height01 && height02 < height03){
                content02.insertAdjacentElement('beforeend', thisList);
                height02 += thisList.offsetHeight;
               }else if(height03 < height01 && height03 < height02){
                content03.insertAdjacentElement('beforeend', thisList);
                height03 += thisList.offsetHeight;
                }else if(height01 === height02 || height01 === height03){
                content01.insertAdjacentElement('beforeend', thisList);
                height01 += thisList.offsetHeight;    
                }else if(height02 === height03){
                content02.insertAdjacentElement('beforeend', thisList);
                height02 += thisList.offsetHeight;
            }

        }



        //thisList.classList.add("none");


    }




    //var offsetParent = document.getElementsByClassName("li")[0].offsetParent ;



})();
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2018/12/27 14:16

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

    キャンセル

回答 4

checkベストアンサー

+7

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

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

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

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


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

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

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

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

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/12/27 15:03

    もしかして読み違いをさせていたらすみません。
    parent内のdivを非表示にしておいて、そこからjsでcontent01から03にピックアップしていく仕組みです。
    なので、非表示にしないと、ピックアップするもとのdivと同じ要素が出てきてしまうのです。

    ところで、Vue.jsやサーバーサイドレンダリング、ルータなどが最先端なのですね。
    私程度で使い道があるかわかりませんが、目を通しておきます。
    ありがとうございます。

    キャンセル

  • 2018/12/27 15:16

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

    キャンセル

  • 2018/12/27 15:57

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

    キャンセル

+4

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+3

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/12/27 14:40

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

    キャンセル

  • 2018/12/27 14:50

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

    キャンセル

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 89.63%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる