blogger を構造化データテストツールでチェック!

チェックしてみました

雪の積もった高い山

いま使っているテンプレートは、Vaster というものです。
これは、blogger には珍しい日本語テンプレートで、しかもテンプレートの作者さんがあらかじめSEO対策をしていてくれているもののようなのです。
そういうテンプレートらしいです。

SEO対策って、実際にどんなものなのか気になります。
ちょっと確認してみましょう。
ということで、グーグルの構造化テストツールで、ブログのマークアップをチェックしてみました。

チェックする


はい、テストツールはこちらです。
グーグルサーチコンソールのなかにあるツールですね。

Structured Data Testing Tool | Google Developer

記事のURLを入れて、チェックしてみると……出ました。
パンくずリストが、ちゃんとマークアップされていますね。
Breadcrumb という項目がパンくずリストです。

ほかの細かいところはいいです。
パンくずリストが大事なのです。

これがマークアップされていると、検索結果の表示が変わりますからね。
なんとなく見栄えが良くなります。
ほかのところもいろいろマークアップされているようです。
さらにやりたいなら、グーグル+のバッヂをつけるとか、マークアップ対策はいろいろあるようですが、とりあえずは満足です。

失敗

スフィンクスの横顔


ほかにも触ったところがあります。
ブログタイトルとその説明の中央寄せです。

これは text-align でどうにかなりますよね。
検索して見つけたサイトに書いてありました。
CSSのそれらしいところに挿入してみますね。

すぐにできましたよ。
……と思って、ブログを確認していたのですが、どうやらうまくいってなかったようです。
個別記事のページだけ、ブログタイトルの中央寄せができないんです。

うーん、これは、たぶん個別記事のページだけは、ブログタイトルの扱いが変わっているようですね。
そんな気がします。
SEO対策として、ブログタイトルの<h1>タグをはずしているのかもしれないですね。
なんかそういうことをするといいと聞いたことがあります。

ブログタイトルの中央寄せは失敗しました。
でも、それほどこだわるところでもないので、いいでしょう。
余計なことはしないほうがいいっぽいです。

そのほか


そのほかにもちょこちょこいじってみました。
ちょっとずつカスタマイズして、思ったように反映されていると楽しいですね。

メタタグ


メニューの設定>検索設定でメタタグを設定できるじゃないですか。
これを設定しておくと、個別の記事の検索向け説明を書き込むことができるようです。
これもSEO対策ですね。

ただ、このメタタグって、ほかのブログでもいじったことがあるんですよ。
そしたら、ちょっと面倒なことになりました。

メタタグに何かを書き込みます。
すると、グーグルサーチコンソールの構造化データで大量のエラーが発生することがあるみたいです。
自分も「重複するメタデータ」についてのエラーが出ました。
トップページとか、アーカイブページとか、ぜんぶが同じメタタグになるのが、よくないみたいです。(たぶん……)

blogger で、その現象が起きるのかわかりません。
ただ、エラーがでると面倒くさいので、とりあえず空白にしておきます。
とりあえず、これで、個別の記事の検索向け説明も書き込めるようになりましたよ。
気が向いたら書き込んでみます。

ブログの見た目・本文

本文の色をちょっとグレイにしました

body{
 
   background-color: #fdfdff;  /*  全体の背景色  */
   margin:0;
   color: #333333;
   font-size:18px;
   line-height:26px;
   font-family: "メイリオ", sans-serif;
}

この黄色の部分ですね。

サイドバー・ヘッダーナビゲーション


それから、サイドバーのタイトルの下に線をいれました。
ヘッダーナビゲーションの下にも線を入れました。

/*   サイドバー見出し   */
.sidebar h2,h3,h4{
   padding:0 0 0 5px;
   font-size:18px;
   font-weight:700;
   border-bottom:3px solid #666;
}

こんな感じですね。

あと、ヘッダーナビゲーションのリストにあたらしい項目を追加するのは、外部リンクを追加というところからやるんですね。
どうすればいいのかわからなくてしばらくさまよっていました。
ちゃんと解説を読めばよかったですね。
書いてありました。

記事のタイトル


さらに記事タイトルの下にも線を入れました。
線を入れるのは簡単なので、だいたい線で済ませてます。
border-bottom で線の太さを指定するくらいですもんね。
自分でもできます。

ガジェット


デフォルトで設置されているガジェットがあります。
このなかで、Contributors と Atrribution は必要あるのかどうかということを検討中です。
プロフィールは、まだ内容がないし、いらないかもですね。

あと、フッターの Navbar は確実にいらないですね……。
これ使っても、外人さんと「こんにちは」するだけですよね……。

アクセス数カウントと関連記事


統計>概要から自分のページビューをカウントしない設定にしました。
こういうのって、カウントしないといっておきながら、なんだかんだでカウントしちゃうんじゃないかと疑っています。
まあ、とりあえずやっておきます。

関連記事はまだ表示されていないですね。
これは記事数が少ないからっぽい気がします。
もう少し様子を見ましょう。

あとやるとしたら、フィード関連のボタンでしょうか。
SNSのボタンもカスタマイズしてみようかと思ったりしています。

その後、成功


ブログタイトルの中央寄せなんですが、うまくいきました。
いろいろCSSの解説サイトを見て、勉強しました。
プログラムのことはまったくわからないのです。
でも、時間をかけて、なんとかなりそうな方法を見つけました。

個別記事ページでは別の処理


まず、個別記事のページだけ、ブログタイトルが別の扱いになっているのは間違いなさそうです。
それぞれのページのソースを見くらべていきます。
すると、個別記事のページではブログタイトルに<h1>タグがついていません。

