ウェブ屋の備忘録

日々の業務で工夫していることや便利なツール、新たに得た知識などを共有しています。

サーチコンソールの検索アナリティクスでアクセスアップのための改善ポイントを探る

f:id:webbibouroku:20180419201047j:plain

サーチコンソールでは、サイトへの訪問があったキーワードの表示回数やクリック数、クリック率、平均掲載順位が確認できます。
それらの数字を使って、アクセスアップのための改善点を探っていきたいと思います!

サーチコンソールで、表示回数やクリック数を確認する

まずはサーチコンソールでキーワードの表示回数、クリック数、クリック率、平均掲載順位を確認していきます。

 

f:id:webbibouroku:20180419195754p:plain

サーチコンソールの「検索アナリティクス」に進みます。

 

f:id:webbibouroku:20180419195806p:plain

  • クリック数
  • 表示回数
  • CTR
  • 掲載順位

すべてにチェックをつけます。

これでキーワードの表示回数、クリック数、クリック率、平均掲載順位が確認できるようになりました。

アクセスアップのための改善点を探る

表示回数が多いのにクリック数が少ないキーワードを見ていきます。
表示回数が多い = たくさん検索されている、ということ。
せっかく表示回数が多いのにクリック数が少ないのはもったいない。そんな数字を見ていきます。

f:id:webbibouroku:20180419195818p:plain


表示回数順に並び替えます。
そしてクリック率の低いキーワードで実際に検索して、どんな見え方になっているかを調査します。

例えば僕は、以下のような改善ポイントを見つけました。

順位が低い

上位に表示されているほうがクリックは多くなるはずです。
上位表示できるようにページを最適化できないか検討します。

  • そのキーワードをタイトルやディスクリプションに盛り込む
  • そのキーワードの答えをテキストでページ内に追加する
  • そのキーワードの完全一致でリスティング広告を出す

といったところでしょうか。

タイトルを変更する

似たようなタイトルが並んでいるようであれば、他と差がわかるようなタイトルに変更。
よりユーザーにクリックしてもらえるようなタイトルにします。

思ったページが表示されていない

もっとふさわしいページがあるのに、なぜか別のページが検索結果に表示されている、といった状況もありました。

  • そのページの最適化を行う
  • なければそのキーワードにふさわしいページを新規で作成する
  • 表示されてしまっているページに、正しいページへのリンクを設置する

などで対処します。


ぜひ数字をじっくり観察して、改善ポイント見つけてみてください!

マーケティング/検索エンジンに強くなる Google Search Consoleの教科書

マーケティング/検索エンジンに強くなる Google Search Consoleの教科書

 

サーチコンソールの「構造化データ」を作成する ~通販サイトなどの商品ページ編~

構造化データを作成する〜通販サイトなどの商品ページ編〜

通販サイトの商品ページで構造化データを作ってみたいと思います。

構造化データとは何か

正直なところ、よく理解できていません。
Google検索エンジンに対して、「これが商品名です」「これが商品の画像です」「これが値段です」ということをお知らせするためのデータのようですはあるのですが。

検索結果に、画像のサムネイルや「価格:¥○○○○」というような表示がされるようになるのかな、と思っていたのですがそうでもないようです。

ただまあ、「これが商品名です」「これが商品の画像です」「これが値段です」という内容をGoogleに理解してもらうのには一役買ってくれているのではないか、と踏んでいます。

構造化データをつくる

Google Search Consoleの「構造化データ マークアップ支援ツール」を使います。

ページ上の要素をクリックして「これが商品名」「これが画像」と指示していき、サンプルのHTMLデータを作ります。

そしてそれをテンプレートを反映することで構造化データをつくります。

以下、手順です。

1. 構造化データ マークアップ支援ツールを開く

構造化データ マークアップ支援ツール

https://www.google.com/webmasters/markup-helper/u/0/より、構造化データ マークアップ支援ツールにアクセスします。
Google Search Consoleのアカウントでのログインが必要です。

