web-dev-qa-db-ja.com

レスポンシブデザイン、Javascriptを介したコードの挿入：悪い習慣ですか？

以下のコードはSEOとGoogleに関して問題がありますか？

これは、CSSメディアクエリとJavaScriptを使用して、モバイルフレンドリーではないWebサイトをモバイルフレンドリーに変更する方法の小さなサンプルです。

このタイプのコードを選択したいのは、もちろんHTMLとコードの両方のメンテナンスに関して重複したコンテンツを避けるためです。 Webサイトのモバイルバージョンのコードは、デスクトップバージョンから「抽出」され、プレースホルダーに挿入されます。

これにより、デスクトップバージョンを変更せずに保持し、モバイルバージョンのプレースホルダーをいくつか追加して、以下の方法でそれらを設定できます。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<style>
@media (max-width: 360px)
{
    #ul-desktop
    {
        display: none;
    }
}
</style>

<html>
    <ul id="ul-desktop">
        <li>Bullet #1</li>
        <li>Bullet #2</li>
        <li>Bullet #3</li>
        <li>Bullet #4</li>
    </ul>

    <ul id="ul-mobile"></ul>

    <script type="text/javascript">
        if($(window).width()<=360)
        {
            $("#ul-desktop li").each
            (
                function (index)
                {
                    $("#ul-mobile").append("<li>" + $(this).html() + "</li>");
                }
            );
        }
    </script>
</html>


Edit

もちろん、デスクトップ用とモバイル用の2つの異なるバージョンのページを作成することも決定できます。モバイルユーザーはデスクトップで使用される大きなCSS/JSファイルをダウンロードする必要がなく、私のページのはるかに軽いバージョン。

しかし、サーバー側にユーザ​​ーエージェントリダイレクトを実装できないなど、サーバーの制限があります。だから私はいくつかの助けが必要です：

  1. SEOに関して、mobile.mydomain.comとmydomain.com/mobileとの違いはありますか？サーバーの制限により、後者しか選択できないのではないかと心配しています。

  2. 私の場合、window.locationリダイレクトは機能しますか？ matchMedia（）JavaScript関数の使用、すべてのコンテンツの非表示、「Loading mobile version」で小さなインジケーターの表示、リダイレクトの実行を考えていました。しかし、リダイレクトが完了すると、このソリューションはデスクトップとモバイルの2つのバージョンのページをダウンロードしませんか？

seogoogleduplicate-content
4
WPRookie82

サイトをモバイルフレンドリーにするというアイデアは優れていますが、特にこれらの理由でウェブサイトをAdSenseで収益化することにした場合は、あなたの方法は最適とは思いません。

  1. 画面の解像度が特定の値を下回った場合にテキストが非表示になるように、サイトをスクリプト化しています。この手法を使用すると、Googleはゲームをプレイしているとみなし、結果としてサイトのインデックスが低くなる可能性があります。

  2. クライアントはページのロードを完了するために非表示のテキストを含むすべてをダウンロードする必要があるため、ページの処理に必要なバイト数には不要なバイトが多く含まれます。隠されたテキストが巨大になると、モバイルユーザーは計画に応じて大きな代金を支払う必要があります。

状況を解決するには2つの方法があります。

  1. デスクトップユーザー用に別のページを作成し、モバイルユーザー用に別のページを作成し、Webブラウザー検出技術を使用してユーザーを適切なページに送信します。 （このためのスクリプトがネット上にあります）。

または。 2.メソッドに従いますが、ユーザーが読み取り可能なテキストではなくオブジェクトプロパティのみを変更します。たとえば、モバイルユーザーとデスクトップユーザーの両方に同じテキストを表示し、デスクトップと比較してモバイルのソースが異なるように画像を設定します。必要に応じて、画像のサイズでも同じことができます。

6
Mike

たぶんそれはあなたの単純な例かもしれませんが、あなたの例はCSSとメディアクエリのみを使用するように書き直すことができます。ここではJavaScriptは不要で、ソースを変更する必要もありません。

メディアクエリを使用してデスクトップHTMLを非表示にし、JavaScriptを使用してデスクトップHTMLのコンテンツ（全体）をモバイルコンテナ（おそらくモバイル用にスタイル設定されている）にコピーします。実際にモバイルバージョンのHTMLマークアップを（根本的な方法で）変更する場合を除き、CSSとメディアクエリを使用してスタイルを設定できます。

<style>
#ul-desktop
{
    /* Default style for desktop */
}
@media (max-width: 360px)
{
    #ul-desktop
    {
        /* Override style for mobile */
    }
}
</style>

<html>
    <ul id="ul-desktop">
        <li>Bullet #1</li>
        <li>Bullet #2</li>
        <li>Bullet #3</li>
        <li>Bullet #4</li>
    </ul>
</html>

しかし、実際のコードは実際にはあなたの例のようではなく、CSSで操作するにはあまりにも複雑です。

同様に、デスクトップとモバイルのコンテンツは同じなので、サンプルコードはおそらくSEOに関しては問題ありません。 その声明は、おそらく少々短気で/単純化されすぎていました。検索エンジンがHTMLソースを単純に見ると（以前もそうであったように）、デスクトップコンテンツとモバイルコンテンツは同じものと見なされます。ソースHTMLは同じものです。ただし、CSSと「多分」JavaScriptを（ある程度）解釈しようとする人もいるため、元の例で問題が発生する可能性があります。

あなたの例では、SEボットがCSSメディアクエリ（デスクトップコンテンツを隠す）を処理できたが、JavaScriptを処理できなかった場合（単にJSを処理しないか、JSが複雑すぎるために）完全に処理する）場合、モバイルサイトにコンテンツがまったくないという危険にさらされます。

5
MrWhite

これは、上のWPRookie82の2番目の質問に対する答えです。

私のサイトには2つのバージョンが別々のページとしてありますが、PHPを使用して生成しているため、別個のhtmlページは必要ありません。ただし、コンテンツがあなたのものである場合は、多少言い換えますが、最も重要なのは、タイトルタグとメタ説明タグを変更して、モバイルバージョンであることを示すことです。

以下は私が言っていることの例です。私は、人々が理解するのをとてつもなく簡単にした。

デスクトップサイトのHTMLコード：

<html>
<head>
<title>Sports site</title>
<meta name="description" content="This sports site for your desktop computer is cool">
</head>
<body>
Welcome to the special sports site designed perfectly for your desktop computer. bla bla bla .....
</body>
</html>

モバイルサイトのHTMLコード：

<html>
<head>
<title>Sports site - Mobile Edition</title>
<meta name="description" content="This sports site for your mobile device is cool">
</head>
<body>
Welcome to the special sports site designed perfectly for your cell phone or smartphone. bla bla bla .....
</body>
</html>
2
Mike