スマホ・ページ

概念的には下記のようになります。

コードを参照してみると良いでしょう、なおダウンロードすると(ブラウザ？によって)コードが改変されてしまう場合があるので、必ず開発者ツール(デベロッパー･ツール)で参照して下さい。

http://xd305417.html.xdomain.jp/responsive/002

参考

SEO対策

https://rara.jp/sphinx1335/page8

※ガチのSEO対策には、(フロントエンド)セミプロ・レベルの勉強が必要になります。

それは本気で(フロントエンド)セミプロ・レベルを勉強する気が無いなら無理だと言う意味です。

下記のようなクソみたいな欠陥Webページだと、当然 SEO的にマイナスになります。

>下の画像のページが表示されたら、このWebページ作ったヤツはアホだろと思ってブラウザ・バックしますよね？

>https://drive.google.com/file/d/1znyw4kX9m4I4enroA931c7tyZ1wq8A91/view?usp=sharing

PCのみ対応のWebページなら約「1000px～3000px」解像度ぐらい、モバイルも対応のレスポンシブ･デザインなら約「300px～3000px」解像度ぐらいをChromeモバイル･エミュレーターでチェックして下さい。

フロントエンド(プロ)だと6k解像度モニターぐらいは使ってるかもしれませんから、ポートフォリオを作成するならChromeモバイル･エミュレーターで約「280px～6000px」解像度ぐらいのチェックが必要になるので、Chromeモバイル･エミュレーターぐらい使えないようではフロントエンド(プロ)は無理と思って下さい。

フロントエンド(プロ)を目指さない場合でも「欠陥Webページ、レスポンシブ･デザイン」のチェックにはChromeモバイル･エミュレーターが必要になるので、とりあえずChromeモバイル･エミュレーターぐらい使えるようにして下さい。

【重要】

その『Chromeモバイル・エミュレーターの使い方』は中高生レベルの読解力が有れば、何回か読めば理解できる程度の難易度なのに、なぜか【ダメダメ･デモ】をChromeモバイル･エミュレーターでチェックする人は殆どいないんですよね(その程度の事ぐらい真面目に やってくれよって話しですが)。

重要なので、すぐにでもトライしてみて下さい。