[オフラインで使いたい]スマホで Indexed Database API まだですか [iOSに実装はいつ?]

2013
05.09

皆様、おはようございます。今回は Indexed Database API についてです。

そう言えば今年は蛇年ですね、蛇。

最近すっかり見なくなってしまいましたが、昔はシマヘビなんかを見かける度に追いかけ回したものです。

 

Indexed Database API ってどうなの?

さて、久々にガッチリと プログラム関係の技術情報 で行きたいと思います。初心忘れるべからずです。

当社は今年も引き続きスマホやタブレットの web アプリを推して行きたいと思っているのですが、必ずネックになる部分があります。

それはやはり「 ローカルでデータベースを操作する 」、これでしょう。

当サイトでも色々検証しました マニフェスト と組み合わせれば、オーディオ / ビデオ系の再生を除けばかなり ネイティブアプリ のようにゴキゲンな動作をするアプリが作成可能になります。

 

黎明期は JS から「 SQLite 」を扱う事が出来る Web SQL Database API 一択だったので、何も悩むこと無く使っていたのですが、 2010 年だか 2011 年だかにこの API が HTML5 の仕様策定範囲から外されてしまいました。(出典 : Livecast 様)

よって去年( 2012 年)は今後メンテナンスが無く、いつ消えても文句は言えない状態の Web SQL Database API なんて使ってらんないぜ!推奨されている Indexed Database API ってのに乗り換えよう!

と色んな解説サイトを巡りながらサンプルを作ってみたのは良かったのですが…

iOS で動かないのよ、コレが。

http://labs.vividworks.jp/indexedDB/

Indexed Database API

プログラムの中身はこんな感じ

※jQueryを読み込んでます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
var IDB = window.indexedDB || window.webkitIndexedDB;
var cursorIDB = window.IDBCursor || window.webkitIDBCursor;
var transactionIDB = window.IDBTransaction || window.webkitIDBTransaction;
var keyrangeIDB = window.IDBKeyRange|| window.webkitIDBKeyRange;
var DB_NAME = 'TEST';
var DB_VERSION = '1.0';
var DB_TODO = 'todo';
var DB_SORT = false;
var odb;

alert(IDB);

//=================================================
// DBのバージョン別 Object Store 初期化オブジェクト
//=================================================
var DB_OBJECT_STORES = {
    '1.0': function(odb) {
        var objectStore = initObjectStore(odb, DB_TODO, { keyPath: "id", autoIncrement: true });
        objectStore.createIndex('flg', 'flg');
    }
};

//=================================================
// Object Storeのイニシャライズ
//-------------------------------------------------
// DBスキーマが変更されていたら既存の Object Storeを破棄して再生成する。
// 存在し無い場合は新規で生成する。
//-------------------------------------------------
// @param:  object
// @param:  string
// @param:  object
//-------------------------------------------------
// @return: object
//=================================================
var initObjectStore = function(odb, name, option) {
    var check = odb.objectStoreNames;
   
    for(var key in check) {
        if(check[key] == name) odb.deleteObjectStore(name);
    }
   
    var objectStore = odb.createObjectStore(name, option);
    return objectStore;
};


//=================================================
// DBのバージョンを比較
//-------------------------------------------------
// @param:  string
// @param:  string
//-------------------------------------------------
// @return: bool
//=================================================
var checkVersion = function(current, latest) {
    if(current != latest) return false;
    else return true;
};


//=================================================
// DBオープン
//-------------------------------------------------
// @param:  object
//=================================================
var openDB = function(callback) {
    var req = IDB.open(DB_NAME);
   
    // オープンに成功
    req.onsuccess = function(event) {
        alert("success");
        odb = req.result;
        var current = odb.version || 0;
        var latest = DB_VERSION;
       
        if(!checkVersion(current, latest)) {
            odb.setVersion(latest).onsuccess = function(event) {
                for(var key in DB_OBJECT_STORES) DB_OBJECT_STORES[key](odb);
                typeof callback == "function" && callback();
            };
        } else {
            typeof callback == "function" && callback();
        }
       
        getTodo(function(todo) {
            showTodo(todo);
        }, DB_SORT);
    };
   
    // オープンに失敗
    req.onerror = function(event) {
        alert("error");
    };
};


//=================================================
// ObjectStore の取得
//-------------------------------------------------
// @param:  string
// @param:  string
//-------------------------------------------------
// @return: object
//=================================================
var getObjectStore = function(name, mode) {
    var transaction;
   
    switch(mode) {
        case 'READ_WRITE': transaction = odb.transaction(name, transactionIDB.READ_WRITE);  break;
    }
   
    return transaction.objectStore(name);
};


