Memoranote

興味のあること、感じたこと、気になったこと、体験したこと、手に取ってみたことを記したブログ

【ブログ運営】マークアップの重要性を説きたいと思う(はてなブログ初心者必見!)

はてなブログ初心者必見!マークアップの重要性を説く~SEOに拘ったサイト運営をしていくために~

こんちゃす!!@Memoranoteです!

顔写真

今回は、ブログ記事を書く時のTipsとしてマークアップの大切さを説いてみたいと思います。

はてなブログを運営されている方は、特に気をつけて貰いたいポイントです。

少し専門的な話になりますが、マークアップの良し悪しは必ずSEOに影響してきますので、サイトを作っている人は無視してはダメですよ!

この記事を書こうと思った理由

以前書いたGoogleアドセンスの記事にも記載したのですが。

www.kiwhack.work

 

はてなブログは「見たまま編集」でマークアップをすると、マークアップの観点から重要な欠陥があります。

HTMLに詳しい人でないと「HTML編集」で記事を起こすのは一苦労のため、「見たまま編集」で編集をする人が多いと思うのですが、そのままでは大事なポイントを見逃した状態で、記事を起こすことになってしまいます。

それはあきまへんで!!!!

顔写真

自分はこの分野について専門でやっているため、カスタマイズしながら記事は起こしていますが、私HTML苦手だから…という人にも、是非この記事を読んでもらい、部分的にでも良いので、カスタマイズしてほしいと思っています。

HTMLにおけるマークアップの重要性

HTMLはCSSと共に、WEBサイトを制作していく中での、最も基本的な言語であり骨子であると言えます。

HTMLの役割は、

 

「ページ内の内容をタグで囲む(マークアップする)事で、そのページの文章構造を目を持っていないPCにお伝えする」

 

です。

私たち人間は目を持っているので、サイトを見たときに、「ここは見出しだな」とか「これは画像だ」とか「これは箇条書き」というのは見れば分かりますよね。

 

しかしPCは目を持っておらず、私たちのように視覚的に内容を判断することが出来ないため、ページの各要素を正しく理解してもらうために、コード内の各内容をタグで挟むことによってPCに情報をお伝えします。

 

このタグがとても重要なんですよ。

顔写真

見出しタグの重要性と使用時の注意点

タグは用途に応じて様々なタグがあります。

現在のタグは100種類を優に超えるんですよ。勿論私も全部知りません。

顔写真

その中でも特に重要なのが<h1>~<h6>の計6種類で構成されている「見出しタグ」です。

タグによっては使用時のルールがいくつかあるのですが、見出しタグに関しては、

  • 順番を飛ばして使わないこと
  • <h1>はページに一度だけ。<h2>以降は一回でも複数回でも一回も使わなくても良し

というルールがあります。

厳密に言うと、今は<h1>も複数使う事は認められていますが(一昔前までは本当にダメでしたが)、個人的には、ページの中で一番重要とされる内容を囲む<h1>は複数あってはいけないと思っています。

現状のはてなブログの構成

h1

<h1>タグはタイトル部分の中に入れた内容が反映されます。

まあこれはいいですね。

それ以降

  • 「大見出し」が<h3>
  • 「中見出し」が<h4>
  • 「小見出し」が<h5>

になります。

 

ん?

 

<h2>どこ行った

 

これはあかんですね。

正しい順序で選択しても、<h2>が入らないのは宜しくありません。

見出しだけでもカスタマイズしよう!!

私からの助言。

 

他のやつらは最悪無視してもいいから、見出しタグだけはしっかり設置しよう!

 

という事。

見出しだけでも適切な所にしっかりと設置するだけで、SEOは大きく改善されます。

saruwakakun.com

 

コピペだけすれば、デザインが反映されるコードを沢山用意してくれている、とても素敵なサイトが沢山あります。

こちらを有難く使わせてもらいましょう。

作業1

作業1

「HTML編集」で対象の要素を<h2>で囲みます。

一から入力するのが苦手…という人は、一度「見たまま編集」で『大見出し』を選んだ後に、「HTML編集」に移動し、タグの中の3→2に数字だけ変更する、でもいいですね。

顔写真

作業2

作業2

先ほどのサイトから好きなデザインの見出しを選んで、ソースコードをコピーします。

作業3

作業3

先ほどのコードの『h1』→『h2』に変更して、「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」の中に、ソースをペーストします。

 

それだけです。

 

<h3>~<h6>も全く同じ手順で作業して貰えれば、反映が出来ます。

慣れれば誰でも対応できますので、最初は頑張って設置してみましょう。

 

見出しにおしゃれなデザインを当てるだけでも一気にデザインが映えます。

 

内容も勿論大事ですが、「見た目として魅せるブログ」も人を惹きつける重要なポイントだと私は考えます。

デザインをおしゃれにしていくと、自分もブログを頑張って書いていこうというモチベーションにも繋がりますよ◎

顔写真

まとめ

これからはてなブログで運営していこう、既に運営しているけど、あまりそこら辺に気を遣っていなかったという人は是非対応しましょう。

 

特にこれから収益化を目指していく人にとっては、SEOの強化はとても大切なポイントです。

 

見出しに対して適切なタグを当てられているかどうかは大事な要素ですので、面倒くさがらずにやってみましょう~!

何か不明点などがあれば、どしどしご連絡ください!

顔写真