【SEO対策】SEOを意識したHTMLを構築できるようになろう【フロントエンドエンジニア】

 

こんにちは、えびじゅんです。

本記事は、フロントエンジニアとして独立を目指すために身に付けたいスキルを紹介する記事第1弾です!!

 

 

記念すべき第1弾のテーマはこちら!

 

 

 

SEOを意識したHTMLを構築できるようになる

 

 

 

 

ネット上には理屈のよくわからない都市伝説のようなSEO対策がゴロゴロ存在しています。

 

SEOとは
Search Engine Optimizationの略。検索エンジン(GoogleやYahoo)に評価されやすいWebページを作り、検索結果の上位に自分のWebページが表示されるように工夫すること

 

もちろん本当にSEO対策効果があることもありますが、基本を疎かにしてはいけないので、まずはWebページとサーチエンジンの理屈を学び、王道のSEO対策を理解して行きましょう。

 


【SEO対策】W3Cに準拠したHTMLを構築しよう

 

 

今回のキーワードはW3CHTMLです。

 

W3CとはWeb技術の標準化を図る団体

W3CとはWorld Wide Web Consortiumの略称でして、Web技術の標準化を図る団体のことです。

World Wide Webの頭文字をとるとWWWとWが3つ連なるので、W3と表記し、最後にConsortiumのCをくっつけてW3Cです。

 

HTMLとはWebページを作るためのマークアップ言語

HTMLとはHyper Text Markup Languageの略でして、Webページを作るためのマークアップ言語です。

すごく細かいところですが、プログラミング言語ではなく、マークアップ言語です。

<p>や<div>のようなタグを使って、テキストを装飾(マークアップ)することで、ブラウザで開いたときにWebページとして表示できるようにします。

 

W3Cの標準に準拠したHTMLを書くことで、記事の評価が高くなる

W3Cとは上記の通り、Webに関する技術の標準化を図る団体です。

簡単に言うと、HTMLの書き方やWebページを装飾するためのCSSの書き方などのルールを作っています。

 

ブラウザもW3Cの標準仕様を元に作られている

ブラウザとは、Webページを開くためのソフトウェアでして、Google ChromeやFirefox、Safariなどです。

これらのブラウザは機能の違いはあれど、基本的にはどのブラウザを使っても同じページなら同じように表示されますよね?

 

理由は簡単で、どのブラウザもW3Cの標準仕様を元に作られているので、<p>タグならこう、<div>タグならこうと言う風に、W3Cが定めた通りに表示するようにできています。

 

なので同じWebページを開いたら、どのブラウザでも同じように処理されて、同じような見た目になります。

 

つまり、W3Cの標準に準拠したHTMLはどのブラウザで開いても正しく表示されることが保証されるというわけです。

どのブラウザでも表示が崩れない=サーチエンジンから評価されやすい

上記の通り、W3Cの標準に準拠したHTMLなら、どのブラウザを使っていようが正しく表示されることが保証されます。

 

これが非常に大事でして、どのブラウザでも正しく表示される=GoogleやYahooのようなサーチエンジンが安心して記事をオススメできるという状態になります。

 

逆に言えば、W3Cの標準に準拠していないページは検索結果が下がりやすいので要注意です。

例えば、Googleで検索したWebページが、Chromeでは表示されるけどFirefoxでは表示されないとしたら、Firefoxユーザにとっては非常に不便ですよね。

なので、そういったページはどんどん検索順位が下がってしまいます。

W3Cの標準に準拠したHTMLを書くために、W3Cの標準仕様を知りましょう

 

知らないルールは守りようがないので、まずはW3Cがどのような仕様を決めているのか調べてみましょう。

 

 

自分のサイトがW3Cの標準に準拠しているかツールを使ってチェックする

ドキュメントを読んだは良いけど、自分のサイトがW3Cの標準に準拠しているか確認するのはちょっとめんどくさいですよね。

