SEOを意識したサイト作りをする際に、画像とテキストは出来るだけ分けたほうがいいです。検索ロボットがテキストを認識して検索順位を決めるので、画像だと埋もれるからです。
今回は具体例と一般的な方法を解説します。
この記事でわかること
テキストを含めた画像のデメリット
- 検索順位を決める検索ロボットは画像内のテキストは読まない
- ページ内のテキストの量と質が想定より低く見積もられる
- 画像のテキストは視認性も弱い
- 画像のテキストは大事なポイントが多い
- 大事なポイントの視認性が弱くなる
- つまり、伝わりづらいページになっている
WEBの画像にするしないの判断基準は、写真とイラスト、図解は画像が良いです。
テキストなどの文章は画像おすすめしません。
画像とテキストの関係
WEBサイトは解像度dpiは72が基準と言われれてます。
しかし、dpiではWEB上では画質が変化しません。
解像度で画質を調整しません。
では、どう調整するのでしょうか？
一般的な画像の扱い
画像によりますが、基本運用は、
- 画像サイズを大きめ（1MB以内）
- 写真ならJPEG、JPG
- イラスト系ならPNG8
- 画質の調整を高めにする
- 横幅1000前後で保存して、適宜微調整
で良いです。
画像の上にテキストを入れたいときの方法
画像内にテキストをいれたいときの理由としては、
- 図解
- デザイン性
などがあります。
では、テキストを画像に入れずにこの表現を実現させる方法はないのか？
２つ例を挙げます。（Word Pressの場合）
- 編集エディタがGutenbergでは、ブロックタイプを「カバー」にして画像の上に文字を挿入する
- エディタをコードエディタ（テキストモード）にしてコードで設定する
です。
１はそのままです。
２は下記のソースを貼って、適宜調整してみてください。
<div style="position: relative;">
<img class="aligncenter size-full wp-image-1136" alt="看板" src="画像のURL" width="100%" height="100%" />
<div style="position: absolute; top: 50%; left: 50%;">画像内側に埋め込むテキスト</div>
</div>
以上です。ご活用ください。
ページの制作改善してほしい方へ
自社サイトのフォーム改善を検討している方、お気軽にご相談ください。
制作料金のイメージですが、上記の方法ですと、
- Webサイトの中のソースコード確認
- サイトに合わせた実装
という作業工程で1万円から貴社のサイト状況、最適なページ仕様などにより、個別にお見積りさせていただきます。
Web制作+Webマーケティングの個別講座開講中
Web365はWeb担当者のスキルセットである
サイトを変更する「提案力」と「技術力」について個別指導しております
・Webで集客するための「考え方」を知りたい方
・サイトの制作改善のセオリーを知りたい方
・自身のサイトでケーススタディをしたい方
・サイトの制作改善の「技術的なスキル」を習得したい方
・分析から改善運用まで自身でしたい方
・Googleアナリティクスの設定、分析から改善施策の立案、レポート作成まで自身でしたい方
どうぞWeb365の「Webサイト制作、Webマーケティングの知識スキル習得するためのオーダーメイド個別講座」をご覧ください。
外注のWeb担当者として「制作」と「マーケティング」で単発/継続でサポートします。
Web365は貴社のWeb担当者として、制作改善運用をワンストップサポートしています
・成果にこだわるサイト制作改善をお望みの方
・自社にとって最適なweb制作会社、コンサル会社がいないとお困りの方
・分析から改善運用まで一括で依頼したい方
是非Web365までご相談ください。
【パートナー募集】
Web制作、Webコンサル、広告代理店、フリーランスの方々へのWeb改善プランの提供
Web365は同業他社/フリーランスの方々にも当方のWeb改善プランを提供し、クライアントサイトの改善プランのサポートや社内担当者へのレクチャーをサポートしています
・クライアントへのWebマーケティング、Web改善のプラン検討している方
・社内のWebマーケティングのリテラシーを高めたい方
・分析から改善運用まで一括でサポート依頼したい方
Web365は同業他社/フリーランスの方々にも当方のWeb改善プランを提供し、クライアントサイトの改善プランのサポートや社内担当者へのレクチャーをサポートしています
・クライアントへのWebマーケティング提案がしたいプラン作成をサポート
・クライアントへのWeb改善プラン実行のディレクションサポート
・社内のGoogleアナリティクスなどのレクチャー
・クライアントへのサイト分析から改善運用企画のアドバイザリーサポート
・Web系フリーランスへのWeb改善プランの提案企画書の作成サポート
・クライアントへのWeb広告運用代行
・クライアントへの計測ツール設定代行（Googleアナリティクス、eコマース、ヒートマップClarityなど）
まずは、お気軽にMTGでれきばと思いますので、Web365までご相談ください。
