STUDIOは「ノーコード」のWebサイト制作ツールですが、タグの設定によるサイトの構造化を行うことで、よりSEOに強いサイトを作ることができます。

HTMLを書いたことがある方はイメージができるかと思いますが、ヘッダー・フッター・大見出し・小見出し・パラグラフ（文章）…等々、各要素がそのWebサイトおいて果たしている役割を「タグ」で表し、検索エンジンにとってわかりやすいサイトにしておくことは重要です。

このように役割をタグで表現していくことは、セマンティクスHTMLと呼ばれています。
詳細はこちらごご参照ください➔Semantics（セマンティクス）-MDN。

STUDIOではタグを指定することで、文字を見出しや本文として設定することや、ボックス全体をヘッダーやフッターとして設定することができるのです。

また、サイトタイトルやディスクリプションの設定など、基本的なSEO対策もできますので、公開前にひと手間かけて上位表示をねらいましょう！

• STUDIO SEO対策その① 最適なタグを設定しよう
• STUDIO SEO対策その② レイヤー構造を整理しよう
• STUDIO SEO対策その③ タイトル＆ディスクリプションを設定しよう
• STUDIO SEO対策その④ 404ページを設定しよう

STUDIO SEO対策その① 最適なタグを設定しよう

「タグ」とは、HTMLを書くときに指定する**h1（大見出し）、h2（中見出し）、p（パラグラフ）**などのことです。「この部分は見出しですよ」などと検索エンジンのコンピューターに教える役割があります。

ONE POINT ➔➔ 基本的なSEO対策として、「見出し」にはそのサイトのキーワード（「この単語で検索したときに上位表示されたい！」というワード）を含めましょう！

また、文章（または文章＋画像）の**「かたまり」をheader（ヘッダー）やfooter（フッター）、section（セクション）**などとするタグ付けもします。

では、それらをSTUDIOではどのように設定していくのか見ていきましょう！

文字をタグ付けする

まずは、ご自身のサイトについて、「大・中・小見出し」と「本文」の関係をしっかりと構成しておきましょう。

例として、以下のWebサイトの文字についてタグ付けを行っていきます（※本記事の説明用に作成した架空のWebサイトです）。

まずは大見出しの「インテリア百科」という文字を選択した状態で、画面右のメニューを開きます。さらに**「タグ」の項目**を展開すると、文字要素に適用できるタグが選択肢として現れます。

デフォルトでは「p（パラグラフ）」が選択された状態になっているので、**「h1（大見出し）」**をクリックしてこれに変更しましょう。

なお、「h1（大見出し）」はサイトにつき、原則１回だけ使用します。

続いて「中見出し１」を選択し、同様にメニューを展開して、**「h2（中見出し）」**に設定しましょう。「h2」は、各セクション冒頭のタイトルなどに使うとよいでしょう。

次に、３つある「小見出し」のそれぞれに対し、上記と同様の操作で**「h3（小見出し）」**を設定します。

**見出しに相当するタグは「h1」〜「h6」**まであり、数字が小さいほど重要度の高い見出しとなります。

通常の文章（今回の例では「テキストテキスト…」の部分）は、**「p（パラグラフ）」**を選択しておきましょう。

ボックスをタグ付けする

ここでは、各セクションの親要素となっているボックスに対してタグ付けを行っていきます。

まず、ヘッダー部分のボックスを選択して画面右のメニューを開きます。「タグ」項目を展開すると、文字のときとは異なる選択肢が現れます。これらは、ボックスに対して設定することができるタグです。

ボックスに対するタグは、デフォルトでは「div（※）」となっております。今回は、**「header（ヘッダー）」**をクリックしてこれに変更します。

※divはディブと読みます。dividedが由来で「分割された」という意味です。divタグに強い意味はなく、単なるグループとして扱いたい時に指定します。

次は、その下のセクションです。（元の画像ではこのセクションの背景色が透明でわかりづらいので、このセクションの親要素のボックスに黄色く色をつけました。）この背景部分をクリックして選択し、画面右のメニューを開きます。