これは、<h1>タグの数を絞ったほうがSEO的にいいということで、しているのだと思います。
個別記事ページでは記事のタイトルが一番大事ですからね。
そちらに<h1>タグをつけて、ブログタイトルからはずすというわけです。

いままでの経緯


そして、いままではCSSのヘッダー部分のコードをいじって中央寄せをしようとしていたのです。
しかし、いじっていたクラスは、ただの header-title ではなくて header h1 クラスだったのです。

個別記事ページのブログタイトルは h1 がついているクラスではないです。
だから、ここをいじってもどうにもならない。
なんかそんな感じっぽいです。(たぶんの話です)

ではどうするのか


とにかく h1 をはずして、ついでに title もなしで、header で指定してみました。

.header{
   text-align:center;
}

という感じです。
すると、header 内のすべてのテキストが中央寄せになりました。
タイトルだけじゃなくて、ブログの説明まで、一発で中央寄せになりましたよ。

うーん……?
ちょっと思ってたのと違いますが、これでいいんじゃないかと思います。
これやってると、ヘッダーナビゲーションの挙動がおかしくなったりするのでしょうか?
しばらく様子を見てみます。

サイトマップを送信しました

花に挟まれたベンチ


グーグルサーチコンソールに、このブログのサイトマップを送信しました。
サイトマップに送るURLは、

/atom.xml
/sitemap.xml

ですね。
ほかにもいろいろありそうですが、それは見つけたら順次追加していきましょう。

フィードボタンの設置


フィードボタンもサイドバーに置いてみましたよ。
これはかなり簡単で、RSSを取得して、ボタン作成サイトにコピペするだけです。
まずはRSSフィードを調べましょう。

RSSフィードのURL


フィードのURLはこちらの記事に書いてありました。

[Blogger] 今すぐ知りたい人へ!RSSフィードのURLを確認する方法 | Bloggerをカスタマイズするときに見るブログ

ちなみにこのフィードはサイトマップに登録することができます。
たくさん登録しても、意味があるのかわかりませんが、とりあえずやっておきました。

ボタンの作成


フィードのURLさえわかれば、ボタンを作るのは簡単です。
まず、こちらのサイトに行きます。

feedly. your news. delivered.

英語のサイトですが、書いてあることは簡単です。
ボックスにURLを入れるだけです。
そしたら、下にコードが出てきます。

注意点としては、コードが出てくるまで少し時間がかかるということです。
待っていれば出てきます。

ほかには?


プロペラ式軽飛行機


ほかにもいろいろあります。
やったことと、気づいたこと。
ここにまとめておきます。

新着記事の表示など


新着記事の表示をしたいです。
blogger では、公式がジェットのなかには新着記事のガジェットがないですよね。
どうしたらいいんでしょうか。

というのを調べました。
方法はありますよ。
フィードのガジェットに自分のブログのURLを入れると、新着記事を表示してくれます。
簡単ですね。

でも、これはみばえがよくないですよね……?
表示が遅いし、これならやっぱりいらないかもです。

そのほかのガジェット


それから、フォロワーガジェットの設置をしました。
これは、登録するとダッシュボードに表示されるやつですよね……?
ためしに置いてみています。

あとはあれこれガジェットをフッターに移動です。
フッターのアイテムの並び方がよくわからないですが……。
まあ、いいでしょう。
じゃまなものは全部フッターに放り込んじゃいましょう。

豆知識

blogger では、文章を書いてから見出しにできます。
先に選ばなくてもいいんですね。
わりと最近気づきました。

これは、リンクもですね。
文章の範囲を選択して、それから見出しを選ぶとOKです。

ブログの探し方


「site:」で自分の blogger ブログを探すときは、「.jp」じゃなくて、「.com」で探すと見つかります。
これは最初のうちだけかもしれませんが、いまのところそうなっています。
知らずに探すと焦ることになります。

わからない


わからないことも残っています。
わからないということすら忘れる可能性もあるので、これも書いておきましょう。

共有?


他のサイトのコンテンツを共有する - Blogger ヘルプ

この共有ってなんなんでしょう?
リツイートみたいなことができるのでしょうか。
フィードをブログに載せるだけなんでしょうか。
ヘルプを読んでもわかりません。

アドセンス


メニューのなかのアドセンスの項目の登録ボタンが機能していないですね。
押せないです。

これはブログを作ってしばらく経つと押せるようになるみたいです。
ただ、すでにアドセンスアカウントを持っているんですよね。
こうなってくると、もうよくわかりません。
貼り付けちゃっていいのでしょうか。
(まずそうですよね)

その後、ボタンが押せるようになりました。

blogger でアドセンスを使う

僕の場合は2ヶ月でしたね。
いまはかなり短縮されているようです。

div タグ


記事を書いていると、あいかわらず div タグが増殖しています。
これはなぜなのか……。
地味に気になります。

divタグの意味 | HTMLとSEOの事情

軽く検索してみましたが、div タグは意味のないタグだよ、と書いてある記事ばかりでした。
もう、消しちゃいましょう。
ちなみに、br タグと p タグの使い分けはよくわかっていません……。
スポンサーリンク

投稿サイト

小説家になろうに、猫のエッセイを投稿しています。
かわいいです。
うちのかわいいかわいい猫
このブログでも、一部を掲載しています。

アルファポリスでは、ファンタジーの連載を初めてみました。
気軽に読んでみてください。

ランキング

スポンサーリンク