//=================================================
// データ書き込み
//=================================================
var putTodo = function() {
    if($('#title').val().length > 0) {
        var data = {
            flg: 0,
            title: $('#title').val()
        };
        var todoObjectStore = getObjectStore(DB_TODO, 'READ_WRITE');
        var put = todoObjectStore.put(data);
       
        put.onsuccess = function() {
            $('#title').val('');
            getTodo(function(todo) {
                showTodo(todo);
            }, DB_SORT);
            alert('登録しました。');
        };
       
        put.onerror = function() {
            alert('登録に失敗しました。');
        };
    }
};


//=================================================
// データ読み込み
//=================================================
var getTodo = function(callback) {
    var todoObjectStore = getObjectStore(DB_TODO, 'READ_WRITE');
    var res = new Array();
    var get;
   
    switch(DB_SORT) {
        case 0:
            get = todoObjectStore.index('flg').openCursor(0);
            break;
       
        case 1:
            get = todoObjectStore.index('flg').openCursor(1, cursorIDB.PREV);
            break;
       
        default:
            get = todoObjectStore.openCursor();
            break;
    }
   
    get.onsuccess = function() {
        var cursor = get.result;
       
        if(!cursor) {
            typeof callback == "function" && callback(res);
            return;
        }
       
        res.push(cursor.value);
        cursor.continue();
    };
   
    get.onerror = function() {
        alert('読み込みに失敗しました。');
    };
};


//=================================================
// データ更新
//=================================================
var updateTodo = function(id, mode) {
    var todoObjectStore = getObjectStore(DB_TODO, 'READ_WRITE');
    var update = todoObjectStore.openCursor(keyrangeIDB.lowerBound(id, false));
   
    update.onsuccess = function() {
        var cursor = update.result;
       
        if(cursor) {
            var data = cursor.value;
            data.flg = mode;
            cursor.update(data);
            cursor.continue();
        }
       
        getTodo(function(todo) {
            showTodo(todo);
        }, DB_SORT);
    };
   
    update.onerror = function() {
        alert('更新に失敗しました。');
    };
};


//=================================================
// データ削除
//=================================================
var deleteTodo = function(id) {
    var todoObjectStore = getObjectStore(DB_TODO, 'READ_WRITE');
    var del = todoObjectStore.delete(id);
   
    del.onsuccess = function() {
        getTodo(function(todo) {
            showTodo(todo);
        }, DB_SORT);
        alert('削除しました。');
    };
   
    del.onerror = function() {
        alert('削除に失敗しました。');
    };
};


//=================================================
// データ表示
//=================================================
var showTodo = function(todo) {
    var container = document.getElementById('todoList');
   
    for(var i = container.childNodes.length - 1; i >= 0; i--) {
        container.removeChild(container.childNodes[i]);
    }
   
    for(var key in todo) {
        var li = document.createElement('li');
        var update = document.createElement('input');
        var del = document.createElement('input');
        var html = '';
       
        update.type = 'button';
        update.value = '変更';
        update.id = 'todoUpdate_' + todo[key].id;
        del.type = 'button';
        del.value = '削除';
        del.id = 'todoDel_' + todo[key].id;
        del.onclick = function() {
            if(confirm("削除しますか?")) deleteTodo(parseInt(this.id.replace('todoDel_', '')));
        };
       
        if(todo[key].flg == 0) {
            html += '[未処理]';
            update.onclick = function() {
                updateTodo(parseInt(this.id.replace('todoUpdate_', '')), 1);
            };
        } else {
            html += '[処理済]';
            update.onclick = function() {
                updateTodo(parseInt(this.id.replace('todoUpdate_', '')), 0);
            };
        }
       
        html += todo[key].title;
       
        li.appendChild(document.createTextNode(html));
        li.appendChild(update);
        li.appendChild(del);
        container.appendChild(li)
    }
};


//=================================================
// ソート切り替え
//=================================================
var sortTodo = function(id) {
    switch(id) {
        case 'sort1':   DB_SORT = false;    break;
        case 'sort2':   DB_SORT = 0;        break;
        case 'sort3':   DB_SORT = 1;        break;
    }
   
    getTodo(function(todo) {
        showTodo(todo);
    }, DB_SORT);
};


//=================================================
// メイン処理
//=================================================
$(function() {
    $('#register').click(function() { putTodo(); });
    $('#sort1').click(function() { sortTodo($(this).attr('id')); });
    $('#sort2').click(function() { sortTodo($(this).attr('id')); });
    $('#sort3').click(function() { sortTodo($(this).attr('id')); });
    openDB(function() {
        //
    });
});

いやマジで、上記サンプルを iOS 系で開いてもらえば分かりますが、11 行目の DB Object 取得部分で既に undefined が返ってくる。( =未実装 )

こっち使えと言いつつ実際は使えないってどうなん?

ねぇねぇ?どうして欲しいの??

と、割と本気で思います。

 

2013 年には…と淡い期待も有ったのですがやはりダメなようです。

iPhone4 、 iPad Retina のそれぞれ最新の iOS ファームで確認( 2013/01/08 )。ちなみに Chrome for  iOS でも当然ダメだった、ベースの webkit が同じなんだから当たり前か。

勿論 PC や Mac の webkit 系なら動くよ!多分 IE 10 とかも大丈夫。

 

結局「 無いものは仕方がない 」と言う事で、引き続き SQLite でゴリゴリ作るしか無いのかなぁ。

私は別に代替えで推奨の物があるなら、別に SQL だろうが key / value 型であろうが何でも構わないと思っています。

だって、欲しいものは「 要件の動きが実現可能 」「 動作の安定感 」「 アップデートによる保守性 」じゃないですか?

 

今市場を見れば「 全力で HTML5 を使えるのは スマホ / タブレット だけ! 」と言うのは火を見るより明らかです、ブラウザが webkit 系しか無い訳だし。

じゃあ、さっさと何とかしてちょうだい!と思うのはワガママなのでしょうか。

 

どう考えても PC or  Mac より、スマホ or タブレットの方が ローカル DB の恩恵が大きい と言う事実が追い打ちをかけています。

据え置き機がオフライン状態でしか使えないなんて事、回線トラブルとか引越し直後以外に有るの?って感じですし。

個人が買うマシンは明らかに 過剰なオーバースペック になって行ってるし、回線だって ISDN が珍しくなってきているこのご時世に「 トラフィックを減らす 」「 高速ブラウジング 」なんてのは、本当に大きな大きなサイトを運営していて、かなりサーバがしんどいよ、きっついよって思ってる極々一握りの世界なんじゃ無いかって思うんです。

 

実際は色々無茶が出来る据え置き機で開発を重ね、仕様が安定してから iOS 等のコンパクト OS に移植するって事なんでしょうけどね。

 

今年も悶々としながら続報を待っています、もう少し勉強を進めるべきか。

なんとなく下書きが残っていたので投稿しました。

それではまた。

Indexed Database API について(へっぽこプログラマーの日記様)
Indexed Database API(HTML クイックリファレンス様)
Indexed Database APIによるデータベース(Libro.様)

などなど、参考にさせて頂きました。

[SEO|WordPress] Yoast WordPress SEO の設定2〜 SEO アイコンを緑にしてみよう Vol.4-2〜

2013
04.08

皆さまこんにちわ、引き続き WordPress で SEO 設定です。

 

それにしても今年は花見で酒飲んでわーわーと言うのが無かったです。

結局大阪では桜満開時に晴天は1日だけでした、週末の爆弾低気圧とやらで見事に葉桜へと変貌を遂げてしまいましたし…。

確か日本には桜前線とか言うのが有りましたよね。

あれはどうなったのでしょう、無かった事になったんでしょうか。

 

さぁ、本題です。

お決まりの現状確認をしてみましょう、アナリティクスの方にウェブマスターの検索クエリを統合したのですが随分と平均順位に開きがあります。

統合した意味無いじゃんと思いますが、取り敢えず判定が厳しいウェブマスターの方を基準に考えていきます。

  • 「seo wordpress」での検索順位、平均 48 位。
  • 「wordpress seo」での検索順位、平均 20 位。
  • SEO アイコンを緑にしろ!

実際に検索してみたらそれぞれ 31 位、 14 位でしたけど。

こんなものは変動しますからね、そもそも CTR (クリック率)が 0.71% と 0.83% って感じでヒドイ成績です。

せめて 20% 、出来れば 30 〜 40% は欲しい所です。

 

では実際にやってみます、まずは前回全否定を食らったステータスをオールグリーンにしたいと思います。

項目は下記。

  • Article Heading
  • Page title
  • Page URL
  • Content
  • Meta description

まず気づいたのですか、 Focus Keyword は keyphrase にしない方が良い。

と言うか keyphrase にするにはかなり限定的な状況が必要になります、と言うのも前回の設定は下記の画像の通り

前回の設定

 

2 単語の keyphrase としていまして、下が全部 No とか言われて「なんでや!」となっていました。

これ、実はちゃんとした訳がありました。

ここを keyphrase にしちゃうとその順番で書かれていないと良しとされないんですよ(seo wordpress の順番で書かれていないといけない)、つまり「 AND 」条件な上に順番固定って感じかな。

てっきり順番関係なく「 OR 」だと思ってました…そうなると keyphrase だとかなり厳しいため今回は「 SEO 」一発で攻めてみようと思います。

ページには WordPress と言う keyword がちょこちょこ入っているので Focus したい keyword としては正解、と解釈出来るかなと。

下記それぞれやってみた結果。

 

Yoast WordPress SEO の設定

Article Heading

これはこの記事のタイトルを編集してあげれば OK 、注意点は Focus Keyword がちゃんと独立している事。

具体的には「SEOの設定」は NG で、「SEO の設定」と半角スペースを挟むと良いです。

 

Page title

これは「SEO タイトル」の入力フィールドで設定して上げれば良し、 Article Heading と同じく keyword の独立が必要。

 

Page URL

これはタイトルしたの「パーマリンク」の所を編集すれば行けました、 Page title と同じく keyword が独立している事。

ただし URL にスペースは入れられないので「 – 」半角のハイフンで独立させてあげましょう、ちなみにこれは「公開」にしないとチェックされないようです。

記事書いてすぐに公開して非公開設定にしておけば OK でした。

 

Content

これはもう嫌というほど出てくるので気にしなくて OK です、やはり独立させて上げると沢山認識します。

沢山認識しすぎると keyword density の調整で泣くことになります。

 

Meta description

これは「 Meta Description 」の所で編集です、制限文字内でページの分かりやすい説明書きましょう。

CTR が絡む重要な設定です、難しいんですよねコレ。

 

と言う訳で General はオールグリーンとなりました!

Generalタブは制覇

早速アイコンを確認すると…

チェックマークが赤い!?

真っ赤!

 

どー言う事よ!

割と自信満々に確認したので若干動揺しました。

 

答えは Page Analysis タブに有りました。

Page Analysis タブに暗雲立ち込める

何か 6 つ程暖色なのが有りますねぇ… General をクリアすれば後はそんなでも無いだろうと思っていましたが甘かったです。

仕方ないのでそれぞれ調べてみました。

  • The keyword density is 12.03%, which is over the advised 4.5% maximum, the keyword was found 19 times.

    キーワード出てきすぎ、減らすかもっと文章量増やして 4.5% 以下にしなさい!ってさ、エントリー最後まで書いたら薄まって良い感じになると思う。
    ちなみに画像の alt 属性も対象に取られます、デフォだと画像名がそのまま入るのでちゃんと入力しましょう。

  • There are 158 words contained in the body copy, this is below the 300 word recommended minimum. Add more useful content on this topic for readers.

    300 単語が必要最低限です、今 158 単語しかないよ!って言われてるんだと思うんですが、日本語って句読点で区切るから単語毎に半角スペース空ける英語とは違うんだよ!と言いたくなります。
    設定あるのかなぁ、結構な文章量だと思いますよ?
    今回の目的は緑アイコン点灯だからやるけどさ、納得行きませんね。

  • You have not used your keyword / keyphrase in any subheading (such as an H2) in your copy.

    subheading って書いてますが h2 要素書いてそこに含めてやれば行けました、ページタイトル自体が大見出しなんだから良いじゃんかと思うけど。
    h3 レベル以下の見出しは流石に追求されなかったので良かったです。

  • The slug for this page is a bit long, consider shortening it.

    スラッグ長いよ!短くしなさい!!って言われてます。
    これ自動で入るので毎回放置してたんですよ、今回は短く設定し直してみた。
    一昔前読んだ記事では「長い URL も効果的」みたいな事書いてたと思うんだけど、頻繁にアップデート来る Yoast さんを信じてみよう。
    ※ちなみに過去の実験で「URLを変えるのは致命傷」と言う事が実証されたので、過去エントリーのメンテナンスでは怖くて触れないから割と詰んでますねコレ。

  • The page title contains 39 characters, which is less than the recommended minimum of 40 characters. Use the space to add keyword variations or create compelling call-to-action copy.

    タイトル文字列は 40 文字が推奨されてます、今 39 文字なので何かキーワードを追加してみては?って事らしい。
    あと 1 文字なので単語を独立させるために半角スペースを追加してみた。

  • No outbound links appear in this page, consider adding some as appropriate.

    アウトバウンドリンクが無いから追加を検討してみたら?との事、強制では無いので黄色なのかな。
    丁度アウトバウンドリンクってなに?と思ったので調べた URL を貼らせてもらいます(SEO対策 キーワード辞典 さん)、自サイトのユーザーに取って有益な情報があるサイトへのリンクのようです。
    確かに重要ですね。

 

と言う具合にちまちまと修正を繰り返して…

Page Analysis タブも制覇!

 

Page Analysis タブをオールグリーンにする事が出来ました、そして同時に…

SEO アイコンの緑点灯

 

今回の目的である「緑アイコンの点灯」も達成です!

keyword density の調整ほんとにキツかった、SEO と言う keyword がエントリー内容的には悪かったようで申し訳ありません。

 

かなり強引なとこも有るので、校正してるとどうしても違和感が。

これも慣れて行けば上手く 誤魔化せる 条件を満たした文章が書けるようになるんだと思いたい所です。

 

が…なんだろう、こう達成感が余り有りませんね。

 

本音を言うと

 

ほんとにコレで良いのか?

 

