Webflowを使ったSEO設定の仕方【11Days/Webflow大学】

そもそもSEOとは？

今から設定するSEOについてWikipediaには次のように書かれています。

“検索エンジンのオーガニックな検索結果において、特定のウェブサイトが上位に表示されるよう、ウェブサイトの構成などを調整すること。また、その手法の総称。”(Wikipedia参照)

つまり自分のサイトが検索結果で上に表示されるように設定することをSEOと呼びます。上位表示されるとサイトへの訪問が増え、ウェブサイトとして最も効果を出すことができます。Webで収益化したい方などは必須です。

SEOの上位表示テクニックには「これ」と決まっているものがなく、「おそらく効果があるだろう」という、経験と予測から判断されるものが多いです。もしSEOに詳しくなりたければ、自分で多方面から知識を取り入れ、実践するしか無いというわけです。2023年時点ではGoogleがSEOの概要を公式発表したのでGoogle公式から学ぶ事もできます。

「とにかくSEOはとても重要だ、、」とわかったところでWebflowでSEOを設定していきましょう。今回はあくまでもWebflowでのSEO設定方法であり、上位表示させるためには他にもいくつか対策する必要があります。Webflowでサイト制作する際にするべきSEO対策は以下の記事で紹介しています。
>>

WebflowのSEO設定について

「SEO Setting」をまなぶ

ページ欄の歯車よりSEOの設定画面を開きます。

開くと「SEO Setting」という項目がありSEOはここから設定。
上から順番に解説します。

①プレビュー
Googleで表示されるプレビューです。SEOタイトル、メタディスクリプションを入力するとここに反映されます。実際に検索された時、どう見えるのかをイメージしやすいですね。

②SEOタイトル
検索で表示されるウェブサイトのタイトルを設定します。SEOで上位表示を目指すならキーワードを組み込んだタイトルにすると効果があります。

例
『Webflow　ポートフォリオサイト　作成』で検索された時の上位表示を目指すなら【Webflowでポートフォリオサイトを作成する方法 】などがわかりやすくていいですね。
文字数については言い切ることはできませんが、30〜38文字程度がいいとされているようです。僕は基本32文字以下にしています。

③メタディスクリプション
SEOタイトルの下に説明文として表示されます。短く端的に、そのページに何が書かれているか説明する必要があります。SEOには直接関係がないらしく、ユーザーの知りたい情報がページ内に記載されているか明記できるとアクセスにつながりますね。

上位表示を目指すためにはコンテンツの充実や正しい見出し設定などページ内部からSEOを意識して制作する必要があります。SEOについて今から勉強するなら、新しい情報を優先して学ぶようにしましょう。
>>WebflowでSEOを意識したサイト作り【中級】はこちら

「Open Graph Settings」をまなぶ

主にOGPと呼ばれる機能の設定は上記のSEOsettingのすぐ下にあります。主にSNSなどのシェアの際に使用される設定です。上から順番に解説していこうと思います

OGPとは
SNS（Facebook・Twitterなど）でシェアされた際に表示されるタイトルやサムネイル、説明文などを設定する項目です。ここを設定しないとTwitterなどで画像など表示されません。

①②にチェック
基本はSEOタイトル、メタディスクリプションと同じでいいです。その際は①②にチェックを入れて、サムネイルの設定③に移ります。

③サムネイル設定
シャアした時に画像があったほうがアクセス数が伸びると予想できるのでサムネイルを設定していきます。

• 画像が保存されているアセットを開く
• サムネイルにしたい画像を選択してリンクを取得
• OPGの設定に戻り、リンクを③にペースト

リンクをペーストするとプレビューに画像が表示されます。正しく表示されていれば成功です。リンクが欠けたりすると正しく表示されないのでプレビューでしっかり確認しましょう。

SEOを実際に設定する

Webflow大学を進めている方は上記の解説を参考にホームページ・コンタクトページにSEOタイトル、メタディスクリプション、OGPを自分のオリジナルで設定しましょう。可能であれば自分の名前や他の検索しても出てこないようなタイトルにすることで検索時に表示させることができます。

注意：Googleに表示させるためにはGoogle Consoleにサイトを登録する必要があります。作ってPablishuしただけではサイトは表示されないので注意。

CMSページのSEO設定方法

SEOはページごとに設定する必要があります。一つのページで集客するよりも複数ページで一気に集客したほうが効果が高いのは明らかですよね。

今回はCMSを使用してプロジェクトページを作成したので、SEO設定もCMSを使用して作成します。設定する場所は同じなので、まずはCMSページのSEO設定画面を開きます。

なにやらホームページの時にはなかった「＋Add Field」が表示されています。クリックしてみましょう

そこにはCMSの入力Fieldがズラリと並んでいます。項目を選択するとCMSで入力情報がタイトルタグに反映し、②のように紫で表示されます。

①は手打ちでタイトルを入力しています。手打ちは全ページのタイトルに反映されるので、全ページで表示したい情報は手打ちで行いましょう。

②は各ページごと、CMSで入力された情報が表示されます。いちいちタイトルを入力する必要がなく、とても楽です。

メタディスクリプションの入力フィールドを作成

メタディスクリプションではページ全体の説明をする必要があるので、ページごと記入内容は異なります。毎回SEO設定を開いて記入するのはめんどうなので、CMSにメタディスクリプションの項目を作ってしまうのが手っ取り早いです

ということで、CMSにFieldを追加します。テキストの最大値を設定すると文字数が多くなりすぎないので便利です。

フィールドを作成したら各自オリジナルでメタディスクリプションを作成しましょう。このパートは公式動画では紹介されていないので、各自オリジナルで文章を作る必要があります。練習でポートフォリオサイトを作成している人はCMSで既に入力している「Brief project description」の文言を使用してもOKです。本運用を目指す方はSEOの観点から違う文章を入れて作成したほうが良いです。

文章を入力し終わったらMeta Descriptionに、たった今作成したCMSの
Post Summaryタグを反映させましょう。OGPはすべてコピ−して作成。サムネイルはプルダウンでCMSを選択したら完成です。

まとめ

WebflowでSEOの設定を行う方法を解説しました。SEOはブログや企業サイトを運用する上で、とても重要です。SEOの対策だけで10万円以上の費用がかかるなんてこともよくある話。僕自身SEOでこのブログを運営してきて月に20万ぐらいは収益が安定していきました。それだけSEOは力があるので学ぶ価値ありです。僕に依頼も可能です。

さて、次回はデザイン変更を行います。デザインが好きな方にとっては楽しめる回かもしれません。それでは次回また頑張りましょう。お疲れさまでした。

情報追加はツイッターで告知します。

Webflowの最新情報や使い方は新しくなる度に更新していく予定です。

情報の更新や便利な使い方はツイッターでつぶやきます！

是非フォローお願いします！