今度は、選択肢から**「section（セクション）」**を選択します。

通常、このようなセクションはいくつかあるので、トピック毎に**「section（セクション）」タグ**で区切ります。

また、今回の例には載せませんでしたが、多くのWebサイトには最下部にサイトマップや連絡先を記した「フッター」が設置されています。フッターがある場合は、そのボックスに**「footer（フッター）」タグ**を設定しましょう。

STUDIO SEO対策その② レイヤー構造を整理しよう

STUDIOでは、「ボックスモデル）」を意識してサイトを構成すると、自動的にHTMLのようなレイヤー構造が生成されます。

※「ボックスモデル」がピンとこない方は、以下をご参照ください。「STUDIO基本操作① ボックスモデルを制すものはSTUDIOを制す！？」

では、さっそく例を見てみましょう！

画面左のメニューを展開し**「レイヤー」のタブを開くか、メニュー下の「レイヤーへのショートカットアイコン」**をクリックすると、レイヤーメニューが開きます。

最初は各セクションの親要素のみが表示され、子要素は折りたたまれています。子要素も表示させたい時は、要素名の左のマークをクリックしましょう。

下記の例では、**「header（ヘッダー）」の中に「h1（大見出し）」が、その下の「section（セクション）」の中に「h2（中見出し）」や「div（ボックス）」**が含まれている様子がわかります。

なお、後から付け足した要素を既存の要素の中に子要素として入れたい場合は、レイヤーパネル上で、移動させたいレイヤー（やなどの文字）を移動後の場所にドラッグ＆ドロップすることで、レイヤー構造を整理することができます。

HTMLになじみのない方も、STUDIO上でボックスレイアウトをきちんと意識してサイトを作れば、この階層構造は自動的に生成されるので、特に悩まなくて大丈夫です！

ONE POINT➔➔レイヤータブを開いた状態で画面右のメニューを開くと、選択したレイヤーに対してタグなどの条件を設定することができます。

階層が深い場所にある文字などは、誤ってその親要素を選択してしまうことが多いので、こんなときにもレイヤーパネルを活用できるのです！

STUDIO SEO対策その③ タイトル＆ディスクリプションを設定しよう

Webサイトが完成したら、公開前に必ず設定すべきことがあります。それが、**「タイトル」と「ディスクリプション」**です。これらは、Googleなどの検索エンジンで検索したときに「検索結果」として表示されるものです。

ONE POINT ➔➔ SEO対策の基本として、本文の内容と「タイトル」および「ディスクリプション」は必ず一致させましょう。いくら人目を引くタイトルをつけても、本文との関連性が薄く「ユーザビリティが低い」と判断されると、検索順位が下がってしまうでしょう。

では、さっそくSTUDIOでの「タイトル」と「ディスクリプション」の設定の仕方をご紹介します。

**エディタ画面の右上に「ページ設定」**という項目があります。これをクリックすると、画面右側にページ設定に関するメニューが開きます。

この「ページ設定」メニューをよく見ると、「サイト」タブと「ページ」タブがあることがわかります。「サイト」のタブではこのWebサイトサイト全体に関する設定を、「ページ」のタブでは現在編集中のページに関する設定を行います。

サイト全体のページ設定

まずは、このサイト全体のページ設定をしていきましょう。

• タイトル
  • このサイト全体を表すタイトルを入力しましょう。
• 説明文（= ディスクリプション）
  • このサイト全体を100文字程度で説明する文章を入力しましょう。
• ファビコン
  • サイトが表示されているとき、タブの左側に表示される小さい画像（アイコン）を設定しましょう。
  • 推奨サイズは32×32pxです。
  • 例として、Googleの検索画面を表示しているときのタブを見てみましょう。このカラフルな「G」のロゴがファビコンです。

• カバー画像
  SNSなどでシェアされたときに表示される画像を設定しましょう。推奨サイズ1200×630pxです。
