人生

【h2とh2風はちがう!?】AFFINGER5で見出しを作る

 

h2とh2風は違う!?(AFFINGER5で見出しを作るときの注意点)

失敗をイメージさせる画像

”今”のあなた
AFFINGER5でブログ投稿もだんだん慣れてきたなぁ~。よゆーだ!快適だ!AFFINGER5最高!
それはよかった!ところで、SEO対策とかしてるの??
絢太郎
”今”のあなた
うん!!一応ね!!みんなにみられたいもん!!今やっていることは見出しをつけるようにしているよ!アフィンガー見出しのつけ方も簡単だから本当に便利だよなー。スタイルからh2風を選べばすぐにできるし!
ん?まってまって。h2風??それSEO対策になってないかも!それは本当のh2タグじゃない!!
絢太郎

 

h2とh2風は違う。(初心者がおちいりがちな落とし穴。というか勝手に落ちちゃう。)

 

”未来\\\"のあなた
まずは、こちらをご覧ください。

投稿画面での表示

投稿画面設定の画像1

プレビューの表示(社会人の副業として と入力)

投稿画面設定の画像2

 

”今”のあなた
きゃぁぁぁぁぁぁ。ほとんど一緒なんですけどぉぉ。怖いぃぃ。
絢太郎
そうなんだよね。ほとんど一緒なんだよ。けどよくみたら大きさや、吹き出しの位置が違うのがわかるよね!
絢太郎
それでは、今回はこの2つとも使い方を教えていきます!

 

記事を読むメリット!

・h2とh2風の見出しの両方を作成することができるようになる。

・それぞれの良さがわかる

それでは、いってみよう!

 

h2の設定方法やメリット(AFFINGER5の見出し)

 

絢太郎
まずは、投稿画面を開いてください。

 

投稿画面設定の画像3

 

絢太郎
そしたら、段落と書いてある部分をクリック!するとたくさんの見出しが出てきたね!この見出し2がh2のことで、見出し3はh3のことだよ!このボタンをクリックすると自動的にh2が挿入されるんだ!(ちなみにh1は記事のタイトルのことなので、ここには表示されません。)
絢太郎
私はh2を使用して、h2の設定方法やメリットとこの記事で打ち込んでいるので(下に参照します)、使用したときのテキストエディターは………

 

※参照

投稿画面設定の画像4

このように使用しています。

 

テキストエディターの内容 ↓

投稿画面設定の画像5

 

絢太郎
このように<h2>と</h2>で囲まれているので、h2と認識されています!それでは、h2を使用することでのメリットを紹介します!

SEO1位のための「h2」「h3」タグ設置ガイド

絢太郎
こちらの、サイトがとても詳しく紹介してくれています!!
他力本願かーーーーーーい!
”今”のあなた
絢太郎
わかりやすい記事をよんでもらった方が、読んでいる人のためになるもん!一応、自分の意見も述べていくよ!

 

h2を使用するメリットとメカニズム

Googleクローム(Googleがあなたのサイトを見に来るやつ)はHTML&CSSで書かれているいわゆるテキストエディターを見ます。その際に、h2の見出しがあると整理整頓されたページであると判断される。

 

しかし、注意ポイントもあるよ!

注意ポイント

SEO対策になるのかは、定かではない。(Googleの進化により)

 

絢太郎
まぁ、でも見やすいから僕は使用するけどね!テキストエディターも綺麗になるし!!

 

 

h2風の設定方法やメリット(AFFINGER5の見出し風)

 

絢太郎
こちらもまず投稿画面を開いてください。

 

投稿画面設定の画像6

 

絢太郎
スタイルからh2風を選択します!すると...

これがh2風の見出しだ!

 

絢太郎
はい!できました!!ちなみにスタイルという項目がないよぉぉ。って方は下のリンク(Tiny MCE Advanced  設定変更したが表示されない)をご確認ください!
参考Tiny MCE Advanced 設定変更したが表示されない

続きを見る

 

絢太郎
それでは、先ほどと同様にテキストエディターをみてみましょう!

 

投稿画面設定の画像7

 

絢太郎
みてください!<p>と</p>でくくられていますね!これでは、Googleにh2という認識がされません!ようするに見出しと判断されていないのです!形はそっくりなのですが、メリット、デメリットが異なります。

 

h2風のメリット!

h2風は、多く使用してもテキストエディターが汚くなりません!本来、h2、h3と順序を踏むべきですが、h2風見出しはどこで使用してもいいんです!

反対に、デメリットはh2見出しのメリットであるものが得られない可能性があることです。

 

また、h2とh2風見出しを一緒だと考えていると次のような問題が発生したりします。

注意ポイント

h2風とh2を一緒だと思っていると、変更したときに反映されていないと考えてしまったり、使い方を誤ってしまうこと。

 

これでこの記事は以上です!

絢太郎
これで、またあなたのサイトの質が向上しましたね!

それでは、次の投稿をお楽しみに!!

 

-人生

© 2020 金・時間・スキルなし。それでも、プログラミングを勉強したい。 Powered by AFFINGER5