タグ別アーカイブ: SEO

他人のサイトをアクセス解析! アクセス数から検索キーワード、流入、ソーシャル割合までが一目で分かる「Measure The Web」


SimilarWeb – Free & Advanced Web Analytics Tool

サイトを運営していると、他人のサイトにどれだけのアクセスがあるのか気になる物です。このサービスでは、かなりの情報を得る事ができて楽しいです。そういうわけで、他人のサイトをアクセス解析してみましょう。

解説と共にご紹介。

アドレスを入力するだけでアクセス解析が見れる

利用するにはアドレスを入力するだけです。

入力したのは→niconicoです。ニコニコ動画にどういった人が来るのか見てみましょう。

アクセス解析詳細

まず大まかなランクが表示されます。世界で196位、日本で7位! 流石・・・。

一週間のアクセス数です。「M」というのはミリオンで百万なので、「3千万」アクセスがあるようです。え? これまじ?

流入です。左四つが特に大事でしょうか。ダイレクトはお気に入りや流入元が不明な物です。リファラはリンクなどから飛んできた物。サーチは検索。ソーシャルはtwitterやフェイスブックから来たものです。

全世界のどこから来たのかも確認できます。わりと世界中で利用されている印象があります。台湾つよいw

個人的にはこれが一番嬉しいです。どこからきて、何処へ行くのか? 大まかな数字が分かります。そのサイトがどこに依存しているのかがわかりますよ。

検索キーワードもわかります。どの単語で来る事が多いのか、どういうジャンルのサイトという割合が大きいのか。大事ですね。

その他にもソーシャル流入や広告流入もわかりますよ。かなり便利です。

 

やばすぎるアニメ「健全ロボダイミダラー」公式サイトをhtmlソース側から見てみたよ

皆さん「健全ロボダイミダラー」公式サイト、もうみましたか?


TVアニメ「健全ロボ ダイミダラー」公式サイト

高速で目が点滅するまねきねこ画像、うっとうしくくるくる回るボタン類、破損した画像、良く分からない時間表示、ふりしきる雪アニメーション、マウストラッキング、鳴り止まないMIDI、統一感ゼロ、べた塗りの文字背景、蛍光色の文字。もう、もうお腹いっぱいです。

この公式サイトの見た目については、他のまとめサイトとかが詳しく解説してくれるでしょう。ともあれ、ある程度の年齢のネットユーザーにとってはとても懐かしい気持ちにさせてくれるサイトには間違いありません。こういう遊び心、好きです。

さてはて、見ためにも大変楽しいサイトなのですけれど、その中身はどうなってるのかが個人的には気になるので軽く見てみましょう。

ワオ・・・。

じゃ、javascriptオフにして見ちゃうもん。

だが先回りされていた!! 定番ネタばかりしこみやがって。くそ・・・。

 構造化されているのか確認してみよう。

構造化はグーグルにサイトをどのように認識させるのか、とても重要な要素の一つです。ちょっとサイトトップに戻って確認してみましょう。

Google Structured Data Testing Tool

最低元の構造化はちゃんとされています。良い感じです。

haed部分のメタデータを確認

<HEAD>
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 11.0.0.0 for Windows">
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<META name="IBM:HPB-Input-Mode" content="mode/flm">
<TITLE>TVアニメ「健全ロボ ダイミダラー」公式サイト</TITLE>
<meta name="viewport" content="width=1100px, user-scalable=yes">
<meta name="keywords" content="ロボット,SF,ハルタ,エンターブレイン,エンブレ,なかま亜咲,ハイスクールD×D,おっぱい,前シッポ,ペンギン,MF,メディアファクトリー,ジェンコ,2014年,4月,アニメ,新番,新番組">
<meta name="Description" content="ハルタで好評連載中のSFロボット作品『健全ロボ ダイミダラー』が、TVアニメ「ハイスクールD×D」シリーズのスタッフたちの手によって2014年4月奇跡のTVアニメ化決定!誰も見たことのないスーパーロボット活劇が今、幕を開ける!">
<meta property="og:title" content="「健全ロボ ダイミダラー」">
<meta property="og:type" content="website">
<meta property="og:description" content="ハルタで好評連載中のSFロボット作品『健全ロボ ダイミダラー』が、TVアニメ「ハイスクールD×D」シリーズのスタッフたちの手によって2014年4月奇跡のTVアニメ化決定!誰も見たことのないスーパーロボット活劇が今、幕を開ける!">
<meta property="og:url" content="http://penguin-empire.com/">
<meta property="og:image" content="http://penguin-empire.com/images/ogp_midara.png">
<meta property="og:site_name" content="TVアニメ「健全ロボ ダイミダラー」公式サイト">
<meta property="og:locale" content="ja_JP">

