今からできるSEO対策【カンタンな内部対策】

この記事は2021年1月10日に書きました。
今からできる必要最低限のSEO内部対策について「え?SEO?」な人にもわかりやすく読めるようにまとめました。

SEOってなに?


Search Engine Optimizationの略でエスイーオーと読みます。セオじゃないw
日本語にすると検索エンジン最適化
ちょっと抽象的で意味が伝わってきませんね。
カンタンに言うとググったときに検索結果の上に表示されるためのテクニック。当たり前ですが検索結果の表示はランダムではありません。

検索エンジンがユーザーにとって有益であると判断した順番に検索結果が表示されてます。


例えばあなたが「プログラミングスクール オススメ」で検索して表示された順番はプログラミングスクールのSEOテクニックのランキングと同じ意味です。

HTMLやCSSで模写やカンプからのコーディングをしていると「見た目」を近づけることに集中しすぎて本来の目的を見失ってしまいます(自分のこと)

Webサイトの目的

Webサイトの本来の目的はクライアントの悩みを解決すること

上記はRaiseTech講師YATさんの名言です。


クライアントの悩みである「Webから集客したい」、「いい人材が欲しい」、「もっと売上を上げたい」などの悩みを解決するためにWebサイトはつくられてます。

クライアントの悩みを解決するために、まず検索結果に表示されて存在をユーザーに認知してもらう必要があります。そのために必要なことがSEO対策

HTMLの内部対策

あなたのWebサイトを検索エンジンに正しく認識してもらうためには、Webサイトの構成を正しく認識してもらう必要があります。HTMLタグを正しく使いましょう。

※最重要 titleタグとdescriptionタグ


titleタグには文字通りWebサイトのタイトルを記述します。内部対策で一番重要なタグ。30字~41字程度でタイトルをつけましょう。オーバーすると省略されます。

descriptionタグにはWebサイトの概要をまとめる文章を書きます。検索結果のタイトルの下にサイトの説明文として表示される部分。検索順位には影響ありません。ただdescriptionタグはクリック率を大きく左右する内容です。スマホで見てもPCで見ても伝わりやすい文章を90字~140字程度でまとめる必要があります。

適切なタグを使う

ヘッダー部分にはheaderタグ。メインコンテンツにはmainタグ。誰でもやってることですが

問題はdivタグ

意味をもたないブロック要素って定義がわかりにくいw意味をもたないことを逆手に取ってなんでもかんでもdivタグで囲むってのがクセになると検索エンジンにあなたのWebサイトの構成が正しく認識されないことがあるのでdivタグは使う前に一度Webサイトの構成を考えましょう。

<div class=”footer”></div>ではなく<footer class=”footer”></footer>で記述。

alt属性について

imgタグの画像説明に関しては必ず検索エンジンに正しく認識してもらえるように画像の説明文を記載する。 alt属性の説明文(代替テキスト)があることで画像を掲載してわかりやすく説明しているWebサイトとして検索エンジンに認識されます。Googleの画像検索にも有効。手間を惜しまず検索キーワード関連キーワードを記述。

インデントについて

読みやすいコードを書くために必須のインデント。

HTMLに関してはタブでインデントをつけるのではなくスペースでインデントをつけることが推奨されてます。タブ使ってる方は迷わずスペースに乗り換えましょう。

VSCodeのインデントショートカットキー

・shift + option + f (mac)

・shift + Alt + f (win)

CSSの内部対策

Googleは正しいCSSの記法についてガイドラインを提示してくれてます。

Googleのガイドラインはこちら

また下記のツールでCSSの正しさをチェック可能。

CSSのエラーチェックはこちら

使い方はチェックしたいCSSをコピペして貼るだけ。Sassの場合はコンパイルされたstyle.cssを貼ればOK。

問題がない場合

問題がある場合

エラーがないと祝ってもらえますw

クラス名について

クラス名は意味をもたない名前ではなくわかりやすい名前をつけます。検索エンジンだけでなく他の人がコード見てもわかりやすいって意味でも重要

クラス名に迷ったときは下記の記事がわかりやすくて参考になるのでご覧ください。

クラス名 命名規則

プロパティはアルファベット順で記述する。

例えばcolor: #fff;backdround-color :#333;ではなくて

backdround-color :#333;color: #fff;の順で記述。テキトーな順番ではなくアルファベット順を意識することが必要。

プロパティとコロンのスペースについてはcolor:#333;ではなくcolor: #333; プロパティの後のコロンには空白スペース必須。

内部対策まとめ

titleタグとdescriptionタグを空欄にしない

適切なタグを使う

alt属性を空欄にしない

インデントにはスペースを使う!

クラス名はアルファベット順でわかりやすい名前をつける!

SEOに関してはガイドラインに沿って記述するだけで上位表示が狙えるようなヌルゲーではないですが、正しく検索エンジンにあなたのWebサイトを認識してもらうコードを書くことは前提条件クライアントへのマナーです。

最低限のSEO内部対策として押さえておきましょう!

初歩的な内容ですが、カンタンで今すぐできることをまとめてみました。意外と知らないこともあったかもしれません。ちなみに僕はインデントタブ派でしたw

弊ブログ(DOKUMA)ではSEOに対して学んだことと実践したことを発信していきます。

それではいいコーディングライフを!

UdemyでSEOを基礎から学ぶならこちら

タイトルとURLをコピーしました