• 言語
  主な使用言語を設定します。
  外国人の方が「翻訳サービスを利用しながら閲覧したい」というときに役立ちます。
  （「コレ、何語のページ？」の疑問に答えます）。

各々のページ設定

STUDIOでは、Webサイトの複数のページがある場合、それぞれのページに対して個別の設定を行うことも可能です。

「ページ設定」を開き、今度は「ページ」タブに移動します。

編集画面に表示されているページについて設定をおこなっていきます。

「タイトル」「説明文（=ディスクリプション）」「ファビコン」「カバー画像」「言語」は、先に説明したとおりです。「ページ」タブ内に設定すると、これらの設定を個別のページに対して設定したことになります。

※全ページ共通のファビコンにしたい場合は、「サイト」タブでファビコン設定をしましょう。「サイト」タブで設定すれば、それが全ページに反映されます。「言語」も同様に、全ページ共通言語も場合は「サイト」タブで設定し、日本語ページ、英語ページ…などを作成した場合はページごとに言語設定しましょう。

以下２項目が、「ページ」に特有の設定項目です。

• 公開設定
  各ページの**「公開」「非公開」について設定**できます。
  ただし、特定のページを非公開にする設定はSTUDIOの有料プランに加入する必要があります。
• Noindex
  これをONにすると、そのページが検索結果に現れなくなります。
  ただし、検索されないというだけで「公開」自体はされていることに注意しましょう。

STUDIO SEO対策その④ 404ページを設定しよう

Webサイトを閲覧しているとき、**「404 NOT FOUND」**というページに遭遇したことはありませんか？

**「404ページ」とは、「現在、そのページは存在しません」**というときに現れるページです。以前は存在していたけれど現在は削除されたページにアクセスした場合や、間違ったURLを入力した場合などに表示されます。

さて、それではWebサイトを作る側として「404ページ」を考えてみましょう。

情報が古くなったページや終了したイベントの告知など…Webサイト内のページを削除することはありますよね。あるページを削除したことが、素早く検索エンジンに反映されるかというと…そうもいきません。また、内部リンクを削除し忘れることもあるでしょう。

そんな「消し忘れ」のURLがクリックされたとき、以下のようなページが現れたらどうでしょうか。

びっくりして、ページを閉じてしまうのではないでしょうか。あるいは（間違ったURLを入力した場合は）サイト自体が閉鎖されたと思って、訪問を諦めてしまうかもしれません。

しかし、こちらのページでしたらいかがでしょうか。

ユーザーがサイトに留まってくれる可能性がぐっと増えると思いませんか？

このように、「404ページ」をきちんと設定することで、サイトの離脱率を下げることができるのです。さらに、トップへのリンクや、おすすめ記事の表示といった工夫をすると、ユーザーの離脱を防ぐのに役立ちます。

では、この「404ページ」をSTUDIOでどのように設定するかを解説していきます！

エディタ画面左のメニューの「ページ」タブまたは、右上のアイコンから、「追加（プラス）」をクリックします。すると、追加するのは「ページ」か「モーダル」か選択肢が現れるので「ページ」をクリックします。

新規ページに404ページをデザインします。「サイトトップへ」のボタンには、サイトトップへのリンクを設定することを忘れずに！

デザインができたら、画面左上の「タイプ」から「404ページ」を選択しましょう。これで「404ページ」の完成です。リンク切れの際や誤ったURLが入力されたときは、自動的にこのページが表示されます。

おわりに

基本的なSEO対策は、STUDIOを使うときも、他の手段でサイトを作成するときと同じです。

適切なキーワード選定とその配置（キーワードをタイトルに盛り込むなど）、要素のタグ付けと構造化、タイトルやメタディスクリプションなどのページ設定…などをきちんと意識して、それらをSTUIDOのサイトにも設定していきましょう。

STUIDOの有料プランに加入すると、Google Search Consoleとの連携ができるようになります。これに登録すると、「クリック数」やサイト訪問者が「どんなワードで検索したか」がわかるようになります。本格的にサイト運営を始めるときには、積極的に利用していきましょう！