%402x.svg){kind=icon}
1st Daysはこちら→【1日30分/21日】放課後の30分でWebデザイナーになろう！
今日11日目はSEOタイトル、メタディスクリプションの設定をします。
「SEO…ナニソレ」
と思う方も少なからずいると思うので、SEOとメタディスクリプションについてWebflowの使い方から脱線しない程度の解説を行います。
僕も自身もSEOについて詳しいわけではなく、勉強中であるため今回はあくまで上位表示の方法ではなくWebflowでのSEO設定の仕方を解説します。
それでは早速、始めていきましょう。
そもそもSEOとは？
今から設定するSEOについてWikipediaには次のように書かれています。
“検索エンジンのオーガニックな検索結果において、特定のウェブサイトが上位に表示されるよう、ウェブサイトの構成などを調整すること。また、その手法の総称。”(Wikipedia参照)
つまり自分のサイトが検索結果で上に表示されるように設定することをSEOと呼びます。上位表示されるとサイトへの訪問が増え、ウェブサイトとして最も効果を出すことができます。また収益化したい方などは必須です。
SEOの上位表示テクニックには「これ」と決まっているものがなく、「おそらく効果があるだろう」という、経験と予測から判断されるものが多いです。もしSEOに詳しくなりたければ、自分で多方面から知識を取り入れ、実践するしか無いというわけです。
SEOはとても重要、とわかったところでWebflowでSEOを設定していきましょう。今回はあくまでもWebflowでのSEO設定方法であり、上位表示させる方法でありません。
WebflowのSEO設定について
SEO Setting
ページ選択の歯車よりSEOの設定画面を開きます。
開くと「SEO Setting」という項目がありSEOはここから設定。
上から順番に解説します。
①プレビュー
Googleで表示されるプレビューです。SEOタイトル、メタディスクリプションを入力するとここに反映されます。実際に検索された時、どう見えるのかをイメージしやすく、Web制作初心者にはとってはかなり嬉しいです。
②SEOタイトル
検索で表示されるウェブサイトのタイトルを設定します。SEOで上位表示を目指すならキーワードを組み込んだタイトルにすると効果があるみたいですよ。
例：『Webflow ポートフォリオサイト 作成』で検索された時の上位表示を目指すなら【Webflowでポートフォリオサイトを作成する方法 】などがわかりやすくていいですかね。
文字数については言い切ることはできませんが、現在2021年は30〜38文字程度がいいとされているようです。
③メタディスクリプション
SEOタイトルの下に説明文として表示されます。短く端的に、そのページに何が書かれているか説明する必要があります。SEOには直接関係がないらしく、ユーザーの知りたい情報がページ内に記載されているか明記できるとGOOD。
上位表示を目指すためにはコンテンツの充実や正しい見出し設定などページ内部からSEOを意識して制作する必要があります。SEOについて今から勉強するなら、新しい情報を優先して学ぶようにしましょう。
Open Graph Settings
主にOGPと呼ばれる機能の設定ができます。
ここでも上から順番に解説していこうと思います
OGPとは
SNS（Facebook・Twitterなど）でシェアされた際に表示されるタイトルやサムネイル、説明文などを設定すること。
Twitterなどの宣伝や、誰かがシェアしてくれた時を考えて、事前に設定しておきましょう。
特にこだわりがない場合はSEOタイトル、メタディスクリプションと同じでいいと思います。その際は①②にチャックを入れて、サムネイルの設定に移ります。
③サムネイル設定
シャアした時に画像があったほうがアクセス数が伸びると予想できるのでサムネイルを設定していきます。
- 画像が保存されているアセットを開く
- サムネイルにしたい画像を選択してリンクを取得
- OPGの設定に戻り、リンクを③にペースト
リンクをペーストするとプレビューに画像が表示されます。正しく表示されていれば成功です。リンクが欠けたりすると正しく表示されないのでプレビューでしっかり確認しましょう。
SEOを実際に設定する
上記の解説を参考にホームページ・コンタクトページのSEOタイトル、メタディスクリプション、OGPを自分のオリジナルで設定しましょう。
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マスターがいれば僕のサイトも上位表示させるアドバイスがほしいですね…。
さて、次回はデザイン変更を行います。デザインが好きな方にとっては楽しめる回かもしれません。
それでは次回また頑張りましょう。お疲れさまでした。