まず、「IBM WebSphere Studio Homepage Builder Version 11.0.0.0 for Windows」とあることからホームページビルダー11で制作されている事がわかります。タグが大文字になるのはホームページビルダーの特徴の一つですね。

スマートフォン対応もされていますが、これはどちらかというと「このサイトの全体図を見せるため」と取れますね。例えスマートフォンで見たとしても「1100px」の幅表示で見せられるので文字が小さくて認識し辛いでしょう。

案の定グーグルさんにも怒られまくりです。素敵すぎます。

メタキーワードも大量にしこまれています。メタキーワードとは、そのページがどういったページになるのか文字通りキーワードを示す要素ですね。

「<meta name=”keywords” content=”ロボット,SF,ハルタ,エンターブレイン,エンブレ,なかま亜咲,ハイスクールD×D,おっぱい,前シッポ,ペンギン,MF,メディアファクトリー,ジェンコ,2014年,4月,アニメ,新番,新番組”>」おっぱいって何だよ・・・。基本的にメタキーワードは五個程度が良いとされていますがそのルールをぶち破ってます。

もっとも、現在のgoogleなどはメタキーワードは無視するとされているのでそれを知ってのお遊びだと思います。

必要最低元をはき違える超軽量CSS

<link rel="stylesheet" type="text/css" href="css/index.css">

お、CSSファイルがあるのでちょっと覗いてみます。

html{
cursor: crosshair;
background:url(/images/bg-daimidalar.jpg);
}

body{
width:960px;
margin:0 auto;
position:relative;
}

#container{
width:960px;
margin:0 auto;
position:relative;
}

