パンくずリスト

パンくずリストをリッチリザルト対応にカスタマイズ　構造化データ（microdata形式）記述例

2022年5月27日

Categories | ホームページブログ（WordPress) SEO

パンくずリストをリッチリザルト対応にカスタマイズ

構造化データ（microdata形式）記述例

小難しいことは抜きにして、SEOにヨサげそうなリッチリザルト。

これらは何タイプかあるようですが、手始めにパンくずリストをリッチリザルト対応にしてみます。

リッチリザルト対応にカスタマイズしたページはHCZ TVです。

https://www.hcz.jp/hcz-tv.html

リッチリザルトされてない時は、Google検索結果にはこう表示される。

※キーワードは「ゼファー1100 動画集」にて検索。

リッチリザルトに対応されると上記赤枠（パンくずリスト）が若干変わるようです。

変更・更新されるのには少し日数が掛かるようです。

なので、リッチリザルト対応のページになっている確認は、

Googleが提供する　リッチリザルトテスト

を行なえば直ぐにわかります。　↓

パンくずリストのテスト結果詳細には空白（赤枠）があります。

これらは特にエラーではないので、そのまま放置しても大丈夫です。

元々当サイト（HTML）にはパンくずリストを設置しています。

それらをカスタマイズ（コードを追記）するだけでリッチリザルト対応になります。

では、カスタマイズ前・後のHTMLを見比べて違いを理解して下さい。

以上

カスタマイズ前

<ul>
    <li><a href="https://www.hcz.jp/" title="トップページ">HOME</a></li>
    <li>HCZ TV</li>
  </ul>

カスタマイズ後　（microdata形式）

<ul vocab="https://schema.org/" typeof="BreadcrumbList">
    <li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage" href="https://www.hcz.jp/" title="トップページ">
<span property="name">HOME</span></a><meta property="position" content="1"></li>
    <li property="itemListElement" typeof="ListItem">
<span property="name">HCZ TV</span><meta property="position" content="2"></li>
  </ul>

追伸

４日後ググってみたら、何も変化が見られない。

反映までには比較的日数が掛かるのであろうか？

はたまたGoogle側で認証を拒否った？

念には念にで、最新の「sitemap.xml」をサーバーにアップロードしてみました。

Comment(0) | Trackback(0)

TAGS: SEO / パンくずリスト / リッチリザルト / 構造化データ / 記述例 / microdata | 2022年5月27日 |

DW Question Answer　レイアウトをカスタマイズ　パンくずリスト偏　其の2

2016年11月4日

Categories | ブログ（WordPress) DW Question Answer

DW Question Answer（ワードプレス・プラグイン）のレイアウト「パンくずリスト」を

カスタマイズ其の２。

その1ではトップページのフィルターナビゲージョン的なパンくずリストをカスタマイズ

しましたが、今回は投稿ページのパンくずをカスタマイズ。

デフォルトだとこんな感じ・・・

当自作テーマだと、パンくずリストの文字サイズがでかすぎて、全体的な文字バランスが

悪いです。改良方法は、スタイルシートの変更だけで見栄え良くシンプルしていきます。

バージョンは DW Question Answer1.4.3.4　　いじるファイルはstyle.css

保存先階層は・・・

/wp-content/plugins/dw-question-answer/templates/assets/css/style.css

※ 何かしらstyle.cssに手を加えている場合、変更するところ（行数）が変わります。

どこをいじるかは「 /* Breadcrumbs */ 」で、css内を検索して探してください。

432行～435行

/* Breadcrumbs */
.dwqa-breadcrumbs {
 margin-bottom: 20px;
}

変更後

/* Breadcrumbs */
.dwqa-breadcrumbs {
 margin: 30px 0;
 font-size:12px;
 line-height:26px;
}

.dwqa-breadcrumbs .dwqa-current{ display:none}

.dwqa-breadcrumbs a {
 padding: 0em 1em 0em 2em;
 float: left;
 text-decoration: none;
 color: #444;
 position: relative;
 text-shadow: 0 1px 0 rgba(255,255,255,.5);
 background-color: #ddd;
 background-image: linear-gradient(to right, #f5f5f5, #ddd);
 }

.dwqa-breadcrumbs a:hover{
 background: #33F6F8;
}

.dwqa-breadcrumbs a::after,
.dwqa-breadcrumbs a::before{
 content: "";
 position: absolute;
 top: 50%;
 margin-top: -1.5em; 
 border-top: 1.5em solid transparent;
 border-bottom: 1.5em solid transparent;
 border-left: 1em solid;
 right: -1em;
}

.dwqa-breadcrumbs a::after{ 
 z-index: 2;
 border-left-color: #ddd; 
}

.dwqa-breadcrumbs a::before{
 border-left-color: #ccc; 
 right: -1.1em;
 z-index: 1; 
}

.dwqa-breadcrumbs a:hover::after{
 border-left-color: #33F6F8;
}

.dwqa-breadcrumbs .current,
.dwqa-breadcrumbs .current:hover{
 font-weight: bold;
 background: none;
}

.dwqa-breadcrumbs .current::after,
.dwqa-breadcrumbs .current::before{
 content: normal; 
}

結果的にスタイルの指定が多くなってしまいましたが、利用される方はコピペでね。

レスポンシブにも対応してます。

施したQ&Aサイトは「KAWASAKI Motorcycle Q & A」です。

しまい

Comment(0) | Trackback(1)

TAGS: カスタマイズ / DW Question & Answer / パンくずリスト | 2016年11月4日 |

DW Question Answer　レイアウトをカスタマイズ　パンくずリスト偏　其の1

2016年11月3日

Categories | ブログ（WordPress) DW Question Answer

DW Question Answer（ワードプレス・プラグイン）のレイアウト「パンくずリスト」を

カスタマイズしました。パンくずリストとは、下画像のようにウェブページ内で自分が

今どのページにいるのかを示すリストです。

デフォルトは英語で、日本語化すると下画像のような表示になります。

ただ単語が羅列してるだけで、芸がないように思えます。また現在どの場所のページが

表示されているかさえ分かりづらい。

個々のテーマスタイルシートに依存（文字サイズなど）しているところもあるでしょうが、

私的にカスタマイズしてみました。

参考まで

バージョンは1.4.3.4　いじるファイルはstyle.css　保存先階層は・・・

/wp-content/plugins/dw-question-answer/templates/assets/css/style.css

504行～521行

/* Question Filter */
.dwqa-question-filter {
	margin-bottom: 20px;
}

.dwqa-question-filter span,
.dwqa-question-filter a {
	margin-right: 10px;
}

.dwqa-question-filter a {
	border: none !important;
	text-decoration: none;
}

.dwqa-question-filter a.active {
	border-bottom: 1px solid #ddd !important;
}

変更後

/* Question Filter */
.dwqa-question-filter {
	border-bottom: 1px solid #C0C0C0;
	margin-bottom: 30px;
}

.dwqa-question-filter span{
	display:none
	}

.dwqa-question-filter a {
	border: 1px solid #C0C0C0 !important;
	border-bottom:0 !important;
	margin-left:10px;
	margin-bottom:-1px;
	text-decoration: none;
	font-size:13px;
	padding:2px 10px;
	background-color:#E3E7E4;
	word-break:break-all;
	word-wrap:break-word;
	display:inline-block
}

.dwqa-question-filter a.active {
	border-bottom: 0px !important;
	background-color:#FFFFFF;
}