2. データタイプの選択とURLの設定

「構造化データ マークアップ支援ツール」にアクセスできたら、データタイプを選びます。

データタイプは、

  • イベント
  • ソフトウェア アプリケーション
  • テレビ番組のエピソード
  • テレビ番組のエピソード(レーティングあり)
  • レストラン
  • 商品
  • 地域のお店やサービス
  • 映画
  • 書評
  • 記事

から選択できますが、今回は通販サイトの商品ページの構造化データをつくっていきますので「商品」を選択します。

構造化データ マークアップ支援ツール手順1

そして、商品ページのURLを貼り付けて、「タグ付けを開始」をクリック。

3. ページ上の要素をクリックし、タグ付け

構造化データ マークアップ支援ツール手順2

左側にページの見た目、左側にタグが表示されます。
ページの要素を選択して、タグ付けをしていきます。

f:構造化データ マークアップ支援ツール手順3

まずは商品名をドラッグで選択、するとポップアップで「名前」「画像」「説明」etcといったタグ名が表示されます。
これは商品名なので「名前」を選択します。

構造化データ マークアップ支援ツール手順4

つぎにメインの商品画像をクリック、タグは「画像」を選択。

商品説明文を「説明」とし、価格を選択を「販売情報」>「料金」としました。

その他タグ付けできる要素がページ上にあれば、やっておくと良いと思います。

4. HTMLを作成

構造化データ マークアップ支援ツール手順5

タグ付けが完了したら、「HTMLを作成」ボタンをクリックします。

構造化データ マークアップ支援ツール手順6

今回はHTMLでタグを指定していくので「JSON-LD」となっているところを、「microdata」に変更。

構造化データ マークアップ支援ツール手順7

すると、構造化データを作成するために追加されたHTMLタグのところがハイライトされます。

ハイライトされた箇所を商品ページのテンプレートに反映していきます。
(商品ページのテンプレートへの反映方法は割愛させていただきます!すみません)

構造化データのチェック

作成した構造化データをチェックするツールもあります。

https://search.google.com/structured-data/testing-tool/u/0/

構造化データ テストツール

チェックしたいページのURLを入力し、「テストを実行」をクリック。

構造化データ チェック結果

左側にhtml、右側にチェック結果が表示されます。

私の場合「price」の項目にエラーが出ていました。

どうやら、「price」の項目には数字しか入れられないようなのです。
タグ付けをした際「円(税抜)」という文字が入ってしまい、それがエラーになっていたようでした。
3桁区切りのカンマとかも入れられないようです。

Color me shopを利用した通販サイトだったのですが、Coloe me shopでは値段を数字のみ出力することができないようだったので、構造化データの「price」の設定は削除しました。
もう一度チェックツールにかけると、エラーは消えていました。

「構造化データ マークアップ支援ツール」でのタグ付けの際、「price」は必須の項目でしたが、削除してもエラーにはならないようです。

Googleへの反映

構造化データが、およそ5日くらいでGoogleへ認識されるかと思います。
サーチコンソールにて確認します。

「検索での見え方」 > 「構造化データ」
と進みます。

サーチコンソール 構造化データ画面

認識されたページ数とエラーが表示されますが、チェックツールでエラーが出ていなければエラーはないと思います。

300以上の商品があるサイトでしたが、5日後に約100件、その2日後にさらに50件という感じで、だんだんと認識されていくようでした。


「豚の角煮」で検索をすると、こんな感じの検索結果。

「豚の角煮」Google検索結果

構造化データをつくることで、こんな風に商品のサムネイルが表示されることを期待していたのですが、そうはならないようです。


また次回は、ブログやウェブマガジンなどの「記事」の場合の構造化データのつくり方を書く予定です。

 

できる100の新法則 Google Search Console これからのSEOを変える 基本と実践 できる100の新法則シリーズ