a:link { color: #00FFFF !important; }
a:visited { color: #00FFFF !important; }
a:hover,
a:focus,
a:active { color: #FF2626 !important; }

p {
line-height:180%;
letter-spacing:1px;
}

.special p{
line-height:280%;
}

table{
line-height: 150%;
}

.special table{
line-height:180%;
letter-spacing:1px;
}

.ddimg{
padding:10px 10px 0 10px;
background-color:rgba(255,255,255,0.6);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#AAFFFFFF,EndColorStr=#AAFFFFFF);
}
.ddimg2{
padding:0 5px;
background-color:rgba(255,255,255,0.6);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#AAFFFFFF,EndColorStr=#AAFFFFFF);
}

えーっと、うん☆ これで全部です。いっそすがすがしい位ですが、み、ミニマルなサイトだとあるあるー☆ フォントスタイルすら指定されていないcssって私初めて見ました。

ちなみに私のサイトのCSSはこんな感じでかなり色々な記述がされています。これでも割と少ない方です。

そりゃ褒められるよね。

900行にも及ぶ直接記述のjavascriptが俺の行く手を阻む

びゃああああ!! なんですかこの900行近いスクリプトの山はw

これが全部このページに直接刻み込まれています。当然のようにこれらを処理し終わるまで、この下に鎮座する本文は読み込まれません。

軽く調べてみたらホームページビルダーにある、画像などを簡単にぐりぐり動かすためのスクリプト記述機能によるものだそうです。

・・・・これか!!(思わずgif動画にしてしまう)((そしてもう一つの方は華麗にスルーする))

当然のように要素へと直接スタイル記述

<BODY text="#ffffff" bgcolor="#FFFFFF" link="#ffff00" vlink="#999999" alink="#ff0000" onload="HpbVfxinit('Layer9','HpbVfx0301','G221',0,0,1,'Layer49','HpbVfx0401','I121',0,0,1,'Layer38','HpbVfx0401','I121',0,0,1,'Layer46','HpbVfx0401','I121',0,0,1,'Layer50','HpbVfx0401','I121',0,0,1);">
<DIV style="top : 383px;left : 517px;
 position : absolute;
 z-index : 34;
" id="Layer16"><IMG src="/images/anim2.gif" width="106" height="105" border="0"></DIV>
<DIV style="top : 3px;left : 688px;
 position : absolute;
 z-index : 62;
" id="Layer36"><IMG src="images/title.gif" width="358" height="210" border="0" alt="TVアニメ
「健全ロボ ダイミダラー」
公式サイトへ!!
"></DIV>

こりゃすげえ・・。スタイル記述とポジション設定の嵐です。個人的にびっくりなのはimgタグの中の「art」要素ですね。改行されてますよ。凄い。というよりart要素にちゃんと説明が入っているのも偉いですね。私は適当ですよここらへん。

出、出~w 無意味机要素出力奴~www

<TABLE border="0" class="ddimg2" width="735" height="72">
 <TBODY>
 <TR>
 <TD height="53">
 <TABLE border="0">
 <TBODY>
 <TR>
 <TD align="center" height="23"><A href="/onair/"><IMG src="images/anim29995.gif" width="423" height="59" border="0" alt="4/5(土)より、TVアニメ放送開始!"></A></TD>
 <TD width="311" align="center" height="23"><A href="/onair/"><IMG src="images/anim22222.gif" width="281" height="60" border="0" alt="AT-X、チバテレビ、テレ玉、tvk"></A></TD>
 </TR>
 </TBODY>
 </TABLE>
 </TD>
 </TR>
 </TBODY>
</TABLE>

そして出ました。テーブル要素です。もはや様式美ですね。というかこれ、テーブル要素の中にテーブル要素がありません? どういう事なの?

漢はブラウザキャッシュなんて女々しい事はしない

画像ファイルやcssファイルは、ブラウザにキャッシュさせると次に読み込む時時間を短縮する事が出来ます。

しかし、ブラウザキャッシュは当然のように設定されていません。漢気溢れますね。

見出しタグなんて要らんのですよ

「h1~h6」タグなんて当然のようにありません。最高です。スッキリとしたサイト。頭が上がりません。

まとめ

ああ、面白かった。表から見た場合と内側から見た場合、一つで二度美味しいとても楽しいサイトでした。皆さんも是非ソースを見てこの素敵な趣向に一時の安らぎを感じてみてはいかがでしょうか。

なお、ここで指摘した事柄に対しては、SEOなどの影響がどれだけあるか未知数であるのと同時に、ここまで完璧に振り切ったサイトは知名度・話題性による流入を期待できるため何一つ参考になりません。ホームページビルダーを使用したからダメという記事ではないので誤解なさらないようにお願い致します。

皆さんも是非素敵なサイトを構築してくださいね!! 本当、面白かった。

 

.htaccessでのjavascriptキャッシュの有効期限が上手く設定できない時の対処

タイトル長いですね。

色々と高速化に向けてサイトを弄っていたのですが、ついに「.htaccess」に手を出そうと思います。サイトには色々なファイルがあり、それらのキャッシュ有効期限や圧縮設定などを記述できます。

普通ならばFTPでファイルをあげたり編集したりという作業が必要なのですが、wordpressは便利ですね。ブラウザ上から編集する事が出来ます。

私は「Yoast WordPress SEO」を利用して編集しました。SEOに関する細かい設定をする事ができるプラグインですよ。とってもお勧めです。

さて、「.htaccess」の記述についてですが、こちらを参考して設定させて頂きました。→WordPressサイト用の.htaccess例 | dogmap.jp

ほとんど同じ内容なので、早速本題に入りましょう。

ちゃんと設定したのに、javascriptのキャッシュが設定されない!

ご覧のように一秒になってます。なんでじゃ。なんでなんじゃ。1秒といったらほとんど意味無しですね。ファックです。

 

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 216000 seconds"
</ifModule>

キャッシュ設定はこんな感じです。上記サイトの物をそのまま頂きました。デフォルト設定である「1 seconds」が設定されてて「text/javascript」はスルーされているように見えますね。

解決方法ですが、こちらにありました→ExpiresByType が JavaScript に対して効かない? | Web Design Leaves

探してみる物です。ありがとうございます。なるほど、こういう記述方法でいけるわけですね。

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"

ExpiresByType text/js "access plus 216000 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/javascript "access plus 216000 seconds"

ExpiresByType application/x-javascript "access plus 216000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 216000 seconds"
</ifModule>

修正したものがこちらです。javascriptの所を改行してあります。

設定できてます!! 良かった良かった。

スコアもかなり良い感じ。

 

「head creaner」と「Yoast WordPress SEO」の併用は気をつけてっ

どちらもwordpressのプラグインです。「head creaner」はページの<head>部分を整理するプラグイン、「Yoast WordPress SEO」がSEOに関するプラグインです。どちらもとても素敵なプラグインなのです。この二つのプラグインについては、あまりに有名で丁寧に解説しているブログが沢山あるのでそちらにお任せしますよ。

設定によっては競合するというお話です。

「Yoast WordPress SEO」の「Force rewrite titles」のチェックは外すようにしてください。head creanerが動作しなくなってしまいます。

チェックをオンにした場合

コメントタグで「Yoast WordPress SEO」が動作している事がわかりますね。

次にオフにしてみます。

head cleanerのキャッシュファイルであるcssへとリンクしているのが分かります。

解決してみればなあんだという感じですが、かなり焦りましたよ・・。

ちなみに、head cleanerを使った場合とそうでない場合のスコアをみてみます。

使うのは→PageSpeed Insights

head cleanerオフ

head cleanerオン

恐ろしい違いですね・・・。

それでは、皆さんも気をつけてくださいねー

記事の価値を自負するなら「nofollow」リンクを使わないほうがいいかもよ

SEO的なお話ですよ~。

サイトを運営する上で必要なのは、なんだかんだいってもリンクの存在です。

で、リンクには「nofollow属性」というものがあります。

<a href="http://hoge" rel="nofollow"> hogehoge </a>

このaタグについている「rel=”nofollow”」がそれです。これがついていると、「このリンク先は見る価値無し」と検索エンジンなどに宣言する意味合いになります。

nofollow属性のリンクはどういった時につけるのか

なんとも難しい所ですが、普通に記事を書いてる分には必要無いのではないかと私は思うですよ。

そもそも皆に有益な情報を提供するためにブログをやっているのであって、そこで紹介したリンクはほとんどが重要な物のはずです。それを「価値無し」と宣言して回るのはあまり有効だとは思えません。

記事の本筋とは違う、一応リンク置いておこう、というような時はつけても良いんじゃないでしょうか。

ただし、荒らしの可能性があるコメント欄やトラックバック等は、wordpressを使用している場合「rel=”nofollow”」が原則つくようになっているようですね。

無料ブログ等のブログパーツとかにはこの要素がついていたりするそうです。

nofollow付きとそうじゃないのはどういった違いがあるのか

nofollow属性をリンクに付けるのはどんなとき? | 海外SEO情報ブログ

そのものズバリな回答がありました。翻訳ありがとうございます。

  • すべての外部リンクにnofollowが付いていたからといって、順位付けに関しては他のサイトとなんら違うように扱うことはない。
  • でもそれがいい考えとは思わない。理由は、Googleはnofollowリンクを見るとそのリンクをリンクグラフから除外するから。つまりそのリンクを新しいウェブページの発見に使わないし、スコアリングのためにそのリンクのアンカーテキストを使わない。
  • nofollowを付けてPageRankの流れを制御してため込もうとするPageRankスカルプティングはもう効き目がなくなっている。
  • 外部リンクにすべてnofollowが付いていることはプラスにもならないしマイナスにもならない。

引用させて頂くとこういう事らしいです。SEO的な意味合いで「nofollow」しても意味は無い。さらに、そのリンクを評価しないどころか文字列すらも認識しないという事です。これはとても重要なポイントですね。リンクも記事を構成する文章の一つです。仮に上記のリンクをnofollowすると「nofollow属性をリンクに付けるのはどんなとき? | 海外SEO情報ブログ」という一文がまるまる無視される事になります。

「PageRankスカルプティング」というのは、外部リンクをすべて「nofollow」にして、自分からは外部へリンクを出さず、外からどんどんアクセスを貯めるという手法みたいですが、常に検索エンジンをアップデートしている中で無効化されてるようですね。(極端な例なだけで、的確な構築をしていればpagerankを調整する事は可能のようです)

ノーフォロータグ(nofollow)リンクでSEO | ネットビジネスで20代にて転職して独立したなるひこのブログ

とはいえ、googleで「nofollow リンク」を検索するとこんなページも見つかるわけですが。なんでしょうね「自分のサイトからパワーを流出させないようにします。」っていうふわっとした説明がじわじわ来ます。もちろんこのリンクにはきちんとnofollow設定してます。

まとめ

というわけで、自信を持ってリンクを張っていった方が良いと思いますよ。普通に記述すればいいだけです。簡単ですね。

wikipedia等はスパム防止のために全てのリンクが「nofollow」設定されています。それを差し引いても濃い記事内容ですし、役に立つサイトだから自然と上位に行くわけですね。納得ですよ。

ともあれ、個人的には「nofollow」の記事で使わないリンクと使ったリンク両方とも記述できて満足度高いです!

パーマリンクは英語か日本語か SEO的にどうなんだろうか

はいさい! ブログ運営頑張っておりますか。私は割と適当です。

さて、パーマリンクですよ。パーマリンク。

悩ましい問題です。日本語の方がユーザビリティが良いとか、英語の方が検索エンジンに好かれるとか、色々ありますよね。

ぶっちゃけ気にしてもしょうが無いのかも知れませんけれどね・・・。

検索エンジンに好まれるサイト

結局はユーザーから見て得になるサイトが上位に食い込みます。つまり私のブログみたいな誰のタメにもなら無いブログは論外って事ですね。

検索エンジンはページの内容を解析してインデックスしていきます。サイトの構造自体や、その新鮮度、更新頻度を重視します。アドレスに求められのはその永続性だけです。

アドレスについて色々と試行錯誤するよりも、タイトルやMeta Descriptionに拘る方がよっぽど効果的なのが実際の所のようです。

とはいえ、頑張ったところで私のブログはSEOやパーマリンクの話題はほぼ取り上げないので、この記事がグーグルさんとかに評価される事はほぼ無いでしょう☆

実際の所

実際、検索エンジンで適当な単語で検索してみるのが一番お手軽です。

色々なアドレスが見えますね。パーマリンク設定は本当にバラバラなのがよくわかります。

見ているとパンくずリストの方が効果的なように見えますね。今度ちゃんと設定しよう、パンくずリスト・・・。

私の所は数単語の英語にするようにしてます。自動翻訳に突っ込んでるのであまり意味は通じません。

最近作ってる花言葉のサイトでは、花の名前を日本語表記にしています。

アザレア(白)「あなたに愛されて幸せ 」「愛の喜び 」「節制」 – Suggestion of flower

まだそんなに記事数は無いですが少しずつ作っています。アドレスは「http://flower.ao-works.net/%E3%82%A2%E3%82%B6%E3%83%AC%E3%82%A2%EF%BC%88%E7%99%BD%EF%BC%89」というような感じですね。花の名前だけですね。花の名前だけなら短いし、これくらいなら英単語よりも日本語のほうが良いかな? くらいの気持ちです。

日本語ドメインはどうだろう

少し脱線。

日本語ドメインの方は少し事情が違うかもしれません。

というのも、googleが最近日本語のドメイン取得ページを最近作りました。

[browser-shot width=”450″ url=”http://xn--p8j9a0d9c9a.xn--q9jyb4c/index.html”]

特定キーワードによる検索上位を狙うなら、取ってみるのも手かもしれませんね。

 

SEO – goodkeyword – SEO対策、無料で使える関連キーワード検出webツール

【goodkeyword】Yahoo/Google関連キーワードツール

キーワードによく併用される関連キーワードを探す事が出来るツールです。

無料で使えて、手軽。余計な情報は一切ついてこなくてとても便利です。

試しに「SEO」で検索してみました。対策、無料、相場、チェックなど、よく併用されるであろう単語が並んでおります。

この結果をみて考えたタイトルが「SEO対策! 無料で使える関連キーワード検出webツール「goodkeyword」がスゴイ」です。SEOに適したタイトルを考えるのはブログ運営では必要になる技術です。是非ともマスターしておきたい・・・ですが、正直SEOなんてよくわかんないよーとか思ってました。

今度からはこれを上手に使っていこうかなと思います。

驚くほどシンプルでイカしたwordpressテーマ「wsc7」をカスタマイズしよう – その2 – ブログのコンセプトを考える

一連の記事→wordpressテーマをカスタマイズしよう Archives – aoringo works

さてはて、そもそも何故ブログのテーマを自作する運びとなったのか。

私の場合、大きな要因は「コンセプト」です。ブログを利用して書評、プログラム、雑感、写真、小説・・・・など多岐にわたります。

続きを読む 驚くほどシンプルでイカしたwordpressテーマ「wsc7」をカスタマイズしよう – その2 – ブログのコンセプトを考える

記事タイトルを翻訳してパーマリンク化するプラグイン「aoringo parmalinker」を作りました。

<!–

–>
記事を書くたびにSEOを意識してパーマリンクに英文を入力してる方々。お疲れ様です。いえ、本当に凄いと思います。私にはそこまでマメな事なんてできません。なので自動化しました。ええ、タイトル翻訳してパーマリンクに突っ込みました。石を投げないでください。

この記事のアドレスもそうですよ、「plugin-to-translate-article-titles」と入ってると思います。

SEOを本当に意識するなら、単純な訳文ではなく重要な要素を抜き出してから英単語を入力するなりしたほうがいいとは思います。思いますよ? けれど大変じゃないですか。少なくとも私は大変なんです。めんどうくさいんです。ごろごろコタツに入りながら「あー記事かこー☆」とかしてるとそんな所まで意識していくなんて無理なんですよ。

続きを読む 記事タイトルを翻訳してパーマリンク化するプラグイン「aoringo parmalinker」を作りました。