自サイトで月間30万PV獲得したエンジニアのマークアップでのSEO対策法まとめ

Web制作//

SEO対策というと、記事のコンテンツが大事みたいな話をよく聞きますが、当然htmlソース側も大事です。

当方が運営している自作のWordPressテーマサイトで月間30万PVほどあります。

その知見から、マークアップでSEOを最適化する際のポイントをまとめます。

【前提】マークアップのSEOは加点ではなく減点を減らす

基本的にマークアップ側でできることは、SEOのチート技でなく、必要以上に減点されないためのデフェンシブなものです。

なので、この記事で書いてあることを意識しても劇的にSEO改善されるわけではないので、そこは注意してください。

マイナスを0に。もしかしたらちょっとの+に。そんなイメージでご覧ください。

マークアップでの8つのSEO対策

1. hタグにSEOワードを

基本ですが、h1やh2タグにSEOに引っかかって欲しいSEOワードを入れましょう。

逆に不要なワードをhタグで囲わないように。

重要じゃないけど、見た目をhタグのようにする必要があるのなら、それようのclassとcssを作るように。

2. 画像タグにaltをちゃんと設定する

画像タグには、画像の情報を記載できるalt属性を設定しましょう。

マークアップでSEOを減点されないためにはできることはちゃんと全部するのが基本です。

画像に文字が入っている場合はそのテキストを全てaltタグに入れましょう。

3. 上の方にあるテキストにSEOワードを入れる

たまにサイトの上にテキストがちょこんとあるサイトがあるのに気づいていますか？

実はあれSEO対策だったりします。

サイトにとって重要なワードはできるだけ上の方に置いてあげましょう。

4. htmlタグを適切に使う

画像のaltタグやhタグと被りますが、htmlタグは適切に使いましょう。

  • figure,figcaption：画像
  • time：時間
  • b, strong：極力使わない

5. パンくずリストを入れる

検索エンジンのクローラーが回遊しやすいようにパンくずリストを入れてあげましょう。

WordPressならテーマで元々入っていたり、パンくずリストのプラグインがあったりするのでそれを使うといいでしょう。

なお、この後で出てきますが、パンくずリストは構造化データで書くように。検索結果にパンくずリストが表示されやすくなります。

6. ページスピードを早く

サイトが遅いと訪問ユーザーの離脱に繋がります。

ユーザーが離脱してしまうとサイトに人がこなくなり、その結果SEOの評価が下がることもあるので、ページスピードは要注意です。（どうしても早くできないサイトもありますが、、、）

ページスピードはGoogleのPageSpeed Insightsで計りましょう。

これが絶対的な基準ではないのですが、あまりに遅いのなら改善の余地ありです。

Webサイト高速化の改善ノウハウが溜まったので知見をまとめた

7. セクショニングタグを正しく使う

マークアップでのSEOとしてはここが一番重要かもしれません。

headerタグやfooterタグ、sectionやarticleタグなどといった、セクショニングタグは正しく使いましょう。

SEOに強いとされているhtmlソースはどれもセクショニングタグを正しく使いまくっています。

僕がコーディングする時は以下のセクショニングタグを必ず使います。

  • header：ヘッダーやヘッダーライン
  • footer：フッターやフッターライン
  • main：メインの表示部分
  • article：記事か、コンテンツのまとまり
  • section：コンテンツ（articleの中にいる）
  • aside：サイドバーやsnsなどの共通コンテンツ
  • nav, menu：ナビゲーションやメニュー

8. リンクジュースを渡す必要がないaタグには、nofollowをつける

全てのaタグにnofollowをつけることは推奨しませんが、リンクジュースを渡す必要がないaタグにはnofollowをつけましょう。例えば、SNSへのリンクなど。

SEOに強いと言われているWordPressテーマなんかはSNSに対して必ずnofollowのリンクをつけています。

9. headに必ずcanonicalタグを入れる

ここもかなり重要なのですが、headタグの中には必ずcanonicalタグをつけるように。

canonicalタグの詳細は省きますが、そのページの正しいURLを入れれば大丈夫です。

例えば、このブログのtopページだと、httpsにして、wwwなしが正規のURLなので。

<link rel="canonical" href="https://uetani33.net/" />

このようにすればOK。

canonicalを正しく設定することでクローラーにどのページが本当のURLか正しく伝えれます。

10. ページネーションがある場合は、headにnext,prevを入れる

ページネーションがあるページには、headタグ内に、その前後のページを表すURLをhead内で教えてあげましょう。

<link rel="prev" href="前のページのURL" />
<link rel="next" href="次のページのURL" />

最新のGoogleの発表で、これらのタグを確認していないことが発表されましたが、Google以外の検索エンジンでは未だ有効のようなので、このタグを入れておくことをおすすめします。

11. 構造化データを使う

ちょっと難しいのですが、マークアップでのSEO対策として構造化データと言うものがあります。

例えばパンくずリストだと、以下のようになります。

<div id="breadcrumb" itemscope="" itemtype="http://schema.org/BreadcrumbList">
  <span itemscope="" itemtype="http://schema.org/ListItem" itemprop="itemListElement"><a href="〇〇" itemprop="item"><span itemprop="name">〇〇</span> </a>>  <meta itemprop="position" content="1"> </span>
  <span itemscope="" itemtype="http://schema.org/ListItem" itemprop="itemListElement"><a href="〇〇" itemprop="item"><span itemprop="name">〇〇</span> </a>>  <meta itemprop="position" content="2"> </span>
  <strong>記事タイトル</strong>
</div>

html中にitemscopeやitemtypeなどが出ており、結構難しいです。このソースはmicrodataと呼ばれるやり方で構造化データを記述しています。

構造化データの書き方は3つあります。

  1. microdata
  2. JSON-LD
  3. RDFa

Googleが推奨しているのは、JSON-LDですが、他の書き方でも認識されるのでかけるのならなんでもいいと思います。僕は、microdataかJSON-LDを場合によって使い分けています。

まとめ

SEOに配慮してコーディングしようとするとやることが意外と多いです。

が、これらを全て適切に行うことでSEOに強いマークアップができるので、サイト運営上、避けて通れません。

あくまで減点を回避するためのものですが、やるに越したことはないので、自分のサイトがちゃんとできてるかチェックしてみましょう。