web制作のメモ帳

趣味のweb制作で調べたことなどをメモしていくブログ

アンテナサイト運営状況 2ヶ月目

アンテナサイト「BlogLinker」の2月22日~3月22日までの運営状況です。

ページビュー数

f:id:web-knowhow:20150323201429p:plain
PVは800/Dayぐらいで右肩上がりに徐々に上昇しているようです。
また、集客の8割が検索エンジンからです。

インデックス数

f:id:web-knowhow:20150323201842p:plain
アンテナサイトでもインデックスは増えるみたいですね。

Googleランキングの調整を近日中に開始

気になる記事を発見しました。

Google では従来より、検索エンジンのためだけに作成された誘導ページについて、ユーザーの検索体験の品質に悪影響を及ぼす可能性があるとの見解を持っています。
たとえば、検索結果に表示されるすべてのページが、検索ユーザーを同じサイトに誘導するものであった場合を考えてみてください。ユーザーがある検索結果をクリックして閲覧し、その内容が目的に沿うものではなかったため検索結果ページに戻って次の結果をクリックしても、結局は最初に閲覧した目的に沿わなかったページと同じページに誘導されてしまい、ユーザーの利便性が大きく妨げられてしまいます。

引用元:Google ウェブマスター向け公式ブログ: 誘導ページについて、品質に関するガイドラインを更新しました

これはアンテナサイトのことを言っていると思われます。
結局、同じページに飛ばされたらユーザーは「またこれか」となるから仕方ないかな
アンテナサイトが検索結果から消える日も近いかもしれないですね。

まとめ

アクセスは増えているものの「BlogLinker」は検索エンジンからの集客がほとんどなので今後は厳しくなりそうです。
今後のサイト制作にも影響があるので、掲載順位などを分析して様子を見ていこうと思います。

アンテナサイト開発日誌 part1

アンテナサイトの制作を始めて2ヶ月と少し経ちました。
今回はアップデートの一部を書いていこうと思います。

機能

・関連記事を表示する機能

検索からユーザーがアクセスしてきたときに見たい記事とそれに関連した記事を表示する機能です。

例えば↓のタイトルでアクセスされた場合
【SHIROBAKO】このアニメ見て制作進行に興味を持ってしまった自分は馬鹿なのでしょうか - BlogLinker
http://www.blog-linker.com/article/17011

選択された記事と「SIROBAKO」を含む記事を下に表示するようになっています。
これは、ユーザーにより他の記事アクセスしてもらえるように作りました。

・閲覧サイト履歴機能

閲覧した記事のサイトを記録し、右上にある「閲覧サイト履歴」で表示する機能です。

デザイン

トップページ

f:id:web-knowhow:20150318062708p:plain:w300:h250

現在のトップページです。ファーストビューを意識して変更しました。
情報量を増やし、新着記事は一部表示にして「もっと見る」ボタンを設置しました。
また、閲覧履歴がある場合に「あなたにおすすめの新着記事」を表示するように変えました。

ボタン

目的の記事がすぐ見れないとユーザーが検索ページに戻ってしまうので、ボタンを設置してユーザーに分かりやすいようにしています。
f:id:web-knowhow:20150318064248p:plain:w400:h80


まとめ

全部を書こうとすると長くなってしまうので一部の紹介でした。
色々とアップデートとして作りましたが、プログラムコードがスパゲッティなので見直すと作り直したくなってくる・・・。
機能の詳細なプログラムの流れが聞きたいなどの要望があったら書こうかな。

以上、開発日誌part1でした。

アンテナサイト運営メモ part1 【SEO関連】

「アンテナサイト運営メモ」は運営していて気づいたこと疑問に思ったこと問題点などを書いていきます。


今回のメモは「SEO関連」についてです。
SEOについては初心者なのですが、今2つの問題をどうしようか悩んでいます。

Googleの検索結果のタイトルが短縮される

BlogLinkerで紹介している記事はこのようなタイトルでインデックスされているのですが、

f:id:web-knowhow:20150310025851p:plain

たまにこんな風に短縮されて表示されます。
f:id:web-knowhow:20150310025824p:plain
これはタイトルが長かったりキーワードを詰め込みすぎるとGoogleが自動でユーザーが求めるタイトルに最適化するみたいです。
別のキーワードだと違う表示だったりするので、対応するかどうか悩むところです。

参考サイト
Googleの検索結果のタイトルが短縮して表示される原因とは? | たむらんち

Google先生なぞのキーワードでインデックス

今、一番困っているのがこれです。

f:id:web-knowhow:20150310030536p:plain
BlogLinkerで記事の検索フォームがあるのですが、その結果をインデックスされているようです。
困っているのが、どこからキーワードを持ってきたのか単語を繋げたキーワードで登録されています。そのせいで検索結果が0件になり、ユーザーがページを見ても「記事が見つかりません」と表示される始末・・・。
(上記の画像では検索されるよう変更してあるため1件になってます)
Google先生が検索ワードをスペース区切りでインデックスしてくれればいいのですが・・・うーん。検索結果をインデックスさせないようにすることもできるのですが、上位表示されているので対応しにくく困っています。

