vanillaice (Akira)

vanillaice (Akira)

無作為にみなさんのカスタマイズ状況を拝見している中で「あぁこれはマズいなぁ」と思う時がしばしばあります。
とはいえ私が直接押しかけてどうこう言う、ということは致しませんので、
カスタマイズをよく行っている、という自覚がお有りの方は参考にして頂けると嬉しく思います。

毎度のことですが、web一般の内容ではありません。
「私のテンプレでは」という但し書きつきです。
汎用的な内容もありますが、そこは自己判断でよろぴこピコ太郎(カナブン) (o'ω')ノ


h1を削除してはなりませぬ


例えば私のテンプレでこんなのありますね ↓

All-about-us




左上には「Welcome to my blog」と入っていますが、ここは特に重要な意味は持たせていません。
意味を持たせる、というのはですね、
htmlというのはデザインのためにある言語ではありません。
ページ構成の「意味」「定義」を行うためのものです。
ページに散在している要素の、どこが何を司っており、どこが何を意味するものなのか。
それを定義するのがhtml。
「セマンティック」という言葉を目にすることがあるかと思います。
セマンティックとは英単語的に「意味」「意味論」のことを言います。
「セマンティックウェブ」と言った時には

情報リソース(htmlなど)に意味を付与することで、コンピュータが自律的に情報処理できるようにすること、またそのための技術



のことを指します。
というわけで、テンプレートのhtmlソースというのはテケトーに書かれているわけではなく、
意味や定義の集まりなのでございます。
例えば
「この部位はナビゲーションですよ、リンクの集合体ですよ。」
ですとか
「ここはセクションですよ、明示的リストですよ。」
とかね (´・ω・`)

で、話しをサンプルのテンプレートに戻しますと。
Welcome〜 の部分は特に意味を持たない部位です。
これといって重要ではありませんよ、という部位。
一方 ブログ名になっている、ヘッダー中央にあるテキスト
これは非常に重要な意味を持っています。
大見出し です。

でね、
「なんかWelcomeのところをブログ名にした方がええかな〜。」
的感覚でそれこそ大雑把に処理してしまうと、ページにとって大変重要な大見出しが失われてしまいます。


● Welcome該当部分htmlソース内容

<p id="welcome">Welcome to my blog</p>


先程「特に意味はない」と書きましたが、厳密には「段落」という定義をしています。
pタグ自体がそういう意味を持っています。


● ブログ名該当部分htmlソース内容

<h1 id="blog-title">
<a href="<%url>"><%blog_name></a>
</h1>


緑色が「大見出し」を意味する h1タグ。
そしてブログ名を出力する
<%blog_name>
というFC2独自変数を挟んでいるのが、トップページ(ホームページ) に遷移させるためのaタグです。

この両部位を単純にこうしている方が結構いらっしゃるんです ↓

左上Welcomeを

<p id="welcome"><%blog_name></p>


変数部分はあるいはブログ名の直打ちかもしれません。
いずれにしても
Welcome to my blog → ブログ名
への変更。そして中央のブログ名を削除

これアカンですねぇ (´・ω・`)
ページで大変重要な大見出しが失われてしまいます。
見出しはどれも重要ですが、その中でも最上位の「大見出し (h1)」
これは削除するべきではありません。

また、ヘッダーのブログ名はaタグで挟みましょう。
閲覧者がブログのホームに移動する際、最も直感的にクリックするのが「ブログ名」です。
もしかしたらカスタマイズによって訪問者のトップページへの遷移を自ら防いでしまっているかもしれません。
トップページへ行けないとなると当然各個別記事(パーマリンク)への訪問の機会も削ってしまいます。
アクセスをみすみす逃すことにもなりかねません。

見出し = 文字の大きさ
と思っている方もまだまだ多いかと思いますが、フォントサイズは意味や定義に影響を与えるものではありませんので、
文字の大きい小さいは問題じゃないんです。大事なのは「位 (くらい)」です。
他のテキスト部位よりもサイズが小さかろうが、大見出しにすべき箇所にはしっかりと h1 の定義を与えます。

上記例のように、
左上のWelcomeをブログ名に当て、中央のブログ名は削除、というカスタマイズをするのであればこれが最も望ましい形 ↓

<h1 id="welcome"><a href="<%url>"><%blog_name></a></h1>


idのwelcomeという名称はスタイリングに用いていますので、変更してしまうと見た目が変わってしまいます。
従ってそのままで。
スタイリングによる定義への影響はありません。
変更すべきは pタグ から h1タグへ。
そしてブログ名は aタグ でしっかりと挟みます。
これで左上の部分が 段落を意味するp要素 から 大見出しを意味するh1要素 へと変更されます。


ついでに「見出し」について

html5での見出しの付け方はお大きく2種あります。
一つは「階層によって位を下げていく」書き方。
もう一つは「セクショニングが正しく行われている場合に限り、ほぼ全てを h1 で揃える」書き方。
私が採用しているのは前者です。
「FC2ブログのエディター(投稿画面)のツールを利用して記載する『見出し』は h3 から」
というのがその理由です。
・ html5は全部 h1 で書く!
・ 記事のタイトルを h1 にした方がSEO効果が高い!
というのをしばしば見かけるのですが、それは思い違いです。
自分が利用しているテンプレートがどちらの形式で構成されているのかをしっかり踏まえてから判断すべきところです。

また、いまだによく見かける
・ h2やh3が複数ある、重複はよくない
これも思い込みです。
セクショニングによっては重複が起こるのは寧ろ自然です。
あくまでもhtml5の話しですよ? (´・ω・`)


単純にテキスト内容だけを入れ替えない。アウトラインに注意する。


というのを念頭にカスタマイズされると良いですね。
アウトラインというのは階層構造のことですが、そこはあまり深く考えず、
該当テキストがどんなタグに挟まれているのかを意識し、そのタグは変更せずに位置を移動させる、ぐらいに思えば良いかと思います。
そしてリンクになっているものはリンクの aタグ を削除してしまわない。
これも注意。
必要があるから設定されているので削除はしない。
単純に該当部位をカット&ペーストしてしまってはスタイリングが失われますので、移動先に元々あるid名やclass名は踏襲しましょう。

関連記事

Comments 2

There are no comments yet.
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/02/02 (Thu) 15:04 | EDIT | REPLY |   
Akira  
To SEOの件 内緒さん

先に重要性の高い要件から。

> html4.01に書き直し〜

これはいただけません (´・ω・`)
現在のweb標準はhtml5ですから、それ以前のhtmlバージョンというのは「標準・基準を満たしていない」ことになります。
ある特定のソースコードを利用したいが為にページ全体(ブログ全体)のバージョンを降格させるというのは極めてナンセンスですし、狂気の沙汰と言っても良い(笑)
少し思うところがあるのですが、
「SEO対策済みテンプレート」の謳い文句につられて古いバージョンのテンプレートを選択しておきながら「SEOがSEOが〜」と言っている方がとっても多いように思います。
SEOとかなんとかその前にそのテンプレはhtml4ですが良いんですか??
ってことです。
3年前のSEOと現在のSEOなんて全然違いますしね (´・ω・`)
今後のwebサイトはhtml5で作るのが当たり前、と思った方が良いです。
様子見、といまだに言ってる方へは、
「今から変えたんじゃ遅すぎるわ。」
というアンサーで(笑)

私の制作したものはhtml5ですので、内緒さんが既に行われてしまったように単純にドキュメントタイプ宣言を変更したのでは、html4時代には存在しなかったタグがてんこ盛りにあるわけですからそちらの処理も必須です。
例えば<section>や<article>あるいは<nav>などの要素はhtml5で新たに追加されたものですので、html4では解釈できません。

==========

> アウトラインを保ったまま移動すれば〜

内緒さんの今回の場合はそれでOKです。
(htmlバージョンの話しはさておき)
ただしhtmlの入れ子にはルールが存在しますので「いかなる場合でもそれでOK」とは言えません。
例えば

<section>
<h2>見出し内容</h2>
<div>内容</div>
</section>

というのがあって

<p>文章</p>



<section>
<p>文章</p>
</section>

これはダメなパターンです。
sectionには必ず見出しが要ります。
ケースバイケースですから、その都度調べながらされるのが一番です。
よろしくお願いします。

======

> h1の件〜

h1にはキーワードが含まれるのが望ましいわけなので、記事タイトルにキーワードが含まれるのであればそうした方が良いかもしれません。
ただ、SEO対策の説明を主旨としたブログを見るとわかるように、
「h1にキーワードを〜」という記事を書いているサイトでもページ構成を紐解いてみると、ブログ名にh1、記事タイトルにはh2、という場合がほとんどです。
何故ならそういったサイトはブログ名そのものがキーワードですし、アウトラインの構成もh1〜h6を使い分ける構成になっているからです。
一部だけを見て全体を損なわないように注意されると良いと思います。

* 一部だけを見る = サイトなどで紹介されている理屈や手法に飛びつくこと

2017/02/02 (Thu) 15:43 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
該当テンプレートの専用記事にお願いします。無関係な記事でのコメントはお控えください。
テンプレートカテゴリ