ウェブ屋の備忘録

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

入り口になっているページを調査・改善

f:id:webbibouroku:20180525163020j:plain

GoogleAnalyticsで、サイトの入り口になっているページを調査。
どこから来ているユーザーが多いのか?
さらにアクセスを増やすには?
そのページから直帰させずに、次のページを読んでもらうには?
ということを考えます。

エクセルを用意

f:id:webbibouroku:20180525162432p:plain

このようなエクセルを作って、調査をします。

左から

となっています。
上位10ページを見ていきます。

Google Analyticsの数字をエクセルに入れていく

上記のエクセルに、Google Analyticsから数字をエクセルに入れていきます。

Google Analyticsからエクセルをダウンロード

f:id:webbibouroku:20180525162446j:plain

Google Analyticsを開き、

「行動」

「サイトコンテンツ」

「ランディングページ」

と進みます。

f:id:webbibouroku:20180525162459j:plain

「エクスポート」をクリック

Excel」を選択

でデータをダウンロードします。

ダウンロードしたエクセルから数値を移す

ダウンロードしたエクセルを開きまして、

f:id:webbibouroku:20180525162509p:plain

URL・セッション・直帰率の数値を移します。

流入元を入力する

それぞれのページに、流入元を入れていきます。

f:id:webbibouroku:20180525162524j:plain

GoogleAnalyticsのセグメントを変更します。
「すべてのユーザー」のチェックをはずし、「検索トラフィック」と「参照トラフィック」にチェックを入れ

f:id:webbibouroku:20180525162534j:plain

セッションの数値を入れていきます。
エクセルをダウンロードしてコピペでもかまいません。

流入元(その他)は、
セッション - 検索トラフィック - 参照トラフィック
とします。
URLの直打ちとか、メール本文のリンク辿ってとか、SNSとかからがそれに該当します。

ページ名は、URLアクセスしてページ名を書いておきます。
わかりやすいようにするためだけのものです。

数値を見ていく

この数値をもとに見ます。
気付いたことや実行すべきことなど、右端のコメント欄に書いていきます。

直帰率の高いページから改善を施せば、より効果的かと思います。

検索キーワードを調べる

検索キーワードからの流入が多い場合、そこから改善を施せばさらに効果的ですね。
どんなキーワードで検索して、そのページに来ているかを確認していきます。

サーチコンソールで見ていきます。

f:id:webbibouroku:20180525162546j:plain

左メニューの

「検索トラフィック

「検索アナリティクス」

と進みます。

f:id:webbibouroku:20180525162600j:plain

「表示回数」「CTR」「掲載順位」をクリックしておきます。

f:id:webbibouroku:20180525162615j:plain

「ページ」の「フィルターなし」をクリック

「ページをフィルター」をクリック

f:id:webbibouroku:20180525162627j:plain

URLを入力します。

f:id:webbibouroku:20180525162656j:plain

一覧で検索キーワードが表示されます。
実際にそのキーワードで検索してみて、どのように表示されるか確認、問題があれば修正します。

  • titleやdescriptionを、内容がより伝わるものに修正する
  • 上位に表示されているものとの差がわかりやすいように修正する
  • ページの内容を、そのキーワードに相応しいように変更する
  • ページに、そのキーワードに関連したページへ誘導するリンクを設置する

参照ページを調べる

参照トラフィックからの流入が多い場合、そこから改善を施せばさらに効果的ですね。
どんなページから来ているのか、そこにはどんな内容が書かれているのかを調べて改善をします。

サーチコンソールで見ていきます。

[アクセス解析] 入り口になっているページを調査・改善

「検索トラフィック

「サイトへのリンク」

と進みます。

f:id:webbibouroku:20180525162719j:plain

「最も多くリンクされているコンテンツ」の「詳細」をクリックします。

f:id:webbibouroku:20180525162732j:plain

ちょっと面倒ですが、該当するURLを探します。
ページ内検索を使うといいでしょう。

見つかったら、それをクリック、

f:id:webbibouroku:20180525162745j:plain

ドメインレベルで表示されるので、さらにクリックします。

f:id:webbibouroku:20180525162759j:plain

一覧でリンクされているページが表示されますので、クリックしてそのページを実際に見ます。

そのページの内容に合わせて修正をしてみると良いでしょう。

  • そこで合わせて言及されていたことについてのページをつくり、誘導する
  • より相応しいページがあればそこへ誘導するリンクを設置する

など

まとめ

GoogleAnalyticsで、入り口になっているページと、その流入元を調査。
サーチコンソールで「検索キーワード」や「リンク元のページ」を調べ、実際にそのキーワードで検索してみたり、リンク元のページを見てみる。
そして改善。

  • titleやdescriptionを、内容がより伝わるものに修正する
  • 上位に表示されているものとの差がわかりやすいように修正する
  • ページの内容を、そのキーワードに相応しいように変更する
  • ページに、そのキーワードに関連したページへ誘導するリンクを設置する
  • そこで合わせて言及されていたことについてのページをつくり、誘導する
  • より相応しいページがあればそこへ誘導するリンクを設置する

など。

入門 ウェブ分析論――アクセス解析を成果につなげるための新・基礎知識 増補改訂版

入門 ウェブ分析論――アクセス解析を成果につなげるための新・基礎知識 増補改訂版

 

サーチコンソールでHTML改善

サーチコンソールでHTML改善

サーチコンソールでHTMLの改善点を確認し、修正をします。

サーチコンソールで改善点を確認・修正

サーチコンソール

サーチコンソールへログインし、左メニューの「検索での見え方」→「HTMLの改善」と進みます。

すると

HTML改善

  • 重複するメタデータ(descriptions)
  • 長いメタデータ(descriptions)
  • 短いメタデータ(descriptions)
  • タイトルタグの記述なし
  • タイトルタグの重複
  • 長いタイトルタグ
  • 短いタイトルタグ
  • 情報が不足しているタイトルタグ

の問題があるところを確認ができます。

「HTML改善」項目をクリック

右端に数字が出ている項目をクリックし、さらに詳細を確認します。

「HTML改善」重複しているdescription

例えばこれは「重複するメタデータ(descriptions)」の項目をクリックしたところですた、重複のあるdescriptionがリスト表示されていますので、さらにクリックします。

「HTML改善」descriptionの重複があるページのURL

すると、その重複のあるページのURLが表示されますので、確認して修正をします。

ほか問題のあった項目も同様に、サーチコンソール上でページを確認し、修正をしていきます。

修正完了のFetch as Googleは意味がない?

修正が完了したことをいち早くGoogleにお伝えしようとFetch as Googleをするのは、あんまり意味ないようです。

修正後、Fetch as Googleをするページ・しないページで確認をしてみましたが、しなかったページの方が早くサーチコンソール上からなくなっていることもありました。

サイトの規模にもよるかもしれませんが、私が管理している際とでは大体3日おきくらいに何割かずつページを確認しているような感じです。

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

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

 

縦に長い画像を分割して印刷する方法(Windows)

縦に長い画像を分割して印刷する方法(Windows)

ウェブの記事ページなど、縦に長い画像の印刷をするときに困ったことはありませんか?

縦長に印刷。小さくて見えない

たとえば1枚の紙に縦のサイズが合わせられて、横幅がものすごく小さく出てきたりして、何が書いてあるか見えません。

それを

分割して印刷

ページを分割して印刷する方法です。

とても簡単です。ペイントを使用します。

縦に長い画像を分割して印刷する方法(Windows):簡単6ステップ

ペイントを開き、印刷したい画像を開く

1. ペイントを開き、印刷したい画像を開きます。

ペイント:ページ設定

2. 「印刷」 → 「ページ設定」と進みます

ペイント:ページ設定

3. 印刷の向きを縦に(横がよければ横でかまいません)
4. 中央揃え「水平方向」にチェック(これも必須ではありません)
5. 調整で、プレビューのグレーの図形が枠におさまるサイズに

6. あとは通常どおりプリンタで印刷するだけです!

Web制作に便利なサービスやツール12選

Web制作に便利なサービスやツール12選

一緒にWeb制作をしている仲間から、便利なツールを募りました。
たくさん出てきたので共有しておきます。
ジャンルレスで順不同ですが、どなたかの参考になれば幸いです。

ビジュアルコミュニケーションツール - AUN[あうん]

ビジュアルコミュニケーションツール - AUN[あうん]

https://aun.tools/

ウェブサイトのスクリーンショットに、指示を書き込めるツール。
作成した指示書はURLで共有もできます。
ベーシック認証のかかっているページでもOK。

月額3,000円のプレミアムプランだと、保存期間が1年に延びたり、どのブラウザでも再編集可能になったりするみたいですが、無料版で十分です。

Beautiful Free Images | Unsplash

Beautiful Free Images | Unsplash

https://unsplash.com/

フリー素材。
どの写真もクオリティが高いです。
このブログの記事のイメージ写真にもよく使っています。

パスワード生成

パスワード生成

http://www.luft.co.jp/cgi/randam.php

