SEOの対策方法について、簡単にまとめてみる

SEOとは、”Search Engine Optimization” の略であり、検索エンジン最適化を意味する言葉です。 検索結果でWebサイトがより多く露出されるために行う一連の取り組みのことを指す。

 

1:タイトルタグについて

タイトルタグに記述したタイトルは、検索結果やウェブブラウザのタブに表示され、ユーザーやクローラーがどんなwebページか認識するのに役立つ。

タイトルタグの文字数は30文字程度に収める。収まり切らない場合、「・・・」のように省略されてしまったり、変更されてしまう可能性がある。

タイトルタグは、検索エンジンSNSから直接来た人向けや、検索エンジンのロボット等に向けて記述する。

重複タイトル、コンテンツはGoogle品ライン違反質ガイドの恐れがある。なので、ページごとにオリジナルのタイトルタグを記述し、わかりやすいタイトルをつけることが大切。

まとめ

  1. サイトのそれぞれのページに <title> タグでタイトルを付ける。
  2. 具体的でわかりやすいページタイトルを付ける。
  3. キーワード(SEOキーワード)を詰め込んだようなタイトルは避ける。
  4. 同じタイトルや定型文を使用したタイトルは避ける。
  5. タイトルを目立たせる。ただし、簡潔になるように気を付けます。
  6. ページに対する検索エンジンのクロールの無効化に注意する。
  7. ページの内容に無関係なタイトルは付けない
  8. 「無題」のような初期設定のタイトルやあいまいなタイトルにしない
  9. サイトの大部分のページ、またはすべてのページに同じタイトルを使わない
  10. ユーザーのためにならない、極端に長いタイトルは使わない
  11. titleタグに不要なキーワードを詰め込まない

 

2:meta descriptionについて

meta descriptionタグとは、htmlファイルに記述する複数あるメタタグのうちの一つです。

meta descriptionタグは、htmlファイルの<head>~</head>の間に記述します。

 

meta descriptionタグの文字数は全角124文字程度に収める。収まり切らない場合、「・・・」に省略される。

Google推奨のポイント

・サイトのそれぞれのページにメタデータ(descriptions)を作成する。

・個々のページを正確に表す説明を記述する

・明確な情報を説明に含める。 文章形式にする必要はなく、タグで区別して記述するなど、関連性の高い情報をユーザーに提供する

・プログラムで説明を作成する。

・質の高い説明を使用する。

 

まとめ

  1. タイトルの内容に合わせながら、メタディスクリプション(サイト概要)を記述
  2. コンテンツの内容を要約したわかりやすい文言にし、魅力的な言い回しにする
  3. 全角124文字以内に収まるよう、重要な部分を前方に記述していく
  4. 上記に記述したgoogle推奨する適切なメタデータを作成する
  5. サイトの概要文にSEOキーワードを適切に含めながら、検索クエリとの関連性を高める。キーワードの詰め込みには注意。

 

3:link canonicalについて

canonicalタグは、「重複ページ」、つまり中身の同じページが2つ以上存在してしまっているときに、SEOへの悪影響を最大限回避できる機能を持っています。

 

canonicalタグの役目を端的に言うと、重複ページが複数存在するときにどのページ(URL)が最も大切かをGoogleに伝えることです。この、重複ページのなかの「最も大切なURL」を「正規ページ」と言い、また正規ページを(canonicalタグで)正しく決めてあげることを「URL正規化」と言います。

canonicalタグでURL正規化を行うと、Googleは、いくつかの重複ページの中から正規ページだけを検索インデックスに登録し、検索結果にも正規ページだけを掲載します。またcanonicalタグは、それぞれの重複ページのSEO評価を正規ページにまとめる働きもあります。

例:http://sample.com(正規ページ)

  http://www.sample.com(重複ページ)

  https://sample.com(重複ページ)

 

重複ページ対策の別のやり方に301リダイレクトがある。

 

canonical属性タグと301リダイレクトの使い分けポイント

・コンテンツが同じまたはほぼ同じページに複数のURLを与えなければならない場合、canonical属性タグを使う

