SEO:コーディング能力がSEOプラスに働く7選|コーディングできてよかったなと思った瞬間
POINT

この記事は、以下のような人にオススメです。

  • コーディングスキルを持っていて如何に自分をアピールことを知りたい人
  • SEOとコーディングスキル・知識とは関係ないと思われている人
  • これから少しでもコーディングを学ぼうと思っている人など
オスカーの似顔絵

こんにちは!Webディレクターのオスカーです。
今日はSEOとコーディングスキル・知識について話したいと思います。

最近WordPressなどのノーコードCMSもあって、サイト制作するのに、もはやコーディングできなくてもできるようになりました。
SEOも同様、優れた SEO には必ずしもコーディングを知る必要はありません。
ただし、できると差が生まれるます。

今回は、強いSEOにつながるコーディング7選を紹介します。
もちろん、コーディングできなくても実現できる方法はありますので、ぜひ最後まで見ていただけますと幸いです。

HTMLの基本とSEO

SEOの基本的な定義ですが、検索エンジンが読みやすいコンテンツにすることです。
HTMLを理解した上、HTMLの構造をそのあるべき形で構成して、不適切なコーディングをしっかりなくせば、自然と検索エンジンが読みやすくなるはずです。

家で例えば、土台を作って、その上で正確に床、ドア、窓、屋根を正確な場所に配置すれば、人はそれを家として認識します。
同じように、Web ページを構成する重要な要素はHTMLであり、正確にHTMLのブロックを配置すれば、検索エンジンはWeb ページを正確にクロールしてくれるはずです。

公式のHTML仕様 で、

  • ブラウザやボットに見てもらう要素(メタデータなどの部分)
  • ユーザーに見てもらう要素(BODY要素などの部分)

をそれぞれにどこで配置すべきかが定めています。

極端の話、本来BODYに配置すべき内容をメタデータの部分に書き込んだ場合、検索エンジンは本来非表示の部分からウェブページのレンダリング開始することになってしまい、結果的にメタデータがコンテンツ自体の一部としてインデックスに登録されます。つまり、Googleは本来インデックスすべきところの内容をインデックスできなくなってしまいます。

こんなことあり得ないだろ、に聞こえるかもしれませんが、「Facebookのピクセルを間違ったところに置きました」とかいう話も同じです。

他にコーディング知識の不足による誤解の代表格として、「400エラー」がございます。

オスカーの経験上にもよくある話で、「400エラーが発生しているので直して」という連絡が来ることがあります。

オスカーの似顔絵

まぁ、400は「エラーコード」ですからね。。

「エラーがあるから修正すべきだ」と思われるし、しかも、Googleサーチコンソールで表示されるからWebディレクターは困る…

ただし、コーディング知識を持っているならわかります。400エラーはその「リクエスト(URL)」が存在していないからです。
そもそも存在しないので、400エラーが発生するのは正常ですし、何か対応が必要もありません。

HTMLの基本を知ることで、より正確に早く問題点を特定・発見できるので、自然よりよいSEOができるようになります。
そして、「400問題」のようなよくあるSEO誤解を回避し、正確にクライアントさんに説明することが可能になります。

構造化データ

構造化データとは1つのマークアップ言語です。
HTMLと同様、コードの記述方法には規則が定められています。

その規則について、Googleは3種類使用しているという記載があります。

構造化データの仕組みについて

そのうち、GoogleはJSON-L方式を推奨していま​​​​​す。
※確か、JSON-LDはBODYと完全に分離した形で記述されているため、コンテンツの構造に影響しないからよいとされています。
 Googleの資料にそういった内容はなかったので、聞き流し程度でよさそうです。

定められたルール通りに記載することで、検索エンジンもよっ見やすくなります。

https://json-ld.org/

JSON-LDの構造化データは難しいことはありません。
公式サイトのことは置いといて、Googleのドキュメントの内容さえ押さえれば大丈夫です。
全文読んで10分かかりません。

