seo対策プログラミングに最適なタグの書き方とhtmlの吐き出し方

みなさんがよく使う「検索」(サーチエンジン)ですが、どうやって検索結果にホームページを表示させているかご存知でしょうか?

例えば、ダイエットについて調べているとします。
検索窓に「ダイエット」を入れて検索すると、様々なページが表示されてるかと思います。

この検索結果に、ホームページを表示させるための役割をしているのが、htmlコードになります。

コーダーやにフロントエンジニア、webデザイナーを目指す方は基本なので、しっかり押さえておきましょう。

htmlはGoogleやYahoo検索エンジンに伝える役割

ロボット型検索エンジンGoogleやYahooは、インターネット上にひそかにロボットのクローラーを飛ばし、世界中のインターネット上のコンテンツをチェックしています。

このクローラーは、Webサーバーを巡回して自動的にWebページに関する情報を集めて、キーワードごとにデータベース化しています。このロボットにwebサイトを認識させるために、ソースコードを正しく挿入する必要があります。

コーディングする場合、このサーチエンジンに最適化できるようソースコードを書けるように理解しておきましょう。

SEO対策のhtmlコード基本1 <タイトルタグ/>

タイトルタグとは、そのページのサイトの名前になります。

ダイエットの体験談を紹介するページであれば、タイトルタグの中に「ダイエット体験談」と入れます。タイトルタグにタイトルを入れることで、ユーザーが検索窓で検索した際に、サイトが引っかかるという仕組みです。

html
<title>ダイエット体験談<title/>

htmlファイルに書き込むこのようになります。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ダイエット体験談</title>
</head>
<body>
</body>
</html>

サンプル

タブのところに、タイトルタグに入れたタイトルが表示されていると思いますので、サンプルコードをダウンロードしてローカル環境(パソコン内)で確認してみてください。

SEO対策のhtmlコード基本2 <メタディスクリプション />

ディスクリプションは、そのサイトの説明文になります。
ユーザーにページの内容を説明する部分になります。

検索すると、タイトルの下に説明文があります。
例えば、「ダイエット体験」と入れると、以下のような検索結果が出てきます。

タイトルの下にある部分が、ディスクリプションで設定した内容になります。

実際のソースコードは以下になります。

html
<meta name="description" content="サイトの説明文">

htmlファイルに書き込むこのようになります。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="私のダイエット体験ブログ!">
<title>ダイエット体験談</title>
</head>
<body>
</body>
</html>

サンプル

ローカルで確認するとディスクリプションの中にサイトの紹介文が入ったのがわかります。

SEO対策のhtmlコード基本3 <キーワード/>

メタタグの次に必要なのが、キーワードの設定になります。
ディスクリプションとキーワードのどちらが重要かというと、ディスクリプションになります。キーワードは、ないよりあった方が良いぐらいなものと思ってください。

企業によっては、入れるところもありますし、競合がソースコードを見て、どのキーワードを狙っているのかが見えてしまうので、あえて入れない場合もあります。

知っているのと知らないとでは、差がつきますので、SEO対策はこんな感じでするんだなーぐらいで、頭の片隅に置いておいてください。

html

<meta name="keywords" content="ダイエット,痩せたい">

htmlファイルに書き込むこのようになります。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="私のダイエット体験ブログ!">
<meta name="keywords" content="ダイエット,痩せたい">
<title>ダイエット体験談</title>
</head>
<body>
</body>
</html>

サンプル

{応用編} 様々な言語でもSEO対策ができます。

htmlを直接書く場合もありますが、そのほかの言語を使ってもhtmlを吐き出して使うことがあります。
今回は、吐き出し(表示)のみの書き方になります。

PHPのSEO対策法

phpでhtmlを吐き出すソースコードになります。

php
<?php
echo '<meta name="description" content="私のダイエット体験ブログ!">';
echo '<title>ダイエット体験談<title/>';
?>

<!DOCTYPE html>
<html lang="ja">
<head>
<?php
echo '<meta charset="私のダイエット体験ブログ!">';
echo '<title>ダイエット体験談</title>';
?>
</head>
<body>
<?php
</body>
</html>

JavaScriptのSEO対策法

javascriptでhtmlを吐き出すソースコードになります。

JavaScript
document.write("<meta name="description" content="私のダイエット体験ブログ!">);
document.write("<title>ダイエット体験談</title>");
<!DOCTYPE html>
<html lang="ja">
<head>
<script type="text/javascript">
document.write("<meta name="description" content="私のダイエット体験ブログ!>");
document.write("<title>ダイエット体験談</title>");
</script>
</head>
<body>
</body>
</html>

JavaサーブレットのSEO対策法

javaサーブレットでhtmlを吐き出すソースコードになります。

package servlet;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class Testfamily extends HttpServlet {

  protected void doGet(HttpServletRequest request, 
  HttpServletResponse response)throws ServletException, IOException {

     uresponse.setContentType("text/html; charset=UTF-8");
     PrintWriter out = response.getWriter(); 

         out.println("<html>");
         out.println("<head>");
         out.println("<mata name="description" content="私のダイエット体験ブログ!">");
         out.println("<mata name="keywords" content="ダイエット,ダイエット効果");
         out.println("<title>ダイエット体験ブログ</title>");
         out.println("</head>");
         out.println("<body>");
         out.println("</body>");
         out.println("</html>");

    }
 }

作り方でSEO対策のコードは変わる

見た目はhtmlですが、ホームページやwebアプリケーションなど作るものによっては、コードの書き方が異なります。

web上で公開されているソースコードを見て、htmlで吐き出されていても、フロントエンジニアのお仕事やプログラマーのお仕事側になると、プログラミングの方法が変わるということです。

サイトを作成する際は、クライアント側からお願いされないと、SEO対策を行わない企業も実際あります。

SEOの効果を感じない方や、すでにwebサイトをお持ちの方は一度、ソースコードを確認すると良いかもしれません。

また、独学で勉強している方は、プログラミング言語だけではなく、こうした応用をセットで覚えるとかなり時間短縮で、稼げるエンジニアに近づけると思います。

今回は、SEO対策のhtmlの書き方と吐き出し方を説明しました。
ただ、これだけでは完璧なSEO対策とは言えません。
興味のある方は、SEO対策入門についても一読ください。

有料カウンセリング

一緒にプログラミングを勉強したい生徒さんをお待ちしております。
カウンセリング(1時間程度)は、その人に合った教材を用意するためのヒヤリングとプログラミングの体験になります。

受講生の皆さまが幸せなれるよう安心して勉強に取り組めるよう料金を設定しています。
一人でも多くの方に、プログラミングで成功体験していただきたいと思っています。

勉強したいけど、費用が難しいという方はお気軽にご相談ください。

 

カウンセリング(体験含む) 一般/5,000円(税込)
発達障害児向け/2,500円(税込)
主張費 別途/オンラインの場合は無料
チラシからのお申し込み カウンセリング+交通費は無料になります

 
※障がいをお持ちの方、発達障害をお持ちの方またはそのご家族の方、ご家族の介護中の方、生活保護を受給している方や非課税世帯の方は、カウンセリング料が半額となります。

※は入力必須です。

お申し込み内容
お住まい(都道府県)
お名前
チラシ番号
返信用メールアドレス
参考までにお答えください。
お使いのパソコンの種類
お問い合わせ内容
個人情報の取り扱いについて