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の使い方がどう調べてもわからない?それならWebflow公式に質問してみましょう。本記事ではWebflow formsの使い方、公式サポートへのお問い合わせ方法などWebflowの使い方を質問する方法をまとめてみました。

Read more...

【月1200円だけw】Webflowの新しい料金プランをケース別に解説

この記事では使用者のケースに合わせて最適な料金プランを紹介していきます。少し前のWebflowであれば「まずはアカウントプラン」でしたが今後、はまずはサイトプランに変わっていきます。

Read more...

【デメリット】ノーコードで作ったWebサイトは消されるかも?!

結論:ノーコードで作成したWebサイトは突然消えてしまう可能性がある。なぜそのような事が起きるかは以下のとおりだ。自分が作成したWebサイトをツール管理者が変更できる場合。ツールを変更する場合サービス終了の場合順番に解説していこう。

Read more...
くりたまさと
Masato Kurita

大学卒業後、セブ島とオーストラリアに1年間、語学留学。

現在は、Webflow専門のウェブサイト制作・SNS運用代行、MEO対策などを行っています。

#
Webflow 使い方
アフィリエイト
ご質問ありがとうございます。
確認次第、返信致しますので、
少々お待ち下さい!
エラーが発生致しました。もう一度お試し頂くか、Twitterより連絡ください。