正しい構造化データ マークアップは、Google の検索結果ページ(SERP)で上位を狙うのに、非常に重要な要素です。
構造化データのマークアップが正しくないと、そのページはリッチリザルトの対象外になります。

オスカーの似顔絵

15行前後のコードを入れるだけでランキングが良くなるぐらいならやらない理由を見つからないです。

Googleには構造化データが正しく記載しているかの確認ツールが下記の2つあります。

  1. リッチリザルト テスト
    サーチコンソールに認識されるかを確認するためのツールです。
    正しく記載する場合はこのように表示されます。

     
  2. スキーマ マークアップ検証ツール
    サイトのソースを確認してくれます。
    より細かく確認することが可能になり、さらに左でコードを微調整することで、右にその内容を反映してテストすることも可能です。

もちろん、構造化データを入れたところで、必ずリッチリザルトになるわけではありません。
あくまでも、リッチリザルトになる可能性ができただけです。それだけでもやる価値はあります。

最後に、構造化データは常に更新、進化しています。
対応したとはいっても、検索セントラルの内容を常に注目して、サイトの更新を怠らないことも重要です。

クライアントさんとのコミュニケーション

コーディング知識を持っていると、クライアントに説明する時に、正確にわかりやすく伝えることができます。

これはWebディレクターの世界ではとても切実な話です。
世の中では、開発チームの話したことをそのまま「コピペ」でクライアントさんに丸投げするWebディレクターもいます。

よく考えばわかりますが、もしクライアントさんがそういった開発ような言葉さえわかるようであれば、Webディレクターに依頼する必要もなく、インハウスで何とかしているはずです。
クライアントさんがEC担当になったとしても、ビジネス専門の人が多いです。

オスカーの似顔絵

コーディングをしないクライアントさんにも特定問題の理由と解決策を理解できるようすることにWebディレクターの価値があります。

例えば、2点目に話した「構造化データ」について、
「SEOにいいから入れる方がいい」だけではなく、「構造化データ」の優れた点、入れることによってメリット、そして対応するのにどうすればよいかを一般人がわかるような言葉で説明する必要があります。

コーディング知識があれば、WordPressを使っている場合ですが、テーマの functions.php ファイルに数行のコードを入れるだけで十分で、
同じことを対応するために、どこかの知らないプラグインをインストールする必要がないことを説明できます。

逆に、クライアントさんはコーディング知識がなく、functions.php の存在を知らない人もいるかもしれません。
プラグインを使った方がいい場合もあります。それは、案件とクライアントさんを把握したうえで正しい方法を選びましょう。

.htaccessファイル


.htaccess ファイルを理解するのに結構難しいです。
but reasonably easy to understand how to use it.

事実、.htaccess理解しなくてもサイトは作れるし、知らないと支障が出るようなことではありません。
大概の既存CMSではデフォルトで作ってくれるので、特別な機能を使わない限り、.htaccessを触ることもほぼないと思います。

それでも、少なくとも、.htaccess ファイルのいいところ使えるところ、そして入れる方法を勉強するだけでも、それを知らない人と比べて差が出て来ます。

例えば、「HTTPをHTTPSにリダイレクトしたい」となった場面で、プラグインを使えば機能実装できます。
しかし、同じことを.htaccess ファイルで実現することも可能です。

時間をかけて .htaccess ファイルについて学習すると、プラグインに頼らず、Web サイトを改善する方法を理解するのに役立ちます。

オスカーの似顔絵

.htaccess ファイルは完全にマスタする必要はありませんが、仕組みやできることを押さえておきましょう。

他、.htaccess ファイルを利用すれば、

  • 他サイトが画像やメディアファイルにリンクされる (ホットリンク) のを防止することもできます。
  • ウェブサイトに繰り返しアクセスするようなボット攻撃を防げます。
  • ボットによるコンテンツのコピーを阻止することができます。