そこで便利なのがチェックツールです。

画像のように自分のサイトのURLを入れるだけで自動でチェックしてくれます。

WarningとErrorとが出ますが、Warningはほっといても大丈夫です。Errorはなるべく直したいですね。

 

先ほどW3Cに準拠していないと検索順位が下がると言いましたが、ある程度の基本を守っていればそこまで大きなペナルティは無いと思います。

 

ちなみに僕のサイトだとWarningが41件とErrorが4件出ます。styleクラスでCSSを書くなっていうエラーなんですが、ちょっとめんどくさいので放置。。。

 

より高いSEO対策効果を狙うために、セマンティックウェブも意識してみましょう。

セマンティックWebとは、Webページに記述された内容について、それが何を意味するかを表す「情報についての情報」(メタデータ)を一定の規則に従って付加し、コンピュータシステムによる自律的な情報の収集や加工を可能にする構想。

IT用語辞典

セマンティックウェブを簡単に説明すると、Webページそのものに意味を持たせることです。

これまで説明した通り、Webページを作るためにはHTMLを使ってテキストをマークアップしていきますが、これは人間が見やすいようにするための作業です。

 

機械はHTMLで書かれたテキストをどのように処理するかは知っていますが、どのような意味を持っているのかはわかりません。

 

なので、テキスト情報とは別に、メタ情報と呼ばれる人間には見せない部分にテキストの意味を記述しておき、機械がテキストの意味を理解できるようにしてあげると、より高いSEO対策効果が狙えます!

 

構造化データマークアップでテキストに意味を持たせる

セマンティックウェブを実現するためには、テキストに意味を持たせるためのマークアップを施せばOKです。

 

HTMLを使ってテキストをWebページとして扱うようにマークアップしたのと同じように、構造化データマークアップ言語を使ってセマンティックウェブを実現します。

 

構造化データマークアップ言語には、主に3つあります。

  • JSON-LD
  • microdata
  • RDFa

 

このうち、GoogleではJSON-LDを推奨しているとのことです。

 

【コピペでOK】WordpressをカスタマイズしてJSON-LDによる構造化マークアップを施す

 

JSON-LDを用いて構造化マークアップを施すため方法は、Googleの公式ページに記載されています。

 

 

今回はコピペで実装できるコードを用意したので、ぜひ使ってください。
少し書き換えてfooter.phpにコピペすればOKです。

 

<?php if ( is_single()) : ?>
  <?php
     $thumbnail_id = get_post_thumbnail_id($post);
     $imageobject = wp_get_attachment_image_src( $thumbnail_id, 'full' );
  ?>
  //構造化データの記述
  <script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "BlogPosting",
    "mainEntityOfPage":{
      "@type":"WebPage",
      "@id":"<?php the_permalink(); ?>"
    },
    "headline":"<?php the_title(); ?>",
    "image": [
      "<?php echo $imageobject[0]; ?>"
    ],
    "datePublished": "<?php echo get_date_from_gmt(get_post_time('c', true), 'c');?>",
    "dateModified": "<?php echo get_date_from_gmt(get_post_modified_time('c', true), 'c');?>",
    "author": {
      "@type": "Person", //組織の場合は"Organization"と記入
      "name": "ebijun" //自分の名前
    },
    "publisher": {
      "@type": "Organization", 
      "name": "ebijun", //自分の名前
      "logo": {
        "@type": "ImageObject",
        "url": "https://ebijun.work/wp-content/uploads/2019/07/ebijun-1.jpg" //ここにロゴのURLを記入
      }
    },
    "description": "<?php echo get_the_excerpt(); ?>"
  }
  </script>
<?php endif; ?>

 

こちらのコードはWEB企画LABOさんの記事から拝借して、少し修正を加えたものです。

 

コピペが完了したら、チェックツールで確認します。

 

適当な記事のURLをコピペすると自動でチェックしてくれます。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください