Webサイト構築をシステム開発会社に外注するのではなくノーコードを用いて内製化する企業が増えています。
しかし、ノーコードによるWebサイトの内製化が増加する一方で、ユーザー側には大きな懸念点が存在します。
ユーザーの懸念点はノーコードで開発したWebサイトにも従来の開発方法と同様にWeb集客のためのSEO対策が実現できるかという点です。
SEO対策はWeb集客の観点で最も重要な部分であり、ノーコードで開発した場合に同様のSEO対策を実装できるのか、実装する場合の設定方法などが海外製のツールであるため情報が極めて少ないのです。
そこで、この記事では、ノーコードツール・ローコードツールを用いたシステム開発サービスを運営し、数多くのノーコードシステム開発を成功させてきたBOLTが、ノーコードが提供するSEO対策機能とその設定方法を解説します。
本ウェビナーでは、Excelでの業務管理に限界を感じている経営者、管理職、現場社員の方達に向け、脱Excelをローコードツールで実現する方法を紹介しています。
基本的なSEO対策とは？
Web集客を行う上で実装すべきSEO対策は豊富に存在します。
ここでは一般的なWebサイトで必要となる基本的なSEO対策を紹介していきます。
titleタグ設定
titleタグはGoogleがコンテンツの検索順位を決定するためのサイト評価を行う際に用いられる重要な要素です。
titleタグを最適化することで検索結果の掲載順位の上位を上げることに繋がりますが、逆に設定しなかった場合や不適切なtitleタグを設定した場合は、記事内容がどれだけ有益であっても高い評価を得ることができません。
titleタグはGoogleなどの検索エンジンが最も重要視している箇所であり、検索順位を大きく左右する要素となります。
titleタグ設定時に注意すべきはtitleタグの文字数です。
titleタグを設定する際は文字数を30字程度にする必要があります。
これには理由があり、30文字以上に設定した場合には、タイトルが長すぎるためタイトルの最後の方が「・・・」と省力されてしまい、全て表示することができず、ユーザーが記事内容を判断しづらくなるためです。
ただし、必ずしも30文字に抑えなければならないというわけではありません。
仮にtitleタグの文字数が30文字を超えていても、Googleのサイト評価を損なうことはありませんので安心してください。
meta description(メタ ディスクリプション)設定
titleタグと同様にSEO対策において重要な役割を占めるのが、meta description（メタディスクリプション）の設定です。
meta description（メタディスクリプション）はWebサイトの内容を簡潔に説明する文章のことで、設定したtitleタグの下部に記載される説明文のことを指します。
titleタグ同様に文字数が一定を超えた場合は、「・・・」の形で省略されてしまうので、PC画面では120文字程度、スマートフォン画面では50文字程度の範囲で記述するのが最適です。
meta description（メタディスクリプション）は表示されたWebサイトがユーザーの検索意図に適しているかどうかの判断基準となり、クリック率に大きな影響を及ぼすため、ユーザーの検索意図にマッチした文章を設定することが大切です。
設定しない場合はGoogleが自動で検知して、記事の内容を表示してくれますが、意図しない文章が表示されてしまう可能性があります。
読み込み速度
Webサイトの読み込み速度はSEO評価項目の対象となっており、読み込み速度の遅いWebサイトはSEO評価において低評価を受けることになります。
Googleの公式ホームページにおいてユーザーが注意しなければならない点は以下の2点になります。
- 個々のクリック、イベント、ユーザー操作の実行速度または読み込み時間（画像の表示時間やボタンのクリックの反応時間など）
- ブラウザがドキュメントを解析し、ユーザーの操作が可能になるまでの時間。
１つ目はWebサイト内の画像表示までの時間や、ボタンのクリックから処理実行までの時間を計測し、評価を行っており、画像表示や処理実行までの速度が遅いと、Webサイトの評価が低評価となる点です。
2つ目はWebサイトを開いてから、ユーザーがクリックなどの操作ができるまでの時間を計測しており、操作可能になるまでの時間が遅い場合は低評価となります。
あくまでもGoogleが行っている評価は「読み込み速度が遅いサイトの評価を下げる」のが目的であり、既に速いWebサイトの読み込み速度を早くする必要はありません。
大切なのは「読み込みが遅いサイトの読み込み速度を改善する」ことです。
サイトの読み込み速度が遅いと、ユーザーは待つことにイライラしてしまい、Webサイトを確認せずに離脱してしまうので、読み込み速度の最適化には気を配りましょう。
404エラーページ
404エラーページは「存在しないURLのアクセスした場合に表示されるページ」であり、探しているページが存在しないことをユーザーに伝えるページです。
多くのWebサイトでは、上記のような内容の404エラーページが表示されますが、404ページにユーザーにとって役立つ情報を掲載することで立派なSEO対策となります。
404エラーページの目的は存在しないURLにアクセスしていることを知らせることが目的ですが、元々は何かしらの情報を見るためにURLにアクセスしているので、ユーザーが本来見たかったページに関する情報を掲載するべきなのです。
具体的に以下の内容を載せることで404エラーページがSEO効果を発揮します。
- 人気ページのリンク
- サイトトップページへのリンク
本来ユーザーが探していたページを見つけるために必要な情報を掲載することが必要であり、404エラーページのカスタマイズが必要となります。
Altタグの設定
Altタグはサイト内に表示された画像の内容を検索エンジンに伝える役割と、画像が読み込めないときに表示される代替テキストの役目を果たし、SEOに影響を与える要素となります。
Googleなどの検索エンジンはWebサイトに表示されている画像の内容を把握することができません。
そのため、Webサイト側で画像にAltタグをつけて、検索エンジンに「何の画像なのか」という情報を伝えることが必要です。
検索エンジンがAltタグから画像が何の情報であるか判断することができれば、検索されたキーワードがAltタグに含まれていた場合、検索結果にヒットさせることが可能になるため、AltタグはSEOに影響を及ぼす要素となります。
また、Altタグは検索エンジンのためだけでなく、ユーザーの利便性にも貢献します。
何らかの原因でWebサイトが正常に読み込まれなかった場合に、Altタグのテキストが画像表示部分に代替テキストとして表示されるため、画像が表示されなくてもユーザーはAltタグでサイト内容を把握できるため、ユーザビリティーが向上し、Webサイトの評価を上げることができます。
OGPの設定
OGPは「Open Graph Protocol」(オープングラフプロトコル)はFacebookやTwitterなどのSNSでWebサイトがシェアされた際に、ページタイトルや画像、説明などを表示し、ユーザーに分かりやすく正しく伝えるための表示設定です。
OGPを設定しない場合はSNS側で自動で説明文や画像を表示してしまうため、本来のユーザーに伝えたい内容が伝わらず、認知しても読んでもらえない機械損失に繋がります。
SNSからの流入はWeb集客において、非常に重要な役割を果たすため、Webサイトを通して伝えたい内容をOGPに設定する必要があります。
OGP設定において重要なのは、「パッと見てすぐにわかる内容か」という点であるため、できるだけ分かりやすい文章と画像を設定する必要があります。
WebflowにおけるSEO設定方法
ここまでWebサイトにおける基本的なSEOを紹介してきました。
従来の開発方法の場合、SEO対策を講じるためにはそれぞれに適切なコーディングを行う必要があり、SEOに関する知識他にコーディング知識も必要となり、かつ設定には手間と時間がかかります。
しかしノーコードツールはコーディング不要で手間なく簡単にSEO対策をWebサイトに講じることが可能なのです。
ここではノーコードWebサイト開発ツールである「Webflow」を基に実装方法を解説します。
Webflowについて事前に詳しく知りたい場合は「Webflowが実現する新しいWeb制作の形とは？ ツールの特徴から徹底解説」をご確認ください。
1.titleタグの設定方法
Webflowにおけるtitleタグの設定は非常に簡単です。
以下の手順でWebflowの設定画面を表示します。
- 画面左側のメニュータブからページ一覧をクリック
- 構築されたWebページの中からトップページとするページの歯車をクリック
ページ設定画面の上段から2番目のタブが「SEO settings」となっており、ページに対する各種のSEO対策を設定する画面になります。
「Seach Result Preview」の部分は実際に検索結果上で表示される内容がプレビューできる部分です。
中段の「Title Tag」がtitleタグ設定が可能な箇所であり、ボックス内にタイトルを記述することで、プレビュー画面にも入力結果が自動反映されます。
2.meta description(メタ ディスクリプション)の設定方法
meta description（メタディスクリプション）の設定はtitleタグの設定画面と同様のページで行うことが可能です。
操作方法は以下の手順となります。
- 画面左側のメニュータブからページ一覧をクリック
- 構築されたWebページの中からトップページとするページの歯車をクリック
titleタグの下段に用意されたMeta Description入力欄に記事紹介文を記載することで、「Seach Result Preview」の画面上に入力した説明文が反映されます。
Webflowではtitleタグとmeta description（メタディスクリプション）の設定は同一のページで行えるので、設定漏れなどが起こりにくい仕様になっています。
また、「Seach Result Preview」のおかげでユーザー側から見た場合の画面が確認できるのが便利です。
3.読み込み速度の最適化
webflow上で読み込み速度を最適化する場合は、Webサイトに配置する画像データサイズを調整する必要があります。
以下の手順でWebflowの画像詳細画面を表示します。
- 画面左側のメニュータブから画像一覧設定ボタンをクリック
- 表示された一覧からデータサイズを確認したい画像右上の歯車をクリック
画像詳細画面では保存されている画像の幅や高さのサイズに加えて、データ容量を確認することができます。
Webサイトの読み込み速度に影響を及ぼす画像データの場合は、メーターのアイコンの右側に黄色の文字で「Very Large」という警告が表示されます。
警告が表示されている画像は容量が極端に大きいため、画像をそのまま使用すると、読み込み速度に影響を及ぼすため、画像圧縮をする必要があります。
Webflowではサイト内で活用する画像を確認し、容量警告が出ている画像を圧縮処理することで読み込み速度の最適化を実現します。
警告時に画像圧縮を行う際にお勧めなツールは「TinyPNG」です。
完全無料ツールで、画像の大きさはそのままで透明性を維持しながら画像圧縮が可能なWebサービスで、ブラウザにドラック＆ドロップするだけで70~80%ほど圧縮が可能なツールです。
TinyPNGについて詳しく知りたい方は「画像を圧縮して軽くする「TinyPNG」の使い方」をご覧ください。
4.404エラーページのカスタマイズ
WebflowではWebサイトを新規作成すると、404エラーページが自動生成されるため、わざわざ404エラーページを手動で構築する必要はありません。
404エラーページの編集画面は以下の手順で表示できます。
- 画面左側のメニュータブからページ一覧をクリック
- Utility Pagesの404をクリック
Webflowによって自動生成される404エラーページは英語表記で生成されるのでテキストを日本語化することに加えて、ユーザーが求める情報を記載する必要があります。
Webサイトにリンクを追加する場合は、画面パーツの「Texa Link」を活用すれば、簡単にテキストとリンクを画面に挿入することができます。
リンクには外部URLはもちろん、Webサイト内のページ遷移リンクも設定できるので、ユーザーに最適なリンクを設定することで、404エラーページのカスタマイズが可能です。
5.画像コンテンツへのAltタグ設定方法
画像コンテンツごとにAltタグを設定する場合は画像詳細画面での設定が必要になります。
読み込み速度の最適化を図る際に行った同様の手順で画像詳細ページに遷移し、中段に表示されているテキストボックスにAltタグ情報入力することで、設定完了となります。
Altタグの設定はWebサイト内で利用する画像コンテンツ全てに適応する必要があり、多少の手間がかかりますが、SEO効果をもたらす要素であるため、忘れずに設定を行いましょう。
6.OGPの関する設定方法
SNSシェア時の文章、サムネイルなどを設定する場合は、画面詳細ページへ遷移する必要があります。
以下の手順でWebflowの画面詳細ページを表示します。
- 画面左側のメニュータブからページ一覧をクリック
- Webページの中からOGP設定をしたいページの歯車をクリック
SEO Settingのタブの下段に「Open Graph Settings」と書かれたタブが表示されており、クリックすることでOGP設定に必要な各項目が表示されます。
「Open Graph Preview」の部分は実際にSNSにシェアされた際に表示される内容確認できるプレビュー画面です。
以下がOGP設定が必要な項目です。
- Open Graph Title
- Open Graph Description
- Open Graph Image URL
上から順番にタイトル、説明文、サムネイル画像のURLであり、全て設定をすることでSNS上のシェアに対応したOGPを作成することができます。
titleタグとmeta descriptionの設定と同様にプレビュー画面が備わっているので、「ぱっと見てすぐに内容が理解できるか」の観点で内容確認をしてください。
【まとめ】ノーコードでも十分なSEO対策を講じることができる
この記事ではノーコードが提供するSEO対策機能とその設定方法を解説してきました。
ノーコードでWebサイトを開発する場合でも、従来の開発方法で設定していたSEO対策と全く遜色のない形でSEO対策を施すことが可能であり、Web集客に強いWebサイトを構築可能です。
今回紹介したSEO対策の他にも、Webサイトに流入したユーザーの分析やサイト改善に貢献するGoogleアナリティクスとの連携機能も有しているため、ノーコードで開発した場合にSEO対策でデメリットが生じる可能性は極めて低いです。
むしろ、従来の開発方法の場合はSEO設定をするためにコードの至る所に設定用のコードを書く必要がありましたが、ノーコードでは専用画面から簡単に設定できる手軽さが魅力となっています。
また、システム開発の外注先選びでお困りの方は、弊社までお気軽にご相談ください。
ノーコード・ローコードを用いた開発事例の共有、ツール選定のサポートから要件定義、実際の開発支援まで包括的にサポートさせていただくことが可能です。
システム開発を失敗しないために、弊社が相見積もりの取得までをサポートさせていただくことも可能です。むやみな営業電話などは決して行いませんので、まずは無料のご相談をお待ちしております。
