ホームページ作成SEOマニアックス

ホームページを作成して間もない頃は、見た目だけにとらわれてしまって、肝心な検索エンジンに対しての対策を全く出来ていなかったりします。ホームページビルダーやGoLiveなどのホームページ作成ソフトに頼りすぎるのは良くありません。中身の手直しも必要になります。

ホームページを作ってしばらくすると、metaタグと言う言葉を耳にすると思います。

では一体metaタグとは何なのでしょう?

その辺りを初心者にも出来るだけ解りやすく説明します。

Advertisement

metaタグとは、html(またはphp)ページをソース表示したときに出てくる、

<head>~</head>
間に記述するタグのことです。

このタグの中身は実際にページに表示されることはありません。

では、なぜこのタグが存在するのか?

それはWebページのお約束事みたいなものです。

しかし実は、ここは検索エンジン対策(SEO対策)に重要な部分だったりします。

当サイトのmetaタグのはこんな感じになっています。(実際はもっと記述がありますが...)

尚、当サイトは、XHTML1.0 Transitionalで作成していますので、ホームページビルダーなどの場合とは若干異なります。
一般のホームページ作成ソフトの場合、多くはHTML4.01 Transitionalで作成されていると思います。

<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta content="ALL" name="ROBOTS" />
<meta name="robots" content="INDEX,FOLLOW" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="shortcut icon" href="https://www.seo-maniax.com/favicon.ico" />
<title>ホームページ作成SEOマニアックス</title>
<meta name="keywords" content="ホームページ,作成,マニュアル,SEO対策,検索エンジン,サーバー,Apache,swf,wmv,flv,埋め込み,設定,PHP,HTML,CSS,MT" />
<meta name="description" content="ホームページ作成の基礎知識から、スタイルシートの使い方やレンタルサーバーの設定などを解説します。" />
<link rel="start" href="https://www.seo-maniax.com/" title="ホームページ作成SEOマニアックス" />
<link rel="next" href="https://www.seo-maniax.com/archives.php" title="ホームページ作成SEOマニアックスサイトマップ" />
</head>

HTML4.01 Transitionalの場合は、各タグの最後にある /(半角スペースとスラッシュ)を削除すれば使用できます。

ここに記されているのは、このコンテンツ(ホームページ)がどんな文字セットを使用しているのかの記述です。

これが記述されていないと、ブラウザによってはどんな文字セットを使用しているかを判断できずに文字化けすることが有りますので必ず記述しましょう。

当サイトはutf-8を使用していますので

<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
のように記します。

shift_jisを使用している場合は、

<meta http-equiv="content-type" content="text/html;charset=shift_jis" />

となります。
ちなみにこれはXHTML1.0 Transitionalの文法になりますので、HTML4.01 Transitionalの場合はタグの最後にある /(半角スペースとスラッシュ)を削除して、

<meta http-equiv="content-type" content="text/html;charset=shift_jis">

となります。

この部分は検索エンジンの巡回ロボットに、このページをキャッシュさせるかさせないかの記述です。

ページを検索エンジンにキャッシュさせたい場合は
XHTML1.0 Transitionalの場合
<meta content="ALL" name="ROBOTS" />
<meta name="robots" content="INDEX,FOLLOW" />
HTML4.01 Transitionalの場合
<meta content="ALL" name="ROBOTS">
<meta name="robots" content="INDEX,FOLLOW">

ページを検索エンジンにキャッシュさせたくないい場合は
XHTML1.0 Transitionalの場合
<meta content="ALL" name="ROBOTS" />
<meta name="robots" content="NOINDEX,NOFOLLOW" />
HTML4.01 Transitionalの場合
<meta content="ALL" name="ROBOTS">
<meta name="robots" content="NOINDEX,NOFOLLOW">

と記します。

この部分は、javascriptや、スタイルシートを使用している場合に記述します。
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />

この部分は、ショートカットアイコン(favicon.ico)を作成していない場合は記述しなくて良い部分です。

ショートカットアイコンとは、ブラウザのURLバーの先頭や、お気に入りにサイトを追加した時に出来るアイコンの事です。