できる100の新法則 Google Search Console これからのSEOを変える 基本と実践 できる100の新法則シリーズ

 

emmetを使いはじめました

emmetを使いはじめました

 

いまさらですがemmetを使いはじめました。

慣れないemmetを使うより自分で打ち込んだほうが速いと思っていました

かつて、すごく便利な書き方があるよと話題になり、私も導入をしてみたことがあります。
当時はZen codingなどという呼ばれ方をしていました。

そのころ、普段はバリバリの手打ちでコーディングをしておりました。
Zen codingを使ってみると、どうもいつものリズムで打つことができず、こんなの使うより全部手打ちの方が速いにちがいない、と早々にZen codingを使うのをやめました。

emmet使い始めました。

最近はコーディングといった作業をほとんどやらなくなりました。
たまたま珍しくコーディングの作業をすることになり、いろいろ最新の便利なコーディング方法などを収集しているとemmetが出てきました。

以前の記憶から、あまり劇的に速くなるイメージもなかったのですが、せっかくなので使ってみることにしました。

実際使ってみるとめちゃくちゃ便利ですね。
速いです。

以前、全部手打ちの方が速いと思ったのは、思い込みだったのでしょう。
慣れたリズムでコードを打ち込んでいるのがスムーズで速いと思いこんでいたのだと思います。

HTML/CSSを爆速コーディング Emmet入門 第3回 エディタのコードヒントよりも早い!EmmetのCSSの記法とは?
の記事にも、コードヒントとemmetを比較したGIF動画がありますが、一目瞭然ですね。

emmetの導入

私はエディタにbracketsを使っており、以下の記事を参考に導入しました。

HTML/CSSを爆速コーディング Emmet入門 第1回 Emmetを薦める理由

Chatwork使い始めました。プロジェクトのやり取りがとてもスムーズです。

Chatwork使い始めました。プロジェクトのやり取りがとてもスムーズです。

Chatworkを使い始めました。
これもGit同様ずいぶん前から「Chatworkで共有させてもらっていいですか?」とか「Chatworkめっちゃ便利やで」とか言われていたのですが、やっと使い始めました。
常にブラウザでChatworkを立ち上げておかないといけないのが億劫だったのですが、周りがいよいよChatworkだらけになったので、もう本腰入れて使い始めようかと決意いたしました。

Chatworkこんな風に使っています。

そんなに特殊な使い方ではないと思いますが、以下わたしの使い方を記載しておきます。

プロジェクトごとにグループチャットをつくる

プロジェクトごとにグループチャットをつくり、メンバーを招待します。

[Chatwork]グループチャット

概要を記入

概要に以下を記入しておきます。

  • メンバー
  • 簡単なプロジェクト概要
  • スケジュールもしくはスケジュールを記載したスプレッドシート等へのリンク
  • 資料や素材の置き場所のリンク
  • テスト環境・本番環境のリンク

[Chatwork]概要

チャットでやりとり

あとはそのグループチャット内で、やりとりをします。
個人宛にメッセージを送ったり、ファイルを送ったりします。

メールではプロジェクトごとに宛先を選んだり、「お疲れ様です~」みたいな挨拶を書いていたりしましたが、それが省けるだけでもかなりスピーディーにやり取りができると実感しています。

[Chatwork]チャットでやりとり

タスクを設定する

やらなければならないことはタスクとして設定をします。
自分のものも設定できますし、他人にタスクを割り振ることもできます。
タスク内容・担当者・期限を設定できます。無期限というのも可能です。

[Chatwork]タスク

無料プランです

無料プランで使っています。
グループチャットの作成上限が14ですが、これを超え出すと仕事のキャパシティ的にも無理が出てくるので、その目安としても活用できて良いです。

実際に使い始めて

使い始めるとめちゃくちゃ便利で、これもGit同様なぜもっとはやくから使わなかったのだろうと悔しくなっています。
そのプロジェクトに関わっているメンバーは、そのグループチャット内に揃っているので、情報の共有がはかどります。メールとちがって「○○さん お疲れ様です。~」のような挨拶もいりませんし、スピーディーにやりとりできます。
そしてタスクの設定・概要の確認もそこでできるので、かなりスムーズにプロジェクトをすすめることができます。

Gitを使い始めました。

f:id:webbibouroku:20171127165705j:plain

Gitを使い始めました。
もうずいぶん前から、まわりから「Git使わないの? めっちゃ便利やで」などという声を聞いていたのですが、なぜか使わずにいました。異様に億劫に感じていました。
いざ使い始めてみると、とても便利で何故いままで使わずにいたのだろうと悔しくなりました。
もしこの記事を見ている、Gitを使い始めるのが異様に億劫に感じている方がいらっしゃいましたら、使い始めるのは何にも難しくないので、はやく使い始めれば良いと思います。

わたしのGit環境

bitbucket

GitHubだと無料のアカウントでは非公開リポジトリを作成できなかったので、bitbucketを使用するようにしています。

SourceTree

GitクライアントはSourcetreeです。
Atlassian社提供のものになります。
bitbucketもAtlassianなのでなんとなく安心です。
https://ja.atlassian.com/software/sourcetree

Gitを使い始めるにあたって参考にした記事

たぶんこれだけ読んでもらえれば、とりあえず使えるようになるかと思います。

一歩踏み出すフロントエンド入門 | 株式会社LIG
https://liginc.co.jp/series/gitbasic

【連載Git入門 第2回】SourceTreeでGitを始めよう!まずは試しに使ってみよう!
http://naichilab.blogspot.jp/2014/01/git-2sourcetreegit.html

Gitフロー

とりあえずは、作業用のブランチを切って作業し、maseterブランチにマージするという簡易的なフローでやっています。

大掛かりなプロジェクトになってくると、「Git flow」でやっていくとかなり効率よくできそうです。

Gitを最大限に活用できる「Git flow」で、効率よく開発を進めよう!
https://liginc.co.jp/248864

コンテンツメディアへの記事登録を効率よくするために行った3つのこと

コンテンツメディアへの記事登録を効率よくするために行った3つのこと

いまはオウンドメディアがたいへん流行していて、いろんな企業さんからつくりたいという声をいただきます。
そして実際につくって、運用も任せていただいているところも複数あります。
で、そのオウンドメディアに記事を登録していく作業なんかもわたしたちがやるわけなんですが、少しでも効率的にできないかと工夫しながらやっております。

ここでは3点ほど、新たに取り入れた記事登録の効率化の方法を紹介させていただきます。

[Photoshop]書き出し形式

最近知ったのですが、Photoshopの「書き出し形式」という機能を使って一気に必要な画像を書き出すことができるんですね。

[Photoshop]書き出し形式1


レイヤーに書き出した際のファイル名をつけておき、選択します。

[Photoshop]書き出し形式2


そして右クリックで「書き出し形式」を選択。

[Photoshop]書き出し形式3


それぞれの画質や、拡張子を選んで、「すべてを書き出し…」をクリック。

これで全レイヤーが一気に書き出されます。

これ以前はひとつずつレイヤーを非表示にして「ウェブ用に保存」とやっていたので、ずいぶんな短縮になりました。

[Photoshop]必要な画像サイズのアートボードをひとつのファイルに用意しておく

これもPhotoshopでの作業になります。

キービジュアル用・記事本文用・縦長用・プロフィール画像
のアートボードを作成しておきます。

そしてこれをさきほどの「書き出し形式」をすれば、複数のファイルを開かずに必要な画像が一気に書き出せます。

[Photoshop]アートボード

[記事本文]MarkDown記法で成形

これをやる前はテキストエディタでタグをいちいち書くか、WYSIWYGエディタで作業をしていました。

以下のような感じで作業しています。

  1. Wordで原稿をもらう
  2. テキストエディタにコピー&ペースト
  3. MarkDown記法を用いて成形
  4. stackEditに貼り付けてhtmlをコピー

MarkDown形式エディタstackEdit

 

MarkDownは以下のように記述します。

見出し

##
#2個でh2、#3個でh3という具合に見出しを設定します。

区切り線


ハイフン3本で区切り線


になります。

 

リンク

[リンク文字](リンク先URL)
[]の中にリンク文字を入れ、続けて()の中にリンク先のURLを記します。

斜体

*~*
*と*で囲んだ部分が斜体になります。

太字

**~**
*2個で囲んだ部分が太字になります。
*3個で囲むと、太字かつ斜体になります。

リスト

-
- ではじめるとリストになります。
-のあとには半角スペースが必要です。

引用

>
>ではじめると

引用になります。


これを用いる前にやっていたように、htmlのタグを直接書いたり、WYSIWYGエディタで該当部分を選択して~、などという作業をしなくて良いので、かなり短縮になりました。

3つの基本的なSEO施策で、あるメーカー様のウェブサイトの検索順位が向上しました

f:id:webbibouroku:20171124164227j:plain

あるメーカー様のウェブサイトの検索エンジン最適化を行いました。
その結果、大きく順位が向上しましたので、事例として紹介いたします。

複数のキーワードで上位表示に

トップページ

・ 会社名
Yahoo: 2→2 / Google: 2→2
変化なし。もともと上位。

・ (株)会社名
Yahoo: 1→1 / Google: 1→1
変化なし。もともと上位。

・ キーワードA
Yahoo: 圏外→14 / Google:45→17

・ キーワードB
Yahoo: 21→11 / Google: 33→13

・ キーワードC
Yahoo: 圏外→圏外 / Google:圏外→圏外

・ キーワードD
Yahoo: 圏外→18 /Google: 67→30

主要下層ページ

・ キーワードE
Yahoo: 圏外→圏外 / Google: 圏外→圏外

・ キーワードF
Yahoo: 圏外→8 / Google: 圏外→7

検索上位表示を実現した3つの方法

上記の上位表示を実現したのは、3つの基本的な最適化施策です。

上位表示を目指すキーワードを絞り込む

最適化前は、各ページのタイトルに大きなキーワードが入っていました。
それをより細分化して、ターゲットとするユーザーがこの会社をイメージするであろうキーワードに狙いを定めることにしました。

例えば、
最適化前:「菓子メーカー|会社名」

最適化後:「カステラメーカー|会社名」
といった感じです。

メタ情報をユニークなものに

最適化前は、すべてのページに同じDescriptionが入っていました。
それをすべてのページでユニークなものに変更しました。
内容には、そのページにまつわるキーワードを盛り込むようにしました。

検索エンジンのクロールを促す

上記ふたつの対策が完了したら、検索エンジンのクロールを促すために、以下の4つを実施します。

Google Search Consoleにてサイトマップ登録
https://ferret-plus.com/1352

Google Search ConsoleにてFetch ad Google
https://support.google.com/webmasters/answer/6066468?hl=ja

Googleクロール申請
https://www.google.com/webmasters/tools/submit-url

・Bingクロール申請
https://www.bing.com/toolbox/submit-site-url

アクセス数の変化

以上のように検索エンジンへの最適化によって、検索順位を上げることができました。
それによりアクセス数がどう変化したかと言うと

約3,000 → 約3,500
(最適化前の2ヶ月と最適化後の2ヶ月を比較)

およそ1.17倍になりました。


作業としてはたいしたことはしていません。キーワードを選定し、各ページのメタ情報を変更したりといった基本的なことを確実にやっただけです。
それだけでずいぶんと検索エンジンにとって、このサイトにはどんなことが書かれてあるのか、ということがわかりやすくなったのでしょう。
あとは実際のコンテンツにどれだけ重要なことが書かれてあるか、ユーザーが欲しい情報がどれだけ書かれてあるか、ということことで比較されていくのでしょう。