終わりに

試行錯誤しながらアンテナサイトを運営していますが、毎日新しい問題に直面しています。
今回はその中で2つの問題をメモとして書いてみました。

CSSのfloat嫌い!floatを使わない方法を2つ紹介

floatプロパティ使うと

 レイアウトが崩れる Heightがおかしくなる

など何も知らなかった昔の自分はfloatに悩まされることが多々ありました。

 

今ではclearfixなどを使うことで解決するのですが

12345
.clearfix:after {
content: "";
clear: both;
display: block;
}

【CSS】今更clearfixについて解説してみる | アライドアーキテクツのクリエイターブログ

floatズレやclearfixについてはこちらのサイトで詳しく解説しています。

 

どうせならfloatを使わないでレイアウトを作ってみようと思い、最近はfloatを使わない方法で作っています。

 

今回は2つの方法を紹介します。

 

【inline-block】使って横並び 

例)

f:id:web-knowhow:20150221172846p:plain

<style>
ul li{
display: inline-block;
border: 1px solid #000;
*display: inline; //IE用
*zoom: 1;//IE用
}
</style>
<ul>
<li>AAAA</li>
<li>BBBB</li>
<li>CCCC</li>
</ul>

 限られた横幅でタグ等のリストを作るときに使ってます。

 

【table-cell】を使って横並び

例)2カラムで左側が可変サイズ、右側が300px固定の場合f:id:web-knowhow:20150221173121p:plain

<div class="box">
<div class="left">
AAAA
</div>
<div class="right">
BBBB
</div>
</div>

<style>
.box{
display: table;
border-spacing: 10px 0px; /*セル同士の間を空ける場合*/
width:100%;
}
.box .left{
display: table-cell;
vertical-align: middle;
border: 1px solid #000;
}
.box .right{
display: table-cell;
vertical-align: middle;
width: 300px;
border: 1px solid #000;
}
</style>

 可変カラムを作るときに使ってます。
marginが効かないのでborder-spacingしてますが、右側の中にdivを増やしてmargin-leftしても良いかも。また、サイズを均等にしたい場合はwidth指定を消してから.boxのところに【table-layout: fixed;】を追加してください。

他にも方法はあるみたいですが、私はこの2つを使っています。上の例ではIE7などの古いブラウザの対応をあまり考えていないのでご注意ください。

アンテナサイト運営状況1ヶ月目(2015/02/20)

 

新規のアンテナサイト(http://www.blog-linker.com/)1月22日の運営開始から2月19日までの運営状況を自分なりに分析してみます。

 

ユニークアクセス

f:id:web-knowhow:20150220084539p:plain

まずはユニークアクセス数です。クローラーの数が入っているので正確にはわかりませんが、後半の平均アクセスは50ほどです。Googleのインデックスが増えるたびにアクセス数が増えているように見えます。

 

検索流入数

f:id:web-knowhow:20150220085220p:plain

17日ぐらいから急に増えてきました。アンテナサイトなのであまり期待していないですが検索流入が徐々に増えていけばいいなと。

検索ワードを調べると「ドラマ名 視聴率」「アニメ名 感想」「フィギュア」「ソーシャルゲーム名」の検索が多いです。

 

まとめ

運営1ヶ月なので前半はまったく変化がありませんでした。後半は徐々にアクセスが増え大体6~7割の人がブログの記事にアクセスしているようなのでブログ管理者の方に相互依頼などをしていこうと思います。

 

今後の予定?

サイトのデザイン(利便性)に納得がいかないので色々考えているところです。(特にカテゴリ・・・)誰かデザインセンスをください・・・;; 

 

後発のアンテナサイトなので色々試しながら気ままに運営していきます。

 

 

Linuxコマンドメモ

chown ファイルやディレクトリの所有者を変更

書式例(/var/www/testのフォルダと中身をrootユーザにする)

 chown -R root /var/www/test

 

オプション

 -v 経過を表示し
 -R ディレクトリとその中のファイルを変更

 

chmod ファイルやディレクトリのパーミッションを変更

書式例(/var/www/testのフォルダを666にする)

 chmod 666 /var/www/test

 chmod -R 666 /var/www/test(フォルダ中身も666に変更)

 

オプション

 -v 経過を表示し
 -R ディレクトリとその中のファイルを変更

 

数値表 [所有者][所属グループ][その他ユーザー]
7 rwx 
6 rw- 
5 r-x 
4 r-- 
3 -wx 
2 -w- 
1 --x 
0 --- 

r 読み込み権限
w 書き込み権限
x 実行権限

 

df ディスク残り容量を調べる

書式例(ディスク残り容量を見やすいように表示する)

 df -h

 

 

 

 

chromeでHTTPヘッダの確認する方法

忘れるのでメモ

chrome

chrome://net-internals/#events

にアクセスすると通信情報が表示されます。

 

f:id:web-knowhow:20150203154337p:plain

この状態で調べたいサイトを他のタブで開き「URL_REQUEST」を選択すると右側に詳細が表示されます。