自作サイト作成 head文編
前回の記事でHTMLの宣言をしました。
続いてヘッド部分を書きこみます。
<head>～</head>の部分には
meta要素・link要素・title要素を書きこみます。
順番は好みでどうぞ＾＾
meta要素はなんかサイトによっては１０個以上書いている方もいますが
最低限必要な文だけを書いておきますね。
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta name="keywords" content="メインキーワード,キーワード2,キーワード3" />
<meta name="description" content="サイトの要約文（全角80文字以内）" />
上記の一つ目で宣言文同様にブラウザで
日本語を表示させるためにもう一度書きこみます。
宣言文を書かなくても表示できると書いたのはこの文を書くからです。
宣言文を書いたからといって省略できないので注意して下さいね。
２つ目はサイトのキーワードになります。
あまり欲をかいて何でもかんでも入れずに５個ぐらいまでにしておきましょう。
３つ目の要約文は検索結果の一部として表示されることがあるので
書いておくことで訪問する方の目安となります。
以前のようにキーワードや要約は検索ランクで重要視されていませんが、
『不要or書いてはいけない』のではないので書いておいた方が得策です。
次にCSSを使う＆今後javaスクリプトを使うために
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
を記入します。
<link rel="stylesheet" href="css/style.css" type="text/css" />
を書くことでスタイルシートのドメイン内のどこにあるか指定します。
上記の書き方の場合は表示される『index.html』から見て
CSSがフォルダ内にある場合（右画像）で、
<link rel="stylesheet" href="style.css" type="text/css" />と書くと
左画像のような設置の場合です。
ちなみに、もしフォルダが左画像のような場合は"../css/style.css"と書きます。
補足として『href="css/style.css"』という書き方は相対パスといいます。
『href="http://ドメイン/css/style.css"』という書き方は絶対パスといいます。
最後に、
<title>記事タイトル ｜ サイトタイトル</title>
を書きます。
記事タイトルを前に持ってくるのは
記事の中身が検索にヒットしたからなので
その記事タイトルを前に持ってきた方が訪問者が分り易くなるからです。
もしTOPページの場合は記事タイトルの部分が無く
サイトタイトルだけを書けばOKです。
では前回・今回のおさらいとしてを全て書いてみると・・・
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta name="keywords" content="メインキーワード,キーワード2,キーワード3" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<title>記事タイトル ｜ サイトタイトル</title>
</head>
となります。
ということで今日はここまで！
＜＜編集後記＞＞
いや・・・まったく・・・
今だからこそですが
脳みそツルツルの私がよく理解できたな＾＾；
前回・今回の記事は理解できなくても
コピペだけでもいいのですが・・・
まっ、どうせなら・・・ね＾＾
訪問者のお役に立てば幸いですm(__)m
弊社へのお問い合わせ、メッセージはこちらから。
こんにちは、ありすです。
いつも応援ありがとうございます☆
SEO対策で＜meta＞って聞くけど、
実際どうやって使うのかなぞのままだったんですよね（＾＾；
…難しい。。。
…何言ってるのか分からないよー、と。
なので、今回使い方が分かって
嬉しかったです。
ちょっとずつ様子をみながら使いたいと思います。
なるほどっの応援ぽちです＾＾＊
こんばんは、ユウさん。
いつもお世話になっております
確かにアフィリエイト・ブログだと
カスタマイズの記事はあっても
基本的なHTMLの記事はありませんでしたね。
私はタグの意味・順番など
全く考えたことがなかったので、
改めて勉強になりました。
応援☆ザクザク。
Zeroと申します。
非常に丁寧に書かれていてわかりやすかったです。
確かに初めてみたときどう書いたらいいのかわからないので参考になりますね。
ほかの記事も拝見させていただきます。
それでは応援ポチ☆