当サイトをブラウザで表示したときに、IE7以降やその他のブラウザで開くと、URLバーとタブバーにアイコンが表示されていると思います。
必要が無いといえば無いものなのですが、オリジナリティーを出したいのなら作ると良いかもしれません。

ショートカットアイコン(favicon.ico)を作りたいなら、自分で画像を用意すればFavIcon from Picsと言うサイトで無料で作成できます。

最も重要なmetaタグのひとつになります。

要するにここは、ページのタイトル部分になりますので、絶対に入っている必要があります

ホームページビルダーやアドビのGoLive(ゴーライブ)などで作成されているページで、このタイトルが書かれていないページをかなり見かけます。

特に酷いのが、アドビのGoLiveで作成されたページで、タイトルがデフォルトのままの<title>Untitled Page</title>
となっているページ。

中には<title>Adobe GoLiveへようこそ</title>
なんてなっているところも見かけます。

一体誰のページなのでしょう?Adobe GoLiveのページですか?(汗)

折角一生懸命に作ったのに、ページのタイトルがAdobeの宣伝なんてシャレになりません...
知らずに作っているのですから仕方が無いのですが、ゾッとしませんか?

絶対にtitleはページ毎にちゃんとしたタイトルを入れるように心がけましょう!

ここはページのキーワードを入れる部分になります。

キーワードとは、そのページにとって重要なキーワード、または記載されている内容に沿ったキーワードで、検索エンジンで検索されるであろう単語のことになります。

酷いサイトになると上位表示させたいがために、ページと全く関係の無いキーワードを入れているところもあります。
たとえば、釣りのページなのに上位表示させたいが為に有名芸能人の名前が入っていたり...

それではキーワードの意味を全く成しません。
逆に検索エンジンからはスパム行為とみなされてしまいますので、そのような行為は絶対にしないでください。

書式は<meta name="keywords" content="" />""の中身に、自分の作ったページの内容に合うキーワードを入れていきます。

キーワードは単語で書き、各キーワードを,で区切ります

また、キーワードを多く入れ過ぎても意味がありませんので、10個程度にします。

この部分はページの説明文になります。

metaタグdescription

検索エンジンなどで検索したときに、リンクの下に文章が出てくると思います。
(画像赤枠部分)

descriptionタグを使用していない場合は、この部分にページの本文が表示されます。

しかし、検索エンジン対策としてはdescriptionタグにキーワードとなる要素を入れつつ、ページの説明を記述するようにします。

そうすることでライバルサイトよりも上位表示される可能性が高くなります。
上位表示されるには他にも要因がありますが、やらないよりやったほうが良いです。

書式は<meta name="description" content="ページの説明文" />

のようになります。ページの説明文の部分を、ご自分のページの説明文と入れ替えてください

出来ればlink rel="start" タグlink rel="next" タグは入れた方が好ましいです。

このタグは検索エンジンを、元のページ(link rel="start")の所在地と、次のページ(link rel="next")への誘導をスムーズに行うために入れるmetaタグになります。

ブログの場合はこのタグは自動に入るものが多いですが、手打ちページの場合は製作者が自分で考えURLを記述する必要があります。

当サイトで言うと、トップページは<link rel="start" href="https://www.seo-maniax.com/" title="ホームページ作成SEOマニアックス" />
<link rel="next" href="https://www.seo-maniax.com/archives.php" title="ホームページ作成SEOマニアックスサイトマップ" />
のようになっています。

外部スタイルシートを使用している場合は、metaタグにスタイルシートのリンク先を記述する必要があります。

<link rel="stylesheet" href="スタイルシートへのパス" type="text/css" />

また、外部javascriptなどを使用している場合は

<script src="javascriptまでのパス" type="text/javascript"></script>

.css.jsファイルへのパスは、URLでも相対パスでもかまいません。

長く記しましたが、ホームページ作成ソフトで誰にでも簡単にホームページが作れるようになっている中、この部分を全く知らなずにサイトを作っている方が非常に多いです。

ライバルに差をつけたいならここに記したmetaタグをご自分の環境に合わせて書き換え入れることをお勧めします。

