- パンくずリストとは
- パンくずリストとは、SEO対策にも必須とされるナビゲーション機能です。Webflowでは3パターンの方法で作成でき、Googleに「この部分はパンくずリストだ」と伝える構造化まで行うことで、SEO対策として効果を発揮します。
※この記事の手順・画面は2022年時点のものです。Webflowの現行UIでは名称・配置が変わっている場合があります。
こんな疑問に答えます｡
Webflowでパンくずリストを導入する方法は3パターンあります｡
- CMSを使って導入する方法
- カスタムコードを使って導入する方法
- CMSとカスタムコードを使う方法【一番オススメ】
順番に解説していきます｡
まだWebflowに登録していない方はこちらからどうぞ↓
WebflowのCMSを使ってパンくずリストを導入する方法
Webflowの公式ページに記載してある方法でパンくずリストを作成します｡
Webflow公式は｢こちら｣
手順は以下の通り
- 【手順1】ショーケースから引用
- 【手順2】CMSの部分を自分のCMSに変える
【手順1】パンくずリストをWebflowのショーケースから引用
Webflow公式ページの最後に記載してあるショーケースから
ショーケースからサイトを開き、パンくずリスト部分をコピーして自分のサイトに貼り付けましょう｡
【手順2】CMSの部分を自分のCMSに変える
紫色の部分を変更します｡
リンク､文字を自分CMSに置き換えましょう｡
メリット・デメリット
メリットは簡単だということ｡デメリットはSEO対策になりません｡
理由としては構造化できていないから｡
構造化とはGoogleに｢この部分はパンくずリストだよ｣と伝える機能です｡
構造化したパンくずリストを作成するならカスタムコードを使用しましょう｡
Webflowのカスタムコードを使ってパンくずリストを作成する方法
カスタムコードを使ってパンくずリストを作成します｡
CMSを使用していない方はこの方法でパンくずリストを追加しましょう｡
手順は以下の通り
- 【手順1】パンくずリストのコードをWebflowにコピペする
- 【手順2】パンくずリストのコピーを編集
- 【手順3】カスタムコードをスタイルする
【手順1】パンくずリストのコードをWebflowにコピペする
サルワカさんのブログを参考にパンくずリストのコードをコピーし､
Webflowのカスタムコードにペーストしましょう｡
構造化されたコードを紹介しているのでコピペするだけで構造化完了です｡
【手順2】Webflowのカスタムコード内でパンくずリストのコードを編集します｡
スタイルを変更しやすいように､コピーしたCSSコード内の｢文字色｣｢margin｣を削除｡
コード内の該当の箇所に｢URL｣｢名前｣を入れましょう｡
※絵文字フォントが使えない場合は記事内の｢FontAwesomeを使わない場合｣からコードをコピーします｡
【手順3】カスタムコードをスタイルする
Webflowに入れたカスタムコードの上にDivブロックを入れてパンくずリストのスタイルをお好みで変更しましょう｡
※リンクの文字色のみ｢ALL LINK｣､またはカスタムコード内で編集可能｡
メリット・デメリット
メリットは構造化できること｡CMSなしなので管理費が安くなる
デメリットは全ページに手動で書き込む必要があります
WebflowのCMSとカスタムコードを使ってパンくずリストを自動作成する方法【一番オススメ】
カスタムコード内でCMSを使う方法です｡
一つ作成すれば全ページで一気に作成でき､構造化も可能です｡
手順は以下の通りです｡
- 【手順1】パンくずリストのコードをWebflowにコピペする
- 【手順2】パンくずリストのコピーを編集
- 【手順3】パンくずリスト内の｢名前｣｢URL｣をCMSを使って表示する
- 【手順4】パンくずリストのスタイルを変更する
順番に解説します｡
※Webflowのカスタムコードを使ってパンくずリストを導入する方法とほとんど同じです｡
【手順1】パンくずリストのコードをWebflowにコピペする
サルワカさんのブログを参考にパンくずリストのコードをコピーしましょう｡
構造化されたコードを紹介しているので､カスタムコードにコピペするだけで構造化完了です｡
【手順2】パンくずリストのコピーを編集
コピーしたCSSコード内の｢文字色｣と｢margin｣､を削除｡
※絵文字フォントが使えない場合は記事内の｢FontAwesomeを使わない場合｣からコードをコピーしましょう｡
【手順3】パンくずリスト内の｢名前｣｢URL｣をCMSを使って表示する
｢URL｣｢名前｣を入れる際にCMSを使用します｡
カスタムコードの画面の右上に｢+Add Field｣とあるのでそこから該当のものを選択しましょう｡主に使用するのは｢Name｣｢Slug｣です｡
✓注意
上記画像のように｢Slug｣の前に､Slug以外のURLを記載しましょう｡
【手順4】パンくずリストのスタイルを変更する
Webflowに入れたカスタムコードの上にDivブロックを入れてパンくずリストをスタイルします｡
リンクの文字色のみ｢ALL LINK｣､またはカスタムコード内で編集しましょう｡
Webflowに作成したパンくずリストが構造化できているか検査する
Googleの検査ツールを使ってパンくずリストが構造化に成功しているか確認しましょう｡
- Webflowでサイトを公開してURLをコピー｡ ↓ Googleの検査ツールで検査
で完了です｡上手く構造化できていれば､パンくずリストが検出されます｡
｢名前のないアイテム｣と表示される
｢名前のないアイテム｣と検出されますが､これは特に問題ないらしいので放置でOK
まとめ：Webflowにパンくずリストを追加するなら｢カスタムコード＋CMS｣
Webflowでカスタムコードを追加する方法を解説しました｡
カスタムコード内でCMSが使用できるようになったことで､さらに表現の幅が広がりましたね｡
パンくずリストはSEO対策にも必須の機能なので是非追加してみてください｡
当ブログでは他にもWebflowの使い方を紹介しています｡
またWebflowでの制作代行なども受けていますので是非ご覧ください｡
まだWebflowに登録していない方はこちらからどうぞ↓
よくある質問
Webflowでパンくずリストを作成する方法は何がありますか？
3パターンあります。CMSを使う方法、カスタムコードを使う方法、CMSとカスタムコードを併用する方法です。一番のオススメはCMS＋カスタムコードで、一つ作成すれば全ページで一気に作成でき、構造化も可能です。
WebflowのCMSだけで作ったパンくずリストはSEO対策になりますか？
なりません。理由は構造化できていないからです。構造化とはGoogleに「この部分はパンくずリストだよ」と伝える機能で、構造化したパンくずリストを作成するならカスタムコードを使用しましょう。
Webflowのパンくずリストが構造化できているか確認する方法は？
Webflowでサイトを公開してURLをコピーし、Googleの検査ツールで検査します。上手く構造化できていればパンくずリストが検出されます。「名前のないアイテム」と表示されても特に問題ないので放置でOKです。
カスタムコードだけでパンくずリストを作るメリット・デメリットは？
メリットは構造化できること、CMSなしなので管理費が安くなることです。デメリットは全ページに手動で書き込む必要がある点です。CMSを使用していない場合はこの方法で追加しましょう。
Webflowのパンくずリストのスタイルはどう変更しますか？
カスタムコードの上にDivブロックを入れて、パンくずリストのスタイルをお好みで変更します。リンクの文字色のみ「ALL LINK」またはカスタムコード内で編集可能です。
