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専門家として事業を行っている栗田自身が実際に使用し、便利だと感じたWebflowの使い方、事業計画、経験と過程について発信しています。不要なら1秒ですぐ解読できます。次は売上1000万を目指します。

ご登録ありがとうございます。次回の更新まで少々お待ちください。
なにかしらエラーがでています。治らない場合はXまでご連絡ください。
くりたまさと
Masato Kurita
栗田将人

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

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...
🎉【期間限定】無料キャンペーン実施中9/1まで
Beta

無料のWebflow
30分間レクチャー実施中!!

期間限定‼️
Webflowでこのポップアップの作り方わかりますか?このレクチャーではWebflowの使い方、Webflow導入後のサポートなどWebflowに関する質問はOK!完全無料で実施しているのでお気軽にお申し込みください。9月1日まで実施中
※ビデオ通話(Google meet)を使用します。
※予告なく、内容の変更やキャンペーンが終了する場合がございます。
※機密事項などを取り扱う際は事前にお申し付けください。内容はYoutubeなどSNSに 露出する場合がございます。お申し付けいただければ露出はしません。
※レクチャー時間は一組30分までとさせていただきます。それ以上は別途ご相談、ご依頼ください。30分の中に自己紹介や案件の相談時間などは含まれていませんので慌てずまずは自己紹介から行いましょう。
※自己紹介など含め45分を想定しています。
※ご予約機能はGoogleカレンダーで作成しています。
※こちらはベータリリースとして行っています。
※Webflowを学ぶ目的、サイト制作依頼の相談、Webflowサポートのお試し、以外の目的でのお申し込みはおやめください。
以上の注意事項の他に必要な情報は都度更新、変更していきます。
Dashboard mockup