って思ってます、はい。

一応推奨設定みたいなんでこれで様子みますが、毎回これするのはかなり大変ですねぇ。

果たしてどれほどの効果が有るのか、皆さんも気になると思いますので経過は報告して行こうと思います。

 

ちなみにこれって静的なサイト作る時でも wordpress で作ってみてチェックしたものを HTML 化すれば効果得れますよね、もし効果的ならそう言う利用方法も検討してみようかと思います。

ランディングページでは手間に見合わないと思いますが、末永くじわじわ伸ばしたいページにはマッチしてそうじゃないですか?

 

まとめ

では今回のまとめ行ってみましょう。

  • Yoast は日本語の解釈の関係で keyword によってはページ内濃度の調整が非常に厳しい。
  • 設定しなければならない要素が多く難易度が高い。
  • 無理にあわせに行くとエントリーが破綻する。(これは私の構成が悪いのも有りますが)
  • SEO 突き詰めるのはほんと大変。

こんな感じです、Yoast が日本語の句読点とかもちゃんと認識してくれればかなり負担は軽減されると思われます。

ひょっとするとそう言う設定が有るのかも知れませんね。

 

と言う訳で次回は細かい設定を見ていこう、と言うテーマでエントリーしたいと思います。

 

それではまた。

[SEO考察]Wordpressで検索上位を狙ってみるシリーズ
Vol.1 プロローグ
Vol.2 Google XML Sitemaps導入
Vol.3-1 SEO 3大要素「titleタグ」について
Vol.3-2 SEO 3大要素「質の高い被リンク数」について
Vol.3-3 SEO 3大要素「ドメイン単位の価値」について
Vol.4-1 Yoast WordPress SEOの設定1
Vol.4-2 [→]Yoast WordPress SEOの設定2

[SEO|WordPress] Yoast WordPress SEOの設定1〜プラグインを使って検索上位を狙ってみよう Vol.4-1〜

2013
02.20

皆さまこんにちわ、中の人です。

そして…

 

明けましておめでとうございます。

 

いやぁ、実はこのエントリーって今年一発目なんですよね。

違うんですよ、ちょっとWordpressの割と大きなプラグイン開発したり、どうせ年末年始は忙しいだろうと言う事で技術系のエントリーは難しいなと思ってたんです。

だから本当は例のドラゴンフルーツの観察日記をつけてお茶を濁そうと企んでたんです。所がどうでしょう、鉢に挿したあの日からまったくとにかく変化なしなんです、ちょっと塗装が割れてきたとかあっても良さそうなものなのに。

呆れるほど変化が無いので、毎日手でガシっと掴んで弾力有るかどうかだけを確かめる日々です、つまんないです。

※当社の代表曰く「死ぬとペコペコになる」らしいので生死確認だけは怠っていません。

 

さて、本題です。

私を始めとする「もう忘れたよ」って方のために現状を確認してみましょう。

  • googleへのインデックス状況:29/29、健全性オールグリーン。
  • 「seo wordpress」での検索順位、平均49位。
  • 「wordpress seo」での検索順位、平均25位。
  • プラグイン効果で順位をあげろ!

こんな感じだったはず、放置効果で検索結果がジワ上がりしていますね。ここから上位に上げるのが難しいのでちょうど良い位置に居ると思うことにしましょう。

また、この状態で分かることはキーフレーズによって検索結果が異なると言う事です。

どう言う理由かは解りませんが、ここ1ヶ月の計測によると「SEO」「Wordpress」と言う組み合わせの検索数が非常に高くなっています、当サイト上では1位&2位と言う計測になっているのでちょっとしたブームなのかも知れませんね。

と言う訳でこれも利用させて貰いましょう、乗るしか無いこのビッグウェーブに。

ちなみに当サイトで使うプラグインは Yoast WordPress SEO でございます、設定画面を開いてみましょう。

seo_wp_v4_1-1

とにかく深い所まで細かく設定出来るので、今回はダッシュボードと記事単位の拡張設定を見て行きましょう。

ダッシュボード

General

これはチュートリアルと設定のリセットなので放置します。

 

トラッキング

これはYoastさんがあなたのプラグイン利用状況とかを知るために匿名で情報送信してもよろしいか?ユーザーの詳細情報などは追ったり行儀の悪いことはしないからたのんますよ、と書いています。

お好みで良いかと、開発側としてはフィードバックあると有難いんですが強制では無いので気持ち悪ければチェックを外しても良いです。

 

Security

変化する部分を探してたんですが良く分からなかった、どうもかなり高度な知識がないと使いこなせないっぽいです。

セキュリティをカットしてでも思い通りに動かすための設定、と言った感じでしょうか。

私は専門家じゃないのでチェックをつけたままで。

 

ウェブマスターツール

goolge、Bing、Alexaなんちゃらのサイト解析ツールとの連携設定ですが、私はすでにgoogleウェブマスターで認証済みなので空白のまま。

 

ほぼ何も触らなくて良かったですね、これは楽ちんです。

次に投稿一覧を開くと、何やらレイアウトがキュウキュウになっていました。

seo_wp_v4_1-2

もう少しどうにかならなかったのかな?と思わなくも無いのですが、日時から後ろに項目が増えています。

  • SEO列:多分緑に光れば良いんだと思う。
  • SEOタイトル列:googleも最近勝手にタイトルを弄るらしい、タイトルを変更出来るのかしら。
  • Meta Desc.:多分<meta name=”description” content=”” />だと思う、投稿毎に決めればクリック率アップに期待出来ますね。
  • Focus KW:投稿における最大のキーワードを指定とかそんな感じかな、キーフレーズじゃ駄目なのかい。

ふむふむ、中々面白そうです。確かにこれらを投稿別に設定すれば、より何についてのページなのかが明瞭化されますね。

では投稿ページに入ってみましょう。

seo_wp_v4_1-3

エディタの下にこれが表示されてました、タブが分かれてて随分と気合が入っています。早速弄って行きましょう。

Snippet Preview:

検索エンジンの検索一覧にはこんな感じで表示されますよ的なものです。

 

Focus Keyword:

先ほどキーフレーズは駄目なのかいと言ってましたが、説明文に「このページのキーワードかキーフレーズは何だい?」って書いてますね。試しに「seo」と打ってみたら候補みたいのが出て来ました、

seo_wp_v4_1-4

この一連の実験はのキーフレーズでの上位表示狙いなので「seo wordpress」と入力。

 

SEOタイトル:

スニペットのプレビュー通りに出てるなら良いじゃんと思ったのですが、

検索エンジンにおけるタイトルは70文字まで。

と言う制約があるから、キミが決めなさい。何も入れなかったらYoastの設定にあるタイトルテンプレに従うよ!との事。

※-17 chars left. てのは現在の設定だと17文字はみ出してるよって事です。

いまいちどう言う動きなのか分からなかったので、当サイトで最もアクセスが多いページのスニペットプレビューと、実際のgoogle検索時の表示を見比べてみました。

 

Yoast Snippet Preview:

jQueryのfadeIn/fadeOutした時にpng画像が変になる時のTips – Web 業界の技術屋 | VIVID Labs.

Google search result:

[IE7|IE8] jQueryのfadeIn/fadeOutした時にpng – Web 業界の技術屋

 

全然違うじゃない。

これもクリック率に影響があると思うので編集したいですね、固定に出来るのだろうか。

 

Meta Description:

これはスニペットの灰色の部分でしょう、多分。

 

取り敢えず全部埋めてみましたが、キミの指定したキーワードは全く見当たらんぞ!と怒られまくってます。

seo_wp_v4_1-5

ちなみにタイトルの所で「[」「]」を使うとその部分が消えてしまうようなので剥がしてみました、この状態でプレビューしたもののhtmlソースを覗くとtitleタグとmetaタグのdescriptionがここで設定したものに書き換わっておりました。

要するに投稿名では無いタイトルを付けれるって事ですね、サイト名とか割とどうでも良いのでバッサリ切り捨てて、シリーズ名等はdescriptionに突っ込みシンプルで分かりやすいタイトルに変更出来たんじゃないでしょうか。

またSEOチェックのアイコンがグレーから黄色に変化、

seo_wp_v4_1-6

 

キーワード周りの問題を解決すれば緑になるのかな?

 

という訳で、今回はここまで。

予想していた通りなのですがどうしてもエントリーが肥大化してしまいますね、tipsみたいな「問題勃発→解決策」と違って実験するのを一緒に見ていってもらおう、と言う趣旨なので仕方ないのですが。

次回はSEOチェックを緑にしよう、と言うテーマでエントリーしたいと思います。

 

それではまた。

[SEO考察]Wordpressで検索上位を狙ってみるシリーズ
Vol.1 プロローグ
Vol.2 Google XML Sitemaps導入
Vol.3-1 SEO 3大要素「titleタグ」について
Vol.3-2 SEO 3大要素「質の高い被リンク数」について
Vol.3-3 SEO 3大要素「ドメイン単位の価値」について
Vol.4-1 [→]Yoast WordPress SEOの設定1

[サボテン]ドラゴンフルーツを植えてみた[月下美人]

2012
12.17

皆さん師走は如何お過ごしでしょうか、バタバタしていますか?

本日、我社のCO2を減らすために植物的な物を植えようと言うことでコイツを刺して…植えてみました。

IMG_3218

なんか満月の夜に月下美人のような美しい花を咲かせるサボテンらしいです、そのタイミングで受粉させるとドラゴンフルーツが実るとか実らないとか。

 

