まぐまぐメルマガ SEOアクセスアップ SEMオーダーアップ SEO塾 ~ バックナンバーと購読について

メルマガ バックナンバー

まぐまぐのメルマガ無料版は、バックナンバーが廃止されている
そこで重要なメールマガジン記事のバックナンバーを抜粋して掲載

まぐまぐ殿堂入りしているメルマガ『SEOアクセスアップ SEMオーダーアップ SEO塾』

ブログ記事のリンクを記載して、その記事をテキスト解説

このページでは、さらにテキストでは味気なかったメルマガ記事の中から重要な箇所、説明が足りなかった箇所を、Webで再編集して詳細に解説している

メルマガ:第 330 号 2023-10-10発行

Googleづくし

下記サイト(当サイト:https://www.seojuku.jp/)は
今回の新テーマのデモを兼ねています

SEO以外のことで、これほどGoogleにのめり込んだことは、はじめてかもしれません

AdSense

WordPressでAdSenseを表示させること

記事内広告は、テーマファイルに仕掛けして
コンテンツの上と下
コンテンツの中ではショートコードで読み込みます

最近は禁止を解かれたスクロール追尾型もあり
複数パターンのアーカイブスタイルに、インフィード広告を表示すること
アーカイブスタイルに合わせて、AdSenseスタイルも選別しています

やや苦労したのは、サイドバーのAdSenseです

モバイルでは、サイドバーは折りたたみになるのですが
あとから展開して表示されると、AdSenseは表示されません

そのため、サイドバーの折りたたみの外に、AdSenseを出すようにしています

Site Kit プラグイン

WordPressのプラグイン Site Kitは、上述の
AdSense をはじめ
Search Console
Analytics
などなど

プラグインから、Googleのいろいろなサービスにアクセスして、登録ができるようになっています
つまり、Search ConsoleやAnalyticsなど、鬱陶しい設定はなしで、すぐに登録が済みます

もちろん登録だけでなく、各サービスの簡易な表示から本家へのアクセスなど、便利でたまりません

Advanced Google reCAPTCHA

reCAPTCHA

セキュリティというか、スパムコメントなどを抑止するプラグインです

ですが、PageSpeed Insightsで、もろもろ警告されます

また、スパムを完全にシャットアウトしてくれるわけでもなく、それほどでもないですね

新テーマのGoogleづくし

上述では、ただプラグインをインストールしているだけですが
新テーマでは、かなりGoogleを意識したつくりになっています

WebP採用

これもプラグインの力を借りていますが、明確にWebP画像を使用するように、テーマを作り込んでいます

JSON-LD

個別ページでは、自動で、パンくずリストを出力します

設定次第ですが、articleも自動で出力できます

そのほか、FAQも簡単に作成と出力ができます

サイト情報
組織情報
商品情報

イベントや
店舗なども
あります

Googleアイコン

Googleアイコンは、Material Symbols and Icons

これを、できるだけ軽く速くするように、ひと工夫もふた工夫もしています

Googleホストの読み込みではなく、セルフホスト
そのための
アイコンファイルの調達など、すべて新テーマに仕込んで、すぐにGoogleアイコンが使えるようにしています

ビジュアルSEO

まず、モバイルファースト
モバイルユーザーを意識すると

小画面で
画像多く
テキスト少なく

ある意味で
ビジュアルSEOを目指しています

見出しタグのビジュアルSEO

中でもh2のデコレーションは、かなりのバリエーションを実現しています

CSSは設定済みで、この○○-headingに限らず grid や flexbox など、基本的な HTML コーディングと class 追記でデザイン/レイアウトが実現します

 

classに half-circle-side、デフォルトで inset のボックスシャドウ

gradation-heading シャドウ

heapup-heading シャドウ

mesh-heading シャドウ

camouflage-heading シャドウ

 

classに radius および no-shadow を加えて、シャドウ系のイフェクトを消し角丸(border-radius)に

gradation-heading 角丸

heapup-heading 角丸

mesh-heading 角丸

camouflage-heading 角丸

 

classに rectangleno-shadow、レクタングル(長方形)でシャドウ系のイフェクトなし

gradation-heading 長方形

heapup-heading 長方形

mesh-heading 長方形

camouflage-heading 長方形

 

classに warpno-shadow、歪み変形でシャドウ系のイフェクトなし。角が丸くないのが珍しい

gradation-heading 歪み

heapup-heading 歪み

mesh-heading 歪み

camouflage-heading 歪み

Web制作会社におすすめ

Web制作会社であれば、サイト作成のツールになるでしょう

またWordPressテーマですが、HTMLとCSSは独立していますから、CMSにも転換可能でしょう

アドバイスもいたします

Webサイトのホスティングなど、大物にも対応できるでしょう

サイドバーを中心に、デスクトップ画面のレイアウトは、簡単に変更できます

またモバイルでは、アーカイブトップのスタイルも変幻自在なので

カテゴリートップ
タグトップ

それらをいろいろなスタイルで、見栄えを変えることができます

とくに

商品が多い
画像が多い

そういったECサイトには、一発回答のデザインになっているはずです

メルマガ:第 332 号 2023-10-17発行

画像レスポンシブの最終結論

画像は適切に表示されている?

今どき、Webで、画像がはみ出るやら、小さく表示されているやら、そんな不細工なことはないでしょう

画像が伸び縮み

Webページの画像表示箇所

350pxと想定していて、350pxで画像が表示されている
無問題!
とはならないわけです

本来の画像は
1000px
それが縮められて、
350pxで表示されている場合

ユーザーのデバイスに、大画像をダウンロードさせ、通信費が余計にかかり、ブラウザーにも負担をかけてということになります

あるいは、スマホ縦画面に合わせて画像を
350px
で作成

おお、ちゃんと全画面で表示されている!

ところが、スマホがDPR3の場合、適切な画像は
350 x 3 = 1050

画像は、3倍に薄められて(笑
ぼやけて表示されます

これは、ユーザーの目に負担をかけているかもしれません

モバイルファーストの画像表示

PageSpeed Insights
ベースとなっているモバイル端末は

Moto G4
DPR 3
360 ピクセル

PageSpeed Insights で高評価を得るためだけでなく、これがベース端末ということは、ベースにするだけの実績がある ということでしょう

スマホ縦で、全画面表示される画像は
360 x 3 = 1080

スマートフォンで、全画面表示を想定している画像は
1080 px 以上で
作成しアップロードするべきなのです

4K以上のディスプレイが普及…

Macは、すでに4K以上、5Kくらいまで進んでいます

Macユーザーのシェアは少ない
だから、気にしない

スマートフォンも、3倍のDPR3が主流

画面は小さいからスルーできる

しかし、タブレットもDPR2以上
これまたユーザーが少ない

テレビも4K・5Kは人気がない

パソコンもディスプレイで4K以上が、市場に出てきていても、これまたそれほど普及はしていない

だから
だから

4K対応
DPRの2や3は
無視!無視!!無視!!!

競合との差別化は

もし自サイトで、商品画像やサムネイルが、重要、訴求力がある

そして自社も、競合他社も、4K対応画像ではない
4K画像かどうかも分からない

Web制作会社でも、伸び縮みレスポンシブは当然、対応済みですが、レスポンシブイメージに対応しているところはほとんど見かけません

レスポンシブイメージの真の意味も、理解しているかどうか…

スマホもかなり大画面化しています

タブレットやパソコンさえも、4K以上の時代が来るでしょう

今がチャンスです

競合との差別化です

WordPressのサムネイル・アイキャッチ

WordPressの投稿、コンテンツ箇所は、伸び縮みレスポンシブではなく
自動的にレスポンシブイメージになるように、画像がコーディングされます

ただしサムネイル、アイキャッチはそのままでは無理です

ページを代表し、ページの画像をサムネイル化する

でもサムネイルは、伸び縮みレスポンシブ化はできても、そのままではレスポンシブイメージにはなりません

ここがサプライズする、新テーマのアピールポイントの1つです

サムネイルを活用する仕掛けですから、サムネイルの扱いは最重要課題です

スマホ4K DPR3 対応なら…

Google検索で、最近、生成AIが利用できるようですが、それによると

 

2022年11月時点で、画面解像度のシェア率が高いのは
390×844pxのサイズです。
iPhone12・13・14のサイズが、390×844となっており、Apple社の機種が約58%を占めています。

Androidのスマートフォンは、画面サイズが一定ではないため、
「横幅400」と考えられます。
そのため、最適なWebデザインのサイズは
「横幅375px」または「横幅400px」と言えるでしょう。

日本はiPhoneのシェアが高いため、
「横幅375px」で作成するといいでしょう。

まあ、Androidも射程に入れて、DPR3も想定して画像は
1200px 以上で作成するべきでしょう

さぁ、すぐにはじめましょう!

サムネイルも同様です

これを、伸縮レスポンシブではなく、最適サイズの画像を選択するレスポンシブイメージ化できれば、最高です!!

メルマガ:第 333 号 2023-10-19発行

スマホだけ別画像

レスポンシブとは言うけれど…

前号でレスポンシブWebデザインとレスポンシブイメージは、定的に違うと解説しました

スマホだけ別画像

上記のページ、スマホ縦画面およびその他で
ヘッダー画像の表示を確認してください

srcsetに仕込まれた画像幅記述子(w)
これは
レスポンシブイメージのブレイクポイントでもいいましょうか

これを理解すると、スマホ縦画面だけ別画像も可能です

ただし
WordPressであれば、スマートフォン判別のfunctions.php 設定
その他であれば、JavaScriptなどでモバイル判別

これが必要ですが…

メルマガ:第 336 号 2023-10-26発行

レスポンシブ 最終結論

レスポンシブもいろいろ

レスポンシブWebデザイン

これはCSSのメディアクエリで

レスポンシブイメージ

レスポンシブイメージ

これはHTMLの画像関連タグで

記述子(x)はDPR3には失敗する

2xの記述子(x)では
とくに最近のスマホで増えてきたDPR3には対応できません

記述子(w)なら

DPRの3でも4でもオールマイティです

しかもデバイス別に、極端には
スマホの縦画面と横画面で、画像を変えることもできます

今やレスポンシブWebデザインなどはもう十分

レスポンシブイメージで、画像の扱いは極めることができそうです

あとはその画像に、価値が有るか無いかですね(笑

DPRレスポンシブの事例

WordPressでは、勝手にDPRレスポンシブになります
下記の画像を右クリックで別タブに表示させて、サイズを確認してみてください

サムネイル7 1280x360
サムネイル8 1280x360
サムネイル9 1280x360
サムネイル7 1280x360
サムネイル8 1280x360
サムネイル9 1280x360
サムネイル10 1280x360

レガシーレスポンシブの事例

WordPressの勝手にDPRレスポンシブは、投稿編集画面にメディアを追加したときに、次の class="wp-image-123" classの画像IDを削除しない場合に限ります

そのclass、画像IDを削除した下記ケースでは、ビューポートで画像サイズが変わらず、同一サイズの画像が伸縮して表示されます

サムネイル7 1280x360
サムネイル8 1280x360
サムネイル9 1280x360
サムネイル7 1280x360
サムネイル8 1280x360
サムネイル9 1280x360
サムネイル10 1280x360

 

メルマガ:第 344 号 2023-12-20発行

ブレイクポイントは 600 960

メディアクエリを設定するなら

結論として
弊社は新テーマ作成にあたって、やはりメディアクエリを採用しました

その数値設定は
600 960

スマートフォンの縦と横

600は

スマートフォンの、縦画面から横画面の切り替えの、ブレイクポイント

まず
スマホ縦画面は、
もちろん縦長

これが、今までのデスクトップファーストのディスプレイ画面に、大革命を起こしています

レスポンシブがあれこれ、モバイルファーストがなんとか
そういった、洒落た言葉遊びではなくて

とにかく、スマートフォン縦画面に対応
これが必須で

スマートフォンネイティブというか、スマホは、横向きにもなるということで
スマホ画面の高さの限界を

600

と、数多くのデバイスサイズを検証した結論です

スマートフォンしか持っていないユーザーを対象に
アプリのように、縦画面で固定しない場合は
横画面でも見るにたえうるWebにする必要があり

そのブレイクポイントが
600
ということになりました

デスクトップは 960

600以上のスマホ横画面は、タブレット縦画面と兼用

またデスクトップは、タブレット横画面と兼用

600以下

スマートフォン縦画面

600以上

スマートフォン横画面
タブレット縦画面

960

デスクトップ
タブレット横画面

このような
ブレイクポイント設定となります

メディアクエリ不要のトレンド

ところで

Google
Apple
Amazon

さらには

Microsoft
など

IT巨大企業のWebは、1カラムが主流です

1カラムならメディアクエリ不要

いろいろ検証して、テーマ作成で思い知ったのは
サイドバーは地雷ということです

まずWeb作成の常識として

サイドバーは、コンテンツ箇所の幅を狭くします

そしてメディアクエリは、ブラウザーのビューポートを対象にしているので
サイドバーは、ビューポートの中の、コンテンツ箇所の幅を侵略します

これを想定したコンテンツ箇所や、その中の本来のコンテンツが、サイドバーで狭くなった
ビューポートを計算した
メディアクエリでは、破綻する

あるいは簡単に言えば、表示が崩れる
そういう災難に見舞われることがあります

よってサイドバーなし

1カラムなら、コンテンツ箇所もビューポートの幅と一致しますから
どうしてもメディアクエリを採用したいとき
横並びのコンテンツを、スマホ縦で
縦並びにすることだけに、配慮すればいいということになります

最近のCSSはメディアクエリ不要

さて
1カラムではなく
2カラムでも
3カラムでも

今どきのCSSは
clamp vw calc minmax
flexbox grid
などなど

メディアクエリが不要のコーディングにすることができます

ビューポート幅に応じて、横幅が、それこそレスポンシブに変化します

下のものを上に
左のものを右に

そういった複雑なレスポンシブ変化を求めなければ
自動的に
コンテンツを変化させることができます

DPRレスポンシブ

画像は特別なことをしなくても、ビューポートに合わせて伸縮表示ができますが
さらにレスポンシブイメージになると、これもメディアクエリ不要

HTML側の pictureやsrcsetで、ビューポート幅に応じて、大小の画像をブラウザーに選択させることができます

これはまた、ハイスペックのスマートフォン、高解像でのディスプレイでは
2倍3倍の画像を表示させて
はっきりくっきり
と言うような芸当に対応できるわけです

grid minmax でgridパラダイス

いろいろ実験と検証を重ねていますが
grid minmax は
超画期的です

とにかく、gridによるレイアウトは、レスポンシブやらメディアクエリやらから解放されて、ほんとうにパラダイスが実現します

メルマガ:第 345 号 2023-12-23発行

スマートフォン小画面最適化

S.D.O.
スマートフォン 小画面 最適化
Smartphone Display Optimization

S.D.O.主義というか、方針 ポリシーを意識すると
Web作成がすっきりするような

スマートフォンの 縦と横

S.D.O.でもっとも悩ましいのは

スマートフォンの
縦画面で、縦長
横画面で、横長

この切り替えでしょう

デザイン/レイアウトで

縦画面で
縦並び

横画面で
横並び

この切り替えをクリアできれば

スマートフォン横画面で
横並びは

タブレット縦横
デスクトップ

これらにも流用できます

またデスクトップやタブレットを無視/スルーしても

スマートフォンでは
縦画面と横画面
それぞれに対応する必要があり

この縦横に対応できれば、オールクリアとなるでしょう

スマホ小画面でSEO

まずレスポンシブがどうとかは無視/スルーして

HTMLソースは、全デバイスで同一のはず
よほど凝ったことをしない限りは…

よってスマートフォン用の、WebのHTMLソースで、SEOをやっておけば

全デバイスで
SEO
対策済みとなります

スマートフォン小画面最適化で
SEOも
オールクリアとなりますね

flexbox のケース

flexboxの場合は

縦画面で
flex-direction: column;

横画面で
flex-direction: row;

メディアクエリ処理が、簡単で楽です

flexboxケース 上・左 画像
flexboxケース 下・右 画像

grid のケース

gridも
2個のアイテムの場合

minmax で
汎用CSS 2行程度で済ますこともできますが

gridケース 上・左 画像
gridケース 下・右 画像

メディアクエリありなら

縦画面で

grid-template-columns: 1fr;

grid-template-areas:
"上(左)アイテム"
"下(右)アイテム"

横画面で

grid-template-columns: 1fr 1fr;

grid-template-areas:
"上(左)アイテム 下(右)アイテム"

これでクリアです

gridメディアクエリ 上・左 画像
gridメディアクエリ 下・右 画像

ただし、gridアイテムにCSSで grid-area を設定しなければなりません。しかも1つずつ
またgridコンテナーでもgrid-template-areasを記述することになります

スマホ横画面最適化でオールクリア

結局スマートフォン小画面で、SEOをやっておけば

スマートフォン横画面で、アイテムの デザイン / アイテム を最適化できれば

その画面幅より大きい

タブレット 縦と横
デスクトップ

これらもクリア

つまり
スマホ横画面最適化で
オールクリアとなるわけです

 

SEOでアクセスアップSEMでオーダーアップSEO塾

SEO塾/アルゴリズム社は、長期にわたってWebビジネスのアクセスアップと売上アップについて研究しています

今どきのWebビジネスのトレンドは、#モバイルファースト #4K-DPR3-レスポンシブイメージ #マテリアルデザイン #Material-Symbols #Material-Icons #WebP #JSON-LD #スマートフォンアプリ #gridレイアウト #flexboxコンテンツ #HTML-Living-Standard #CSS3 です

S.D.O.(Smartphone Display Optimization)

今の課題は、S.D.O.(Smartphone Display Optimization)、スマートフォン小画面最適化で、メディアクエリやレスポンシブやモバイルファーストなどに悩まないWeb作成
flexbox、gridによるデザイン/レイアウト、clampやcalcなどの関数CSSが、S.D.O.の武器となります

C.T.O.(Category Top Optimization)

および、C.T.O.(Category Top Optimization)、メガECサイトなど、取り扱いアイテム数が多いビジネスサイトのカテゴリートップをカタログ化して販売促進を図るメソッドもほぼ完成しております

カテゴリートップの2大定番は、Yahooニュース/不動産紹介スタイルZOZOTOWN(2カラム)です
さらに、Amazonも2大定番をベースに、独自なコーディングでほとんどのカテゴリートップで驚異的な上位表示を達成しています
ZOZOTOWNも独自コーディングが背景で、やはりカテゴリートップの上位表示を果たしています

想定の読者と購読するメリット

スモール・ビジネスを中心とした、サイトオーナーやウェブマスターの方は、毎日、SEO情報を探し回るヒマはありません
また、メガECサイトの企業のように、莫大なコスト(投資、人材など)をかけることも不可能です

Web制作会社のみなさんも、リーズナブルで効果的なビジネスWebを、クライアントにサプライズできれば、WinWinで最高でしょう

そのような、スモール・ビジネスのオーナーやWeb制作会社の見方です!

今、一番必要な、オリジナルの情報をお届けします

まぐまぐ 登録・解除

2003年8月創刊、2005-08-08 まぐまぐの殿堂入り!

まぐまぐ殿堂入り

SEOでアクセスアップSEMでオーダーアップSEO塾

下記から登録を、どうぞ。

SEOアクセスアップSEMオーダーアップSEO塾

SEOでアクセスアップSEMでオーダーアップSEO塾