SEO上位化のカギ?デザイン性そのままに画像をテキスト化!レスポンシブデザインにも対応 | ホームページ制作ブログ | 大阪の集客・SEOに強いホームページ制作【S&Eパートナーズ】        

ホームページ制作ブログ

2019/01/21ホームページ制作

SEO上位化のカギ?デザイン性そのままに画像をテキスト化!レスポンシブデザインにも対応

サイトのデザイン性を高めるために、写真やイラストなどの画像を利用するのは常識です。
トップイメージや見出しなどビジュアル的に大事な要素は、画像で文字を表示することもしばしば。
しかし文字を画像に置き換えることはSEO的に問題ないのでしょうか?
今回の記事ではデザイン性はそのままに画像のテキスト化を提案いたします。

「alt」属性でいいんじゃないの?

imgタグにalt属性をつけることで代替テキストを設定することは最早SEO的にも常識になりつつあります。文字が入った画像もalt属性を設定すれば良いのではないでしょうか?
答えは「△」です。
もちろんalt属性はつけるべきであり、検索エンジンもalt属性を読み込み評価をしていますが、その基準は曖昧です。
極論ですが「テキスト情報 > alt属性がある画像情報 > alt属性がない画像情報」という順番で評価されていると考えられています。

Webフォントでデザイン性の両立

そもそもなぜ、テキストを画像化するのでしょうか?
HTMLの性質上、閲覧するブラウザやデバイスなどによって、テキストの大きさやフォントなどの見え方がどうしても違ってしまいます。
それを許容できないビジュアル性が大事要素には、画像にテキストを埋め込む形で表現するのが、数年前までの常識でした。
しかし、2010年代からフォントをダウンロード表示することで全ての環境で同じ文字の形を表示できるWebフォントの技術が確立されました。
Webフォントは無料、有料のものに加え、レンタルサーバーにサービスとして付随するものもあります。
種類も多いので、表現したいデザインに合わせて選択できます。

①画像で作成しているのできれいなフォントです。
テキストを画像化した場合
②テキスト化しましたがフォントがデフォルトのままです。
画像の上にテキストを載せた場合
③WEBフォントを使ってデザイン性も両立しました。
画像の上にテキストを載せ、Webフォントを適用した場合

レスポンシブデザインへの対応

また、画像のままだとレスポンシブ化した際に文字が小さくなりすぎて可読性が下がってしまうことも考えられます。
スマホ用に画像を切り替えることも可能ですが、表示領域に合わせてフォントサイズを変えることで高い可読性が得られます。


スマホで画像のままだと文字が小さく表示されます

テキスト化することでテキストのサイズを大きく表示できます。

Webサイト公開後の管理もしやすい

運用していく上で内容を変更したりする際、画像ならもう一度作り直す必要があります。
画像の作成データを管理したり枠組みに収めるように調整したりと余計な手間がかかってしまいます。
もしテキスト化されていれば、HTMLを書き換えるだけで更新することが可能です。
また複数の段落やページにデザインを使いまわしすることも出来るので、サイト構築にも有用です。

テキストと画像の使い分けを

もちろん企業ロゴや手描きフォントなど、テキストに置き換えれない要素もあるので全ての画像をフォントにすることはできません。またWebフォントも何も考えずに利用すると表示するのに時間がかかり、SEO的にも逆効果になってしまいます。
しかし見出しやトップイメージなど、サイト内でも大事な要素をテキスト化することでSEO的にも効果を見込むことが出来ます。
画像で表示すべきところ、テキストで表示すべきところを見極めて、設計運用することが大事になります。

S&Eパートナーズでは画像のテキスト化に関するご相談やサポートなども承っております。
ご不明な点等ございましたらお気軽にお問い合わせくださいませ。

ご相談、お問合せはこちら


関連記事一覧