このようなことは、.htaccess ファイルで対応する方が優れています。
プラグインで対応することもできますが、プラグインはIPアドレスをデータベースに書き込んでいますので、
それが、10万、100万ものIPアドレスを囲んだら、データベースは重くなり、サイトのパフォーマンスにも影響します。

エラーの顕在化

コーディングの問題はほとんどHTMLでは見えないです。
その上、ページはCMSでテンプレート化していて、エラーが発生した場合、1つだけでなく、複数ないしすべてのページに渡りエラーが一斉に発生することが多いです。

HTML Validatorでチェックするの1つの方法です。
ウェブページが問題なく表示できても、HTML Validatorで調べたら、「エラー」や「改善すべき」ところが多く表示されるケースがあります。

https://validator.w3.org/

HTML Validatorの使用方法を学ぶのは簡単ですが、結果を理解して説明するにはHTMLへの理解・知識が必要になります。

閉じ括弧(>)が漏れたのような明らかなエラーもあれば、引用符のタイプが違っていて、正しく「ストライクタイプ」を使っていないような微妙なエラーもあります。​​​​​

「コピペ」で知らないうちに違うタイプのものが使われたケースも多く発生します。

間違ったタイプの引用符は場合によってサイトに表示に影響しないが、HTMLドキュメント自体に混乱が発生してしまい、

<meta name=“robots”content=“noindex”>​​​​​​​

それによって、Googleがmetaデータやrobotsコーディングを正確に読み込めないケースが発生します。

また、こういうケースもあります。
コードにこのように入れると、

<a href=“example.com/test.htm”>example</a>

サイトに、このようになってしまうケースもあります。

https://%E2%80%9Cexample.com/test.htm%E2%80%9D
オスカーの似顔絵

こういったエラーは、ツールを使ってもなかなか検出してこないので、人を困らせるのもしばしば。

自動検出されないので、人のスキルに次第で、気が付くまで隠れたままになります。
解決されるまで、インデックスされない可能性もあります。

コーディングスキルによる差別化

WordPressのようなCMSの普及によって、サイト制作はより簡単になり、サイトがどんどん作られている状況です。
同じツールを使って、同じプラグインを導入して、コンテンツ策略からSEO対応方法も違えど同じ。
みんな同じ土台で戦ってはいいけど、だれも勝つ手段を持たない。

そこでプラス1できるのは、コーディングスキルです。

コーディングスキルでテンプレートはもちろん、CSS、JavaScriptもを改善できます。

オスカーの似顔絵

このサイトも同じですが、本来のテンプレートは基本なタイトル、内容という構成ですが、
タイトルの下に、デフォルトで画像を反映することによって、検索ランキングがだいぶ向上することができました。

コーディングスキルは他のサイトと差別化することで、UXが改善され、SEOランキングにも後押しします。
競合が多い場合に、差別化はなおさら重要で、そこにSEOとコーディングスキルがあれば、非常に役立ちます。

Page Speed最適化

UXはSEOにも影響します。GoogleはPageSpeed Insightsを提供していて、改善することを推奨しています。

PageSpeed Insights

Page Speedといえば、LCP、FID、CLS、FCP、最近では、さらにINPが増えています。

INPについてはこちらも併せてお読みください。
新しい指標Interaction to Next Paint (INP)について

オスカーの似顔絵

Page Speed改善するのに、コーディングスキルを持っていれば、意外にもわかりやすくて、役立っています。

Page Speedの改善に、JavaScript、CSS、HTMLが多く関わってきます。
不要のものを取り除い出り、JSやCSSファイルの統合など、コーディングスキルは欠かせません。

おわりに

今日はコーディングスキルがどのようにSEOに役立つかを話しました。

結局のところ、SEOにはコーディングスキルは必須ではありません。
ただ、知識を持っていれば、プラスアルファに働きます。

今日も見ていただきありがとうございました。

それでは。

From Our Blog