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

くりたまさと
Masato Kurita
栗田将人
Webflowでパンくずリストを作成する方法【SEO対策/構造化】
Webflowでパンくずリストを作成する方法【SEO対策/構造化】

Webflowでパンくずリストを作成したい
Webflowでパンくずリストの構造化できる?

こんな疑問に答えます。

Webflowでパンくずリストを導入する方法は3パターンあります。

  • CMSを使って導入する方法
  • カスタムコードを使って導入する方法
  • CMSとカスタムコード使う方法【一番オススメ】 

順番に解説していきます。
まだWebflowに登録していない方はこちらをからどうぞ↓

WebflowのCMSを使ってパンくずリストを導入する方法

Webflowの公式ページに記載してある方法でパンくずリストを作成します。
Webflow公式は「こちら

手順は以下の通り

  • 【手順1】ショーケースから引用
  • 【手順2】CMSの部分を自分のCMSに変える

【手順1】パンくずリストをWebflowのショーケースから引用

Webflow公式ページの最後に記載してあるショーケースから
サイトをコピーしてパンくずリストをコピーして自分のサイトに貼り付けましょう。

【手順2】CMSの部分を自分のCMSに変える

【手順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」です。

+Add Field

✓注意

上記画像のように「Slug」の前に、Slu以外のURLを記載しましょう。

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

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

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

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

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

「名前のないアイテム」と表示される

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

まとめ:Webflowにパンくずリストを追加するなら「カスタムコード+CMS」

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

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

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

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

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

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

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

2023年1000万チャレンジ中↓

併せて読むとおすすめの記事▼

WebflowでSEO対策をする基礎知識

Webflowは、ビジネスオーナーやWebデザイナーにとって非常に便利なプラットフォームです。しかし、WebflowサイトのSEO対策を怠ると、ビジネスにとって大きな損失につながる可能性があります。この記事では、Webflowでの基本的なS

Read more...

WebflowでSEO対策する方法【中級編】

Webflowで基礎知識、基礎SEO設定が終わったらやることをまとめました。是非ご覧ください。

Read more...

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

WebflowでSEOの設定方法を解説します。またSNSでのリンクシェアの設定方法も解説。WebflowはSEO設定も簡単できます。未経験者を対象に解説をしているので「SEOとは」から解説しています。

Read more...
ご質問ありがとうございます。
確認次第、返信致しますので、
少々お待ち下さい!
エラーが発生致しました。もう一度お試し頂くか、Twitterより連絡ください。