独学でサイトをつくっている者です。
レスポンシブのサイトをつくっているのですが、皆様はブレークポイント時の画像切替をどう仕込んでいますか?
※例として、様々なバナー画像の場合。
今、素人的に検討しているのは
■1
htmlのimgタグで表示し、タブレットやスマホの場合はcssで適正サイズに縮小
■2
htmlのimgタグで表示するが、jQueryやJavaScriptの仕組みで端末別に表示する画像そのものを変える
例:http://black-flag.net/jquery/20120808-4047.html
■3
cssのbackgroundで表示し、端末サイズ毎に表示する画像を変える
上記3つです。
■1の場合、imgタグに色々施せるのできもちSEO的には有利かな?(もうホントきもち程度にですが・・・)とは思うのですが、結局PC端末でもスマホでも同じ画像を使うため、表示速度的には遅いですよね。ましてRetina対応は必須なわけですし・・・どうなんでしょうか。
■2の場合、ギリギリ限界まで余計なものを排除したいスポンシブで、余計なjsを入れるのはどうなのだろうか?的な疑問が素人的にありました。ただ、これができれば早そうなイメージはあります。
■3の場合、CSSスプライトもできるので表示速度は一番早そうな気がしますが、htmlの記述によってはSEO的にマイナス要素になってしまいそうな気が・・・と思い、これでSEO的に問題ないhtml記述方法などがあれば一番良いのかもしれないと素人的には感じました。
素人な質問で申し訳ありません。
以上の事を考えたのですが、表示速度やSEOを総合的に鑑みて、お詳しい皆々様のご意見なりアドバイスを頂けますと幸いです。
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
HTMLとスタイルシートの役割分担とSEOを誤解されている。
以下をよく読んで叩き込んでおくことHTML 4による文書の設計( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
一言で言うと、HTMLには文書構造だけを記述し、プレゼンテーションはスタイルシートに任せる。これが、検索エンジンにそのページの内容が正確につかめる=【Search Engine Optimization:検索エンジン最適化】ですよ。
★検索順位で上位に表示されるのは、その結果であって目的ではない。
だとしたら、それがナビゲーションメニューでしたら
<div class="header">
・・・・・・
<div class="nav">
<ul>
<li><a href="/Top">ホーム</a></li>
<li><a href="/Products">製品</a>
<ol>
<li><a href="/Products/Tools">作業工具</a></li>
<li><a href="/Products/Erect">電設工具</a></li>
</ol>
</li>
のようにマークアップされているはずですよね。
なぜ?かというと、HTML4.01の時代、文書構造は「id属性及び class属性と併用することで、文書に構造を付加( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」してきましたから、googleなどの検索エンジンは、header内のnavだからグローバルナビだと理解してきました。SEOされているからです。
ただ、個の部分理解されていたとは言いがたく。デザインのためにclassなどが乱用されていたためHTML5では、「文書をよりよく構造化するために、新しい要素が追加されます。( http://standards.mitsue.co.jp/resources/w3c/TR/h … )」
すなわち、HTML5では・・
<header>
・・・・・・
<nav>
<ul>
<li><a href="/Top">ホーム</a></li>
<li><a href="/Products">製品</a>
<ol>
<li><a href="/Products/Tools">作業工具</a></li>
<li><a href="/Products/Erect">電設工具</a></li>
</ol>
</li>
ここまでは、理解されていますよね。HTMLはひたすら文書構造だけを記述する。これによって「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」、SEOは完璧。
画像を入れていないのは
・検索エンジンは画像は読まない
・スタイルシートも読まない
・javascriptも読まない
この場合、画像は文書の主体、コンテンツではない。
その上で、まずmedia別スタイルシートを記述します。レスポンシブということは少なくとも印刷用(print)、携帯電話(handheld)、ディスプレイ(screen)は分けられていると思います。
・出力メディア型( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
・メディア依存のカスケード( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
そして、screenは基本的にリキッドデザインで製作されてきたと思います。
・・・・その拡張が、mediaqueryであり、レスポンシブデザインだからです。・・・・
リキッドデザインで製作して、その上で幅の狭いディスプレイ=マウスのようなポインターデバイスが使えないスマホ用に、mediaqueryでデザインを変える。
1.は画像が主要なコンテンツでない場合は論外です。
2.はjavascriptを使うため排除されます。
画像を切り替えるくらいは良いですが、特にナビゲーションに関わる場合はね。
『JavaScript、Cookie、セッション ID、フレーム、DHTML、Flash などの特殊な機能が使用されているためにサイトの一部がテキスト ブラウザで表示されない場合、検索エンジンのスパイダーがサイトをうまくクロールできない可能性があります。( https://support.google.com/webmasters/answer/357 … )』
ということは
3.が基本でしょう。
下記サイトはレスポンシブではなくリキッドですが、HTMLには文書構造しか書かれていないために、HTMLもCSSも自由に変更できますし、結果的にSEOも
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- Perl 画像が表示でnull; this.src 1 2022/04/19 11:31
- WordPress(ワードプレス) WordpressでYouTubeの埋め込みができない。 1 2022/10/26 01:08
- WordPress(ワードプレス) ワードプレスで、投稿一覧ページにタグを表示する方法 投稿につけたタグを、記事一覧ページにもカテゴリと 1 2023/05/10 21:41
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- その他(プログラミング・Web制作) ワードプレスのプラグインであるAddQuicktagを使いたいが… 3 2022/04/18 15:03
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<ul><li></li></ul>にするメリ...
-
<table>の高さ固定。情報増加時...
-
リストの数字のフォントサイズ...
-
アコーディオンメニューがかく...
-
html/cssの、navを2段にする...
-
html <li>の中の文字一部に色を...
-
番号付きリスト(<Ol><Li>・・...
-
jQuery-もっと見るボタンをスマ...
-
「olタグ」内に「hタグ要素」...
-
HTMLで組織図を作成する方法
-
【CSS】メニュー上部に固定させ...
-
ulタグやliタグの中でbrタグ...
-
li 長さ指定
-
htmlの<ol>タグで、数字などを...
-
divタグ内のコンテンツが重なっ...
-
excel vba で ulタグのなかのse...
-
横並びのリストで左端がはみ出る
-
複数の画像を横並びにし、その...
-
CSS質問:大手サイトを見ると何...
-
ol、liをスタイルシートで中央寄せ
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
<table>の高さ固定。情報増加時...
-
ulタグやliタグの中でbrタグ...
-
html/cssの、navを2段にする...
-
リストの数字のフォントサイズ...
-
liタグの中に<p>タグやら<dl>を...
-
CSSでつくったメニューのアニメ...
-
htmlの<ol>タグで、数字などを...
-
ページを開いているときのリン...
-
リンク文字同士の間隔を開ける...
-
レスポンシブWebデザインでリン...
-
<ul><li></li></ul>にするメリ...
-
divタグ内のコンテンツが重なっ...
-
HTMLで組織図を作成する方法
-
ulとliで囲った文字の一部を変...
-
HTML5のfooterに見出しを付けて...
-
<ul>~</ul>が二つ続くと間に改...
-
html <ul></ul>の並びで一行空...
-
複数行にまたがる括弧を表示し...
-
画像にリンクを張ると画像がず...
おすすめ情報