ランダムな文字列でパスワードを生成してくれます。

Pushbullet

Pushbullet

https://chrome.google.com/webstore/detail/pushbullet/chlffgpmiacpedhhbkiomidkjlcfhogd?hl=ja

アドレスやテキストをPCとスマホ間に送る際に使用しています。
テストアップのアドレスをスマホで見るとき、スマホで見つけたものをPCに送るときなどに使っています。
Chromeのエクステンション。

Sizzy

Sizzy

http://sizzy.co/

複数のデバイスでのレイアウトを一覧で確認できるツールです。

Alt & Meta viewer

Alt & Meta viewer

https://chrome.google.com/webstore/detail/alt-meta-viewer/jjcjblcbnjhgjlnclhficglfjedhpjhl

ページのタイトルやディスクリプションなどのメタ情報と、画像のaltを確認できるChromeエクステンション。
テストアップ時の確認などで使用しています。
SNSのOGPタグも表示してくれます。

cacoo

cacoo

https://cacoo.com/

ワイヤーフレームを作成するときに使っています。
あらかじめよく使う図形が用意されていて便利です。

ダミー画像シミュレーター

ダミー画像シミュレーター

https://placehold.jp/

http://placehold.jp/{幅}x{高さ}.png
というURLでダミー画像が作成できます。
背景色や文字色も任意のものを設定できますが、詳しくはサイトへどうそ。

縦長の画像を印刷

縦長の画像を印刷

https://webnaut.jp/tools/print1/

Wordmark.it

Wordmark.it

https://wordmark.it/

任意のテキストをPC内のフォント or Googleフォントで一覧確認ができるツールです。

waifu2x

waifu2x

http://waifu2x.udp.jp/

小さく粗い画像をきれいにしてくれます。
ロゴとかに便利です。
大きなロゴデータがなく、ウェブサイトからとってこないといけない時なんかに。

METALLIC RATIO

METALLIC RATIO

http://voidism.net/metallicratio/

黄金比白銀比などのシミュレーターです。

Gmailのバックアップが2GBごとに分割されない

Gmailのバックアップが2GBごとに分割されない

Gmailの容量(15GB)がいっぱいになり、古いメールをバックアップをとってから削除しました。

簡単にできそうだと思っていたのですが、意外とつまづきポイントがありましたのでここにまとめておこうと思います。

2GBごとで分割されない

まず「Gmail バックアップ」で検索。
出てきた方法で実行します。

https://webkikaku.co.jp/blog/webservices/gmail-backup/

などです。

とりあえず全部バックアップをとっておこうと思いました。
アーカイブのサイズ(最大)」という項目があります。
このサイズを超えるアーカイブは複数に分割してくれる、というものです。
DVD-Rに焼いておきたかったので4GBを選択しました。

バックアップデータが仕上がるのは、1日ほどかかりました。
ダウンロードしてみると4GBで分割されておらず、15GB足らずのファイルひとつでした。

設定が間違っていたのかな?と思い、今度は2GBを選択してみました。

1日後、ダウンロードしてみると、また分割されていませんでした。

古いメールだけをバックアップする

なぜか分割してくれなかったので、あらかじめ古いメールだけをバックアップすることに。
その方法を書いておきます。

1. ラベルを作成する

ラベルを作成する

ラベルを作成する

「20○○年以前」など、わかりやすい名前でラベルを作成します。

2. 古いメールに作成したラベルを設定する

古いメールを検索する

Gmailの検索窓に「before:2018-1-1」などと入力し、検索します。
日付は適宜変更してください。
※ 入力した日そのものは結果として出てこないので、2017年以前のものをすべて選択したければ「2018-1-1」などとする必要があります。

ラベルを設定する

一括チェックのボタンにチェックを入れます。
「この検索条件に一致するすべてのスレッドを選択する」という文言が出てきますので、それをクリック。
これで、検索窓に入力した日付以前のメールが全部選択されます。

ラベルを設定する

ラベルのマークをクリック。
先ほど作成した「20○○年以前」などのラベルにチェックを入れます。

3. 「20○○年以前」のラベルのみをバックアップ

https://webkikaku.co.jp/blog/webservices/gmail-backup/
などの手順を参考に、バックアップをとります。
「ラベルを選択」で「20○○年以前」のラベルのみを選択し、バックアップ。

あとは数時間~数日後にデータが出来上がるので、ダウンロードするだけです!

メールの超プロが教えるGmail仕事術

メールの超プロが教えるGmail仕事術

 

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

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の新法則シリーズ