・同じコンテンツを複数のサイトで公開する場合、canonical属性タグを使う

・デスクトップ向けページとスマートフォン向けページを別々のURLで提供する場合、canonical属性タグを使う

・301リダイレクトが使えない場合、canonical属性タグを使う

・ページネーションをビューオールページと併用する場合、canonical属性タグを使う

 

4:OGPについて

OGPとは、Webページの内容をSNS上へ伝えるために必要な記述のこと。例えば、FacebookなどでWebページがシェアされると、そのWebページのタイトルやURL、概要、使われている画像などを利用して、各種SNSのウォールや、それぞれのニュースフィードに「シェアされたWebページはこんなサイトですよ」と表示してくれます。

 

OGPタグの種類

"og:title" = ページのタイトル

"og:type" = なんのページなのか(website・article・blog など)

"og:image" = サムネイル画像のURL

"og:url" = ページのURL

"og:site_name" = サイトの名前

"og:description" = 記事の概要

 

5:noindex,nofollow属性

noindexとは、設定したページがgoogle検索エンジンからインデックスされないようにするための構文です。インデックスされているページはgoogle検索した場合に何らかのワードで表示されますが、インデックスされていないページはどんなワードで検索しても100%表示されることはありません。正確には「noindexページはクロールされて裏側ではgoogleにインデックスされているが、検索結果には出てこないように制御される」という理解が正しいです。また、noindexページに発リンクがある場合、ページランクは渡します。この点にも注意しましょう。

 

nofollowとは、設定したリンクに対してクローラーが辿る事を禁止する設定です。通常、googleなど検索エンジンのボット(クローラー)は、リンクを辿って動き回ります。nofollowを設定していないリンクには移動しますが、nofollowが設定されているリンクには移動しないことになります。

<head>内に下記を書く

<meta name=”robots” content=”noindex,nofollow”>

 

6:HTMLタグの使い方

見出しタグ(<h1> ~ <h6>)の出てくる順番は<h2>があってから<h3>のように順番に使う

<h1>タグはページに1つだけ存在する

imgタグにあるalt属性には画像の説明を記述します。

alt属性は、代替テキストであり、画像が表示されない場合、alt属性の記述内容が表示される。さらに、画像検索でも使用される為、alt属性に画像説明を適切に記述しておくことが大切。


まとめ

今回書いた6つのことをしておくだけでも、全然違うみたいなので、気をつけながらやっていきたい

htmlって難しい

この記事はOIC ITCreate Club Advent Calendar 2016 4日目の記事です。

www.adventar.org

 

今年の夏からwordpressを使ってwebページを制作するアルバイトを始めました。

僕はhtmlやcssは授業である程度やっていると思っていたので、なんとかなると思っていました。

しかし、そんなことはなかった

section、article、etc...たくさんタグが出てきて...

なにそれ?(´ω・)おいしいの?

全部divでいいんじゃねと思ってしまった。

でも、そのへんも気をつけながら作らないといけないらしい。

仕方ないので、もう一度htmlの勉強を始めました。

まずは、section

sectionとは

文書やアプリケーションの一部分となる、意味や機能のひとまとまりのことです。 ウェブページ内のセクションとしては、例えば、導入部分、新着情報、連絡先などが考えられます。

ふむ、なるほど。

主要な部分はsectionで囲っておけばいいのかな?

次に、article

articleとは

内容が単体で完結するセクションであることを示す際に使用します。例えば、フォーラムでの投稿、雑誌や新聞の記事、ブログのエントリ、コメントなどです。

ふむふむ。

wordpressの記事の部分はこれで囲っめばいいのか

次に、aside

asideとは

その部分がウェブページ内における余談・補足情報のセクションであることを示す際に使用します。

ふむふむ、こんなの初めて聞いたぞ

余談・補足情報ってことはサイドバーをこれで囲めばいいのか

まだあるけど、キリがないので、これぐらいにしておきます。

 

 まとめ

今までは、divばかり使ってきたが、ちゃんと役割を持ったタグをあることを知りました。これを気にhtmlのタグを意識して、ウェブページの文書構造がより明確になるように頑張っていきたいと思います。