タイトルや見出しの確認など、SEOに便利なブックマークレット

ウェブ制作のページ確認において、非常に便利なブックマークレットをつくったので紹介します。

ページタイトルや、見出しタグのヒエラルキーを表示

このブックマークレットをつかえば、現在のページの以下の情報を確認することができます。

  • TITLEタグ表示
  • METAタグ表示
  • H1,H2,H3,H4,H5,H6のヒエラルキー表示とクリック

導入方法

ボタンをブックマークバーへドラッグするだけで、すぐに導入できます。 動作確認済みブラウザは、Google ChromeとFirefox、IE9 になります。 動かないブラウザがあれば、教えて下さい。

↑ボタンをブックマークバーにドラッグ

特徴

TITLEタグ、METAタグ表示

SEOに重要なTITLEタグや、METAタグを表示し、確認できます。

H1,H2,H3,H4,H5,H6のヒエラルキー表示

SEOに重要なH1,H2などの見出しタグを、ヒエラルキーで表示し、確認できます。

ページ内リンクに

見出しタグはページ内リンクとして利用でき、ページの長いページのブラウズなどに便利です。

ソースコード

このブックマークレットのソースコードを掲載します。自由に改修してつかってください。

ソースコードを編集した場合は、ブラウザのコンソールにコピペしたら動かせるので、それで開発していってください。

完成したら、以下のサービスなどを利用してブックマークレット化できます。

http://userjs.up.seesaa.net/js/bookmarklet.html

?
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
javascript: (function() {
    var UID = 'g4fdD5';
    if (window[UID]) return;
    window[UID] = 1;
     
    var hs = document.querySelectorAll('h1,h2,h3,h4,h5,h6');
    var current = 0;
    var tree = [];
    var currentTree = tree;
    var prebTree = [null, null, null, null, null, null];
 
    function setTree(_node, _level) {
        if (current> _level) {
            if (prebTree[_level]) {
                currentTree = prebTree[_level];
            }
        } else if (current < _level) {
            var a = [];
            currentTree.push(a);
            currentTree = a;
        }
        currentTree.push(_node);
        prebTree[_level] = currentTree;
        current = _level;
    }
 
    for (var i = 0; i < hs.length; i++) {
        setTree(hs[i], hs[i].tagName.charAt(1) - 1);
    }
    var nn = 0;
    function getTag(_tree, _l) {
        var cs1 = (_l === 0) ? '' : 'margin:0 0 0 5px;border-left:solid 1px #666;';
        var cs2 = [
                'padding:5px 0 0 5px;',
                'padding:5px 0 0 10px;',
                'padding:0 0 0 10px;',
                'padding:0 0 0 10px;',
                'padding:0 0 0 10px;',
                'padding:0 0 0 10px;'
            ];
        var cs3 = [
                'font-size:14px;font-weight:bold;color:#fff;',
                'font-size:12px;font-weight:bold;color:#fff;',
                'font-size:10px;font-weight:bold;color:#ccc;',
                'font-size:10px;color:#ccc;',
                'font-size:10px;color:#999;',
                'font-size:10px;color:#999;'
            ];
        var s = '';
            s += '<ul style="padding:0;' + cs1 + '">';
        for (var i = 0; i < _tree.length; i++) {
            s += '<li style="' + cs2[_l] + 'margin:0;text-align:left;list-style:none;">';
            if (Array.isArray(_tree[i])) {
                s += getTag(_tree[i], _l + 1);
            } else {
                var id = 'A'+ (nn++);
                s += '<a href="#' + id + '" style="' + cs3[_l] + 'margin:0;text-decoration:none;">';
                s += '<span style="display:inline-block;background:#666;color:#333;padding:1px;margin:0 2px 0 0;">' + _tree[i].tagName + '</span>';
                if(_tree[i].innerText){
                    s += _tree[i].innerText + '</a>';
                } else{
                    s += _tree[i].textContent + '</a>';
                }
                id = (_tree[i].getAttribute('id')) ? _tree[i].getAttribute('id') : id;
                _tree[i].setAttribute('id', id);
            }
            s += '</li>';
        }
        s += '</ul>';
        return s;
    }
    function getMeta(_s){
        var ele = document.querySelector('meta[name='+_s+']');
        if(ele){
            return ele.getAttribute('content');
        } else{
            return '';
        }
    }
     
    var tag = '';
        tag += '<div style="background:#000;margin:-10px;margin-bottom:10px;padding:10px;font-size:12px;">';
        tag += '<div style="color:#666;">title</div>';
        tag += '<div style="color:#fff;font-size:14px;font-weight:bold;">' + document.title + '</div>';
        tag += '<div style="color:#666;">meta description</div>';
        tag += '<div style="color:#aaa;">' + getMeta('description') + '</div>';
        tag += '<div style="color:#666;">meta keywords</div>';
        tag += '<div style="color:#aaa;">' + getMeta('keywords') + '</div>';
        tag += '</div>';
        tag += getTag(tree, 0);
    var view = document.createElement('div');
    view.innerHTML = tag;
    view.setAttribute('style', (function() {
        var s = 'z-index:9999;position:fixed;max-width:300px;top:0;right:0;max-height:100%;padding:10px 10px 50px 10px;';
        s += 'overflow-y:scroll;box-sizing: border-box;';
            s += 'background:#333;color:#fff;box-shadow:0px 0px 5px rgba(0,0,0,0.2);line-height:1.4em;font-size:12px;';
        return s;
    })());
     
    document.querySelector('body').appendChild(view);
})();

関連記事

エントリー一覧

人気エントリ

ソーシャル

About This Site

HTML、CSS、Javascript、デザイン、3D、モバイルアプリ、CMSなど、ウェブ制作関連の話題を扱うブログです。Fireworksのオリジナル拡張機能の配布や、デザインリソースの配布、オリジナルツールの公開も行っています。

About Me


大阪在住フリーのウェブデザイナーの、ピクセルイメージ田中です。長年、ウェブサイト構築のお手伝いを行っており、デザインやプログラムを中心に、Flash全盛期につちかったモーショングラフィクスのセンスを生かした動画作成や、サイト構築に便利なCMSの開発も行っています。

JS CMS -- DBレス・簡単導入・無料のWebサイト構築用オープンソースCMS
ピクセルイメージ | JS CMSの導入、カスタマイズの依頼は...