• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / TIPS / Yoast SEOのパンくずリストの区切り文字に画像を利用する方法

Yoast SEOのパンくずリストの区切り文字に画像を利用する方法

池田祐太郎 | 2021年11月19日 公開 コメントを書く

Yoast SEOは5百万以上インストールされているWordPressの人気のあるSEOプラグインです。Google検索に最適な構造化データ化されたパンくずリストの設定もしてくれます。

パンくずリストの区切り文字ですが、初期設定では単なる文字になっていますが、デザイン上画像にしたいという場合があります。

ここではその設定方法をご紹介します。

目次

  • 1 Yoast SEOのパンくずリスト設定
  • 2 パンくずリストの区切り文字を画像に変更する
  • 3 FontAwesomeを利用する場合
  • 4 パンくずリストの区切り文字を設定して見た目を整える

Yoast SEOのパンくずリスト設定

冒頭でも書いた通り、Yoast SEOは5百万を超えるインストール数を誇る人気プラグインで、レビューは27,000件以上で平均レビューは4.8と非の打ち所がありません。

Yoast SEO – WordPress プラグイン | WordPress.org 日本語

別のSEOプラグインとして有名なAll in One SEOも3百万インストールされていますが、レビューは2,000件程度で10分の1以下、平均レビューは4.6とわずかですがYoast SEOには届きません。

Yoast SEOは多機能なプラグインですが、便利な機能としてパンくずリストを生成してくれるところです。しかもこのパンくずリスト、ただ見た目だけではなくGoogleが公開している構造化データに適切に則って記述しコードを生成します。

※All In One SEOにも2020年にパンくずリスト機能が追加されました。

パンくずリスト  |  検索セントラル  |  Google Developers

テーマ内に個別で構造化データのマークアップを行うのはなかなかハードルが高いと思いますが、プラグイン一つで対応してくれるのは非常にありがたいです。

パンくずリストの区切り文字を画像に変更する

Yoast SEOのパンくずリストは区切り文字の設定ができるのですが、初期設定ではただの「文字」です。

「パンくず知るとの間の区切り」には文字として「»」が設定されている

見た目にこだわらなければ何でもいいのですが、若干バランスが悪かったり、色や大きさを変更したい場合にCSSを変更するため手間がかかります。

そこでこの区切り文字を画像に設定することで好きなデザインに変更ができます。

設定は簡単で、Yoast SEOの「検索での見え方」→「パンくずリスト」→「パンくずリストの設定」→「パンくずリストの間の区切り」にimgタグを記述します。これにより区切り文字に画像を表示します。altは文字で設定し、widthとheightを指定して大きさを調整します。cssで設定する時用にclassを指定しておくのも便利です。

<img src="/path-to-images/icon.png" alt=">" width="5" height="9" class="separator">
区切りにimgタグを設定するだけ

src="/path-to-images/icon.png" の画像参照先はテンプレートフォルダ内やメディアからアップロードしたアップ先を入力します。

これにより、このような区切り文字が設定できました。

前後に余白を設ける等CSS調整済み

FontAwesomeを利用する場合

ちなみに、ウェブアイコンフォントとして有名なFontAwesomeを利用して区切り文字を設定することができます。

wordpress – yoast breadcrumb image separator – Stack Overflow

function filter_wpseo_breadcrumb_separator($this_options_breadcrumbs_sep) {
    return '<i class="fa fas fa-chevron-right"></i>';
};

// add the filter
add_filter('wpseo_breadcrumb_separator', 'filter_wpseo_breadcrumb_separator', 10, 1);

Yoast SEOが用意するフィルターフックを利用することで初期設定のHTMLを上書きできます。これであれば画像を用意しなくて済むためテーマ側で既にFontAwesomeを読み込んでいる場合にはいいですね。一方、このためだけにわざわざFontAwesomeを読み込む必要はないでしょう。

パンくずリストの区切り文字を設定して見た目を整える

以上、Yoast SEOにおけるパンくずリストの区切り文字に画像を利用する方法でした。

文字のみに比べ、画像を利用することで表現の幅が大きく広がります。画像は表示ピクセルよりも2倍程度の大きさの画像を用意することで、高解像度モニターやデバイスにおいても区切り画像が粗くならず自然に見えます。

Yoast SEOのパンくずリストは構造化データに対応しているSEOとしても効果的なパンくずリストで、特定のページに表示させない、カスタマイズも容易のため、パンくずリスト導入の際はご検討をおすすめします。

メールコンサルティング
WordPress保守管理サービス

Filed Under: TIPS 関連タグ:SEO, パンくずリスト

池田祐太郎

WordPress の構築・保守を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在は WordPress の保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

I agree to these terms.

この記事と関連する記事

コンテンツマーケティングで検索順位チェックツールをおすすめする理由
2022年8月30日
タグ: SEO
カテゴリー: 仕事のこと
クラウドの検索順位チェックツール、Nobilistaを使ってみた感想(おすすめ)
2022年6月7日
タグ: SEO, ツール
カテゴリー: 仕事のこと
ウェブディレクターが考えるWELQ問題においての考察
2016年12月8日
タグ: SEO
カテゴリー: 雑感

人気記事

  1. git pull してもエラーが出てファイルが反映されないときの対処法
  2. 同一サーバー上に構築するWordPressのテスト環境の作り方
  3. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  4. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  5. [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた
  6. WordPress において PHP 8.1 に更新していいかどうか検証

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • 外部のプロフェッショナルによる WordPress サイトの保守・運用:安心と安全性を手軽に手に入れる方法
  • [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた
  • WordPress のクロスサイト・スクリプティング被害にあった事例を共有します
  • メール作業の生産性を向上させる最低限覚えておくべき Gmail のショートカットキー
  • タブ固定とタブ一発アクセスのショートカットキーの組み合わせでブラウザ作業の生産性を向上

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

Android BtoC CMS css elementor git google workspace Gutenberg HTML iPhone jQuery Mac MAMP php SEO SNS ssh SSL Sublime Text Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウド クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン ツール ブログ プラグイン マーケティング リニューアル 保守管理 改ざん 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2023 high five create All rights reserved.