H1の神業。

SEO とか SEM とかまだ言ってるんですよ。もうね、アホかと。バカかと。お前らな、SEO とか SEM とかで普段自分でサイト作ってないのにほざいてんじゃねーよ、ボケが。SEO学会？統SEO教会？SEO福の科学？宗教かっつーの。

数年前まで HTML の <H1> タグのテキストを画像置換えで CSS の text-indent: -9999px; や display: none; がスパム云々で使う使わないが話題になっていたけど、この期に及んでまだ text-indent: -9999px; で頭悩ますとは、、って事で SEO とか SEM とかの情報は宗教的な話なので、ここでは単に <H1> タグの神業をご紹介っ。

[ Gmail 様 ]

– HTML

<h1 class=”ce” role=”banner”>Gmail Logo</h1>
<div id=”:rl” class=”GcwpPb-VArq Rgky9″ title=”Gmail by Google” role=”link” idlink=”” style=”background-image: url(“images/2/5/logo4.png”); background-position: left top; background-repeat: no-repeat;”></div>

– CSS

.ce {
    height: 9px;
    left: 0;
    position: absolute;
    top: -10000px;
}

あの Google 様はさすがに <H1> に <IMG> というのが基本なのだが Gmail の新レイアウトで！まさかの <H1> が position で -10000px もの彼方に雲隠れ！

[ livedoor 様 ]

– HTML

<h1 id=”logo”>
    <a onclick=”_gaq.push([‘_trackEvent’, ‘PC_ヘッダー’, ‘ロゴ’,”]);” title=”livedoor” href=”/r/logo”>
        <span>livedoor</span>
    </a>
</h1>

– CSS

div.title-outer-2 h1#logo span {
    display: none;
}

livedoor 様は <H1> の <A> の入れ子で <SPAN> を秘技 display: none;！しかし <A> の onclick が何をしているのかが気になる、、

[ Facebook 様 ]

– HTML

<h1 id=”pageLogo”>
    <a title=”ホーム” href=”http://www.facebook.com/”></a>
</h1>

– CSS

#pageLogo a {
    background-color: #3B5998;
    background-image: url(“http://static.ak.fbcdn.net/rsrc.php/v1/yb/r/Au6ko5gyOOb.png”);
    background-position: -104px -235px;
    background-repeat: no-repeat;
    display: block;
    height: 31px;
    width: 103px;
}

Facebook 様はよもやの <A> タグに何も入れず title の属性のみ。さすがです。そんなのアリなの？？

[ Twitter 様 ]

– HTML

<div id=”logo”>
    <a href=”/”>Twitter</a>
</div>

– CSS

#logo a {
    background: url(“../img/twitter_logo_right.png”) no-repeat scroll 20px 9px transparent;
    color: #FFFFFF;
    display: block;
    height: 40px;
    margin-right: 5px;
    outline: medium none;
    text-indent: -9999px;
    width: 140px;
}

そもそも <H1> を使ってない！！なんでー！？！？

[ mixi 様 ]

– HTML

<h1>
    <a id=”pagetop” href=”http://mixi.jp/home.pl?from=h_logo”>
        <img width=”72″ height=”30″ alt=”mixi” src=”http://img.mixi.net/img/basic/common/mixi_logo_large001.gif”>
    </a>
</h1>

– CSS

#headerArea div.headerLogo a {
    display: block;
    height: 30px;
    overflow: hidden;
    text-indent: -9999px;
}

最近ロゴを変更した mixi 様はデコレーションがあるせいか、<IMG> タグを隠してからの重ね画像 2 枚使い。

[ Spotify 様 ]

– HTML

<a href=”/int/”>Spotify</a>

– CSS

#header a.logo {
    background-position: -250px -40px;
    display: block;
    height: 76px;
    margin-bottom: 8px;
    text-indent: -999em;
    width: 76px;
}

話題のスポティファイ様はそもそも <H1> タグなしから〜の〜？？ <A> タグ text-indent マイナスインデント〜。ぽいぽいぽいぽぽいぽいぽぴ〜♪

[ 30days Album 様 ]

– HTML

<h1>
    <a href=”http://30d.jp/”>30days Album&trade;</a>
</h1>

– CSS

.logo h1 a {
    background: url(“/images/common/png.png”) no-repeat scroll 0 0 transparent;
    display: block;
    font-size: 0;
    height: 60px;
    text-indent: -7878px;
    width: 180px;
}

マイナーだけど神がかりすぐるので紹介。 ペパボの 30days 様はらしいコーディングで text-indent マイナスインデントなのに遊び心満載。text-indent: -7878px; なんとせんだみつおのナハナハ！！

定番は <H1> タグに <IMG> タグで画像を配置するんだけど、ムーブメントは HTML 5 で <H1> タグに囚われない俺流なコーディングが主流な感じがしてきたね。その中でも Apple や gree ですら相変わらずにマイナスインデントだし結局はテキストを隠すのには変わらない。最初からコンテンツの質、量、更新頻度で検索の順位が変動するものを、人為的に変えることなんかできない訳！それがダメなら広告出せば好いだろっ。あん？？
マークアップエンジニアは日々宗教なヤシたちと闘いつつデザインやテクニックやオモロなことを駆使してコーディングをしているのですYO！