Webflowでパンくずリストを作成する方法【SEO対策/構造化】

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｣の前に､Slu以外のURLを記載しましょう｡

【手順4】パンくずリストのスタイルを変更する

Webflowに入れたカスタムコードの上にDivブロックを入れてパンくずリストをスタイルします｡
リンクの文字色のみ｢ALL LINK｣､またはカスタムコード内で編集しましょう｡

Webflowに作成したパンくずリストが構造化できているか検査する

Googleの検査ツールを使ってパンくずリストが構造化に成功しているか確認しましょう｡

• Webflowでサイトを公開してURLをコピー｡
  ↓
  Googleの検査ツールで検査

で完了です｡上手く構造化できていれば､パンくずリストが検出されます｡

｢名前のないアイテム｣と表示される

｢名前のないアイテム｣と検出されますが､これは特に問題ないらしいので放置でOK

まとめ：Webflowにパンくずリストを追加するなら｢カスタムコード＋CMS｣

Webflowでカスタムコードを追加するを方法を解説しました｡
カスタムコード内でCMSが使用できるようになったことで､さらに表現の幅が広がりましたね｡
パンくずリストはSEO対策にも必須の機能なので是非追加してみてください｡

当ブログでは他にもWebflowの使い方を紹介しています｡
またWebflowでの制作代行なども受けていますので是非ご覧ください｡

まだWebflowに登録していない方はこちらをからどうぞ↓

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

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

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

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