ちなみに彼?は沖縄出身です、遥々空を飛び大阪の地に降り立ったものの「鉢が無い」「土が無い」「ネットが無い」「鉢底石が無い」やらで随分と時間がかかってしまいました。

でもなんだか顔色は良いし大丈夫だろう、と言うことで本日ついに植樹式的な事を私が1人で細々と執り行いました。

IMG_3220

まずはネット、鉢底石が下から飛び出さないようにするのかな。結構目が荒い。

IMG_3221

そして鉢底石、コイツのせいで随分と時間がかかった。

なんでもコイツを入れておくと土がフワッとなるらしい、根詰まり防止に効果的なんだそうだ。

分量は裏の絵を見ながら入れる土の高さの1/3ぐらいを雰囲気で投入。

IMG_3222

そしてサボテン・多肉植物の土をザバザバと入れる。

パッケージに「サボテン、多肉植物はこの土だけでOK!!」と書いているので、大丈夫なはずである。

IMG_3224

ではサボテンを開封、良い感じにカラッとしている。

なんだか「はよう植えんかバカタレが」と言う声が聞こえてきそうです。

IMG_3225

真ん中を軽くほじってからおもむろに突き刺して見た所、結構グラグラしてたので少し足元に土を盛って誤魔化した。

うーん、中々それっぽいんじゃなかろうか。

IMG_3226

次に水やりですが、私は過去に2カブ程サボテンを根腐れで昇天させてしまった事があるのでかなりビクビクしながら水をやりました。

新しい土がかなり乾燥していたので「表面が湿る程度」が良く分からなかったため、なおの事ビクビクと。

 

取り敢えずこれで大丈夫…だよね?だと思うので、これから注意深く観察しながら育てたいと思います。

いや、その前に一言。これだけは宣言しておきたい。

 

どうも色が健康的過ぎると思って、断面部分等を観察すると…

IMG_3227

これ絶対なんか塗ってるよね!

 

ペンキ的なモノ塗ってるよね!!もう全体がこの色で塗られているっぽんですよ、ホントは枯れてたりしないだろうかと戦々恐々としています。

実際中身はどんな色なんだろう。

 

一応これは「島人ぬ挑戦(しまんちゅぬちょうせん)」と言う事で受けて立ってみようと思います。

 

それではまた。

[SEO|WordPress] SEOの3大要素「ドメイン単位の価値」〜プラグインを使って検索上位を狙ってみよう Vol.3-3〜

2012
12.05

皆さまご無沙汰しております、中の人です。

12月と言えば年の瀬と言う物が間近に迫り「いやぁ今年も早かったなぁ」なんてベタなセリフが飛び交っているのでは無いかと思いますが、ほんとに早かった…。

うん、早かった。ちょっと込み入ってるんだーとかで放置して、気づくとエントリーの間がこんなに空いてるんですもの。(ゴメンナサイ)

お決まりのまとめが下の方にあるので、面倒な人はそこだけ読んで貰えればと思います。

免責事項:当エントリーではWordpressのSEO関係プラグインの導入と、実験によりだいたいあってる事が実証された私のささやかな知識を織り交ぜて紹介しています。 セオリーから外れた事をしていたり、参考にして検索順位が落ちた!と言う事がありましても運営は一切の責任を負いませんので、予めご了承ください。

ちなみにサンプルは1件だけなので、鵜呑みにしすぎないように。

ではまず、3大要素のおさらい。

  1. titleタグは超重要

    なんと言ってもサイトの顔、クローラーも人間もかなり重視する部分です。
  2. 質の高い被リンク数

    沢山のサイトからのリンク紹介などは有難い以上の効果がありますが、ここには注意点があります。
  3. ドメイン単位の価値

    制御し辛い部分ではありますが、これが高まるともの凄いアドバンテージを得る事が可能になる…と思う。

 

筆者本人が状況を把握していないので、中間報告と言うより現状把握。

  • googleインデックス数:27/27新エントリー等が追加されていますね、よろしい感じです。
  • キーフレーズ「wordpress seo」での検索結果:これウェブマスターツールで平均順位見れるんですね!えーと…「200位」だそうです「圏外」とします。

何も進歩していない、と言う事がよく分かりました。

余談になりますが、しばらく放置していた所「ie7 png」や「ie8 png」のバージョン付きキーフレーズが平均2〜3位と大復活を遂げていました。
旧URLのエイリアスとして認識されたのか、ページ自体の評価が元々高かったからなのか不明ですがちょっと嬉しいですね。

 

ドメイン単位の価値

では件の解説を始めましょう。

前回チラッと出しちゃってるのですが、コレはズバッと言ってしまえば検索エンジンが評価したドメインの価値によって検索結果に優劣が発生する。と言った感じだと思っています。

私の予想では下記のような優劣が発生していると思われます。

  • サイトAとサイトBに同一の特定キーワードで大体同じ評価のページが存在
  • 上記条件を満たしている時、サイトのドメインの価値が高いほうが上に来る

こんな感じ、割とイメージしやすいのでは無いでしょうか?

これは検証したくても、当サイトのドメインに超有名ドメインレベルの価値を付ける事自体不可能と言えますので、検索結果を眺めながら「きっとそうだろう」と言う机上の理論展開である事はご了承願います。

では、実際の所どうなっているかを見て頂きます。
キーワードは「ホームページ」単体。

2012/12/06 11:49時点での順位

  1. wiki
  2. 某社無料ホームページスペース
  3. 日本郵便
  4. 某社簡単ホームページ作成サービス
  5. 首相官邸
  6. 北海道
  7. 東電
  8. サントリー
  9. 国税庁
  10. 某社ホームページ作成サービス

本来なら「ホームページ」と言うキーワードは各webコンテンツ制作会社やドメインサービスを行なっている企業が、上位表示したいものです。

それはもう「壮絶なSEOバトル会場になり得る」と言っても過言では無いでしょう。

所が実際は上記のような結果になります、wikiはともかく殆どが「誰もが知る」名前がズラッと並んでいますよね。

しかもこれら有名どころは「titleにホームページと書いている」「本文に1〜3個程ホームページと書いている」のみ、と言うとてもとてもゆる〜い条件で TOP10 に入っている訳です。

これがドメイン単位の価値、と私は定義しています。

 

勿論我々の業界では単一検索に勝負をかけているわけではなく「ホームページ 制作」や「wordpress 制作」などのキーフレーズに勝負をかけています。

ユーザーも調べたくて検索する訳ですから「何」を「どうしたい」と言う2単語がほぼ発生するので理に叶っていますよね、もし同じ事を超有名ドメイン持ちさんがやると、かなりぶっちぎりのページパワーが無いと上回るのは難しいのではないかと。

 

では、この定義付けをした「ドメイン単位の価値」はどのような条件を満たせば上がるのか?と言う事になります。

輪をかけての空論で申し訳ないですが、私の考える一部要因として下記のような物があります。

  • オールドドメインである。(どう言う優位性があるのか不明ですが…昔から言われてます)
  • インデックスページにフレッシュな情報が定期的に掲載されている。
  • 検索エンジンが重要なページである、と認識しているコンテンツを沢山持っている。
  • 生きた被リンクを沢山持っている。
  • リンク経由、ダイレクト構わずユニークアクセス数やPV数が大きい。(これはかなり変動性が高いですが)
  • 他サイトに頻繁にアドレスが出てくる。(話題にされていると言う事です)

他にも有るんでしょうけど、前回の検証データを読み解いていくとこれがシックリ来ます。

故にドメイン単位の価値を上げたければ、良質なコンテンツを沢山持て!となります。

 

まとめ

今回は3大要素全てについてまとめます、上位表示には3つが1つになって初めて成るモノですからね。

  1. 適切な title タグを設定して検索エンジンにどう言うコンテンツなのかを分からせろ!
  2. 適切な title タグを設定して人間にアピールせよ、クリックされなければ意味無いよ!
  3. 他サイトに宣伝して貰うだけでは効果薄、クリックされてナンボだよ!
  4. 話題にされて色んなドメインからリンクされるような魅力的なコンテンツを作成しよう!
  5. 話題になるような魅力的なコンテンツなら「4」は高確率で生きたリンクになるよ!
  6. 話題にされれば検索エンジンからの流入が大幅に上がるから「2」をちゃんと設定しておこう!
  7. 全ての条件を満たすと優良コンテンツ持ちドメインとして価値が上がり、順位もじわ上がりするよ!
  8. 「7」の結果、また人の流入が増えて好循環するよ!

これが現時点の私の結論です。

 

今回の解説などは、前回の検証(特定キーフレーズで1位表示にしたい)から導き出したリアルな順位変動の軌跡です。

個人的に「6〜8」のパラダイス・ループに突入すると、かなり強烈なページパワーになると思っています。

てな感じでシメ。

 

プラグイン導入からオプション設定に入るまで、こんなに時間が空くとは思いませんでした。

タイトル詐欺!って言われないように次回から色々設定してみます、その時々にこの3大要素からの結論をベースに「こうすれば良いんじゃね?」と操作して行く予定です。個人的に面白そうだと思っています。

 

それではまた。

[SEO考察]Wordpressで検索上位を狙ってみるシリーズ
Vol.1 プロローグ
Vol.2 Google XML Sitemaps導入
Vol.3-1 SEO 3大要素「titleタグ」について
Vol.3-2 SEO 3大要素「質の高い被リンク数」について
Vol.3-3 [→]SEO 3大要素「ドメイン単位の価値」について