Advertisement
Movable Typeのmt-config.cgi追記で容量の大きいデータファイルをアップロード出来るようにする手順。
phpファイルをインクルードすると文字化けしてしまうという現象の原因と対処方法。って、ただ単に文字コードセットをサイトのencodingとcharsetに合わせるだけなんですけどね...
サクラエディターで入力改行コードを変更する方法です。Unix系サーバーで *.shなどのファイルを作成するときに使用します。デフォルトではCRLFになっています。
使っていなければ分からない格安レンタルサーバーの機能の比較や各サーバーの癖、利点、欠点を公開。ロリポップ、チカッパ、ヘテムル、さくらインターネット、コアサーバー、ハッスルサーバーの比較
相互リンクと被リンクの意味と違いについて簡単に説明します。リンクはSEOでも重要な部分になります。

<<<前の記事へ | 次の記事へ>>> このページのトップへ


■複数キーワードで検索する時は半角スペースで区切ってください
My Yahoo!に追加
IPv4アドレスついに枯渇!
迷惑極まりない問い合わせ
MTおよびMTOS 5.02 セキュリティーアップデート
ロリポップサーバーでのMT公開日時指定投稿(cron)設定
自サイトが悪意のある他サイトにインラインフレーム表示される
Gumblar対策
MTOS 5.0 アップグレード後、携帯サイトが文字化け
MTOS 5.0 アップグレード手順 SQLite
Firefox プロセス終了できない現象
不正なサイト乗っ取りの防止策
MT ファイルアップロード制限変更手順
Apacheサーバーでのindex Of 表示回避手順
SWFなどの埋め込みコンテンツがIE6でエラーダイアログが出る現象
MT4.261アップグレード手順
ロリポップサーバ、ディスク容量増加!
さくらインターネット .htmlをPHPとして動かす
MTOS 4.x インストール手順
MT 4.x ダウンロード 転送 パーミッション変更 SQLiteデータベース作成
さくらサーバーでの Index of 表示をさせない手順
phpのバージョン確認方法
Apache2.2 最新バージョン
PHP インクルード 文字化けする現象
コアサーバーでのcronの設定 MT4.x 日時指定で予約投稿編
サクラエディター 入力改行コードの指定 (LF)
ハッスルサーバーで Service Temporarily Unavailable が頻繁に出る
チカッパphp5バージョンアップ後のphp includeエラー対処
さくらサーバーで.htmlをphpとして動かす
FLVファイルの埋め込みでのIEスクリプトエラー対処
ロリポップサーバーでphp5バージョンアップ時のincludeエラー対処
ハッスルサーバーでMT4.2 PHP化注意事項
格安レンタルサーバーの比較
Google独自ブランドのブラウザGoogle Chrome登場!
Windows MediaPlayer11 でHTML埋め込みwmvが視聴出来ない現象
FLV動画の埋め込み手順
Safariでのcssレイアウトずれ対処
Firefox3 公開!IE7より9.3倍早い!!!
自宅サーバーでの検索エンジン対策
相互リンクと被リンク
metaタグを知ろう!
go-pear.phpが実行できない場合
SEOを考慮したサイトの引越し(301リダイレクト)
IE7でのレイアウトずれ対処
バックリンク(被リンク)について
Thumbs.db ファイルをFTPに残さない(作らない)
自宅サーバ でのwmv埋め込み+Firefox・Mozilla(Apache)
サイト整理=リンク切れのチェック
FireFox Add-ons Edit CSS
Flash(.swf)の埋め込み-IE・Mozilla系共有
wmvファイル埋め込み(Java Script 編)
wmv動画の埋め込み(IE・Mozilla系共用)
IEでのレイアウトずれ対処(css)
IE6以前でpng透過画像を使用する
フレームセットの利点と欠点
htmlファイル整理|ディレクトリ毎のファイル整理
検索エンジンを意識したサイトを作る
ホームページのタイトルと内容
MT作成サイトのPHP化手順
さくらサーバーでのPHPサイト構築
PEARのインストール(さくらサーバー編)
サクラエディターの使い方
サクラエディターのインストール

サイトマップ