下記のようにしたい時どのようにコーディングしますか？

Question

下記のように、見出しと、WEBフォント（me）があるようにコーディングをしようと思っているのですが、方法１のようにSEOを考えて、hタグに入れない方法と、方法２のようにhタグに入れてしまう方法どちらら良いと思いますか？

プロのフロントの方に教えていただければありがたいです。
それともこのデザイン自体に問題がありでしょうか？

＊とはWEBフォントです。

・また、<article>をアウトラインとして使っているのですが、セクションをまとめる物として下記のように使うことは問題ないでしょうか？
divと違って、中にコンテンツがない場合は使えないと聞いていますが、下記の場合は、直後にはコンテンツはないですが、もっと子孫には存在します。
直下にない場合はすべてdivなのでしょうか？

また並んでいるdivはデザインのためなので、気にしないでください。

方法１

<article> <div class="skew1"> <div class="skew2"> <div class="content"> <section class="main__about-me"> &#xe001;&nbsp; <h2 class="main__about-me__heading main__common-heading">ABOUT&nbsp;&nbsp;ME</h2> </section><!-- /#about --> </div> </div> </div>

			<div class="skew1">
				<div class="skew2">
					<div class="content">
						<section class="main__about-me">
						&#xe041;&nbsp;
						<h2 class="main__about-me__heading main__common-heading">MAP</h2>					
						</section><!-- /#about -->
					</div>
				</div>
			</div>				
		</article>

方法２

<article> <div class="skew1"> <div class="skew2"> <div class="content"> <section class="main__about-me">

						<h2 class="main__about-me__heading main__common-heading">&#xe001;&nbsp;ABOUT&nbsp;&nbsp;ME</h2>					
						</section><!-- /#about -->
					</div>
				</div>
			</div>

Answer 1

とはWEBフォントです。

Webフォントを読み込まないと視認できず、読み上げソフトを使って読み上げ出来ず、機械的に "me" と認識できませんが、大丈夫でしょうか。
("me" と書いてWebフォントを適用するのが常道だと思います。)

マークアップに関しては論理的な構造になっていれば問題はないと思います。
それが見出しなら hn要素でマークアップすればいいですし、見出しでないなら hn 要素を使うべきではないと思います。

Comments

[退会済みユーザー]

ご丁寧にありがとうございます。

＞
("me" と書いてWebフォントを適用するのが常道だと思います。)

このような方法があるのですね。
特殊な書き方にあわせないと表示できないと思っていました。
よろしければ具体的な方法を調べる為の、用語を教えていただけませんでしょうか？
Mono Social Icons Fontという、WEBフォントですが、IE9以上対象でそのようなことも可能なのでしょうか？

＞
マークアップに関しては論理的な構造になっていれば問題はないと思います。
それが見出しなら hn要素でマークアップすればいいですし、見出しでないなら hn 要素を使うべきではないと思います。

WEBフォントとABOUT　MEでここはその内容だよと示したいです。
デザイン上は見出しの一部ですが、SEO上同じ単語が連続するのは、スパムにならないか心配です。
単語数が多いとSEOの効果が下がる可能性も考えています。

トータルに考えてプロならどうするかお伺いしたかったしだいです。

[think49]

ごく普通にWebフォントを適用したら文字のフォントが変わると思います。
http://jsfiddle.net/5xuo9g21/
"Mono Social Icons Font" を見てみましたが、これはフォントというより記号ですね。
おそらく使わないであろう場所にフォントを置いているようですが、本来の使い方ではない(いわゆるバッドノウハウ)だと思います。
私としては "Mono Social Icons Font" を使うよりも <img src="me.png" alt="me"> を使うか、英字フォントで望むWebフォントを見つけて使った方が良いと思います。

単語の連続については、"me About Me" にどのような意味を持たせているのか不明なので何ともいえません。
それが英文として正しい文法なら問題ないと思いますが、私は英語に詳しくないので何とも…。
いずれにしてもマークアップの問題ではなく、文章としての問題だと思います。

[退会済みユーザー]

少しはわかりやすくなるかと思い下記に一部のソースを貼り付けてみました。

https://jsfiddle.net/mg4enw2b/

MEはaboutmeのアイコンとしてつかっています。
meという英単語としてではありません。
contactをメールのアイコンで示すのと同じ原理です。
ですのでh1の中のmeもアイコンとしてのmeです。

その後、問い合わせのセクションには、メールのアイコンを同じように配置するので、
そのアイコンもh1の中に入れるのかという問題が同じように発生します。

[退会済みユーザー]

結局分かりませんでした。

[think49]

「私としては "Mono Social Icons Font" 自体に問題があると思うので、このフォントを使うことをお勧めしません」という事を伝えたかったのですが、どう判断するかはwebpageさんだと思います。