Announce

PukiWiki contents have been moved into SONOTS Plugin (20070703)

html

HTMLのメモ

HTML

SEO

ページは分割する。1ページになんでもかんでも記述しておくとキーワードランク?が下がる。

キーワード

キーワードは2、3個。 有名でないサイト名前はあえてはずす。 長すぎるキーワードはだめ。

テキスト評価

bodyタグ直下のテキスト文章には上位表示させたいキーワードを積極的に入れていくとよいでしょう。 特定のキーワードの占める割合が個人的には7%前後がd(_・) グッド! かと思います。

title

サイト名のみでもだめ。 キーワードのみでは意味わからん。 記号はもちろんつかってはだめ 「北九州の不動産中央情報センター(賃貸・売買・マンスリーマンション・アパマンショップ)」

meta

<meta name="keywords" content="">
<meta name="description" content="">

google は無視。ほかはちょっときくかも。 description をサイトの説明文として表示されることがあるのでうまいこと書いておこう。 frame 使ってるならそっちね。

a

<a>Top</a>

ではなく

<a>SEOで無料アクセスアップTOP </a>

とすることで~というキーワードをつけられる。 自サイト間でやっていいのか?

  • 画像を使う場合は alt を使うこと。
  • 行き先のページのキーワードを含んでおくこと。(関係がないと判断されると消される)
  • 1ページ内のリンクは50以下に。

フレーム

  • 親フレームの内容しか検索エンジンに評価されない
  • <noframe> を使っても硬貨は薄い
  • 子フレームのだけが検索エンジンにひっかかることも
  • 結論:フレームはやめれ

ページランクをあげる

  • リンクをお願いする
  • 相互リンクみたいな。
  • 自動相互リンクの活用
  • google のために他の検索エンジンに登録(特にYahoo)
  • リンク集への登録

引越し(HTML,CGI,.htaccess)

http://park12.wakwak.com/~webring/redirect.html

CSS

CSS table

style="empty-cells:show"

CSSブラウザ互換Tips

font-size

font-size を px 指定しておく。% や em はブラウザによって挙動が違うのでだめ。 small や medium はいうまでもなく当然ダメ。

body {
    font-size:13px;
}
h4 {
    font-size:13px;
}
h3 {
    font-size:15px;
}
h2 {
    font-size:20px;
}
h1 {
    font-size:27px;
}

ぐらいが opera, firefox のデフォ。IE だけが違うのであえて指定してあげる。

.htaccess

参考サイト

コメント

#

アクセス制限

いくつかのドメインのみ、アクセス許可
order deny,allow
deny from all
allow from .u-aizu.ac.jp
いくつかのドメインのみ、アクセス禁止
order allow,deny
allow from all
deny from .u-aizu.ac.jp

ホスト名指定を行うとDNSアクセスが起こるので遅いとかなんとか

163.143.

のように指定

メソッド制限

<Limit GET POST>
</Limit>

で挟めばHTTPメソッドの限定

パスワード認証

AuthUserFile /home/user/ ... /.htpasswd
AuthGroupFile /dev/null
AuthName "Please enter username and password"
AuthType Basic
require valid-user
% htpasswd -c .htpasswd guest
Adding user guest
New password: guest           (←実際には表示されません)
Re-type new password: guest   (←実際には表示されません)
#特定のホストからは、パスワードを要求しない設定
AuthUserFile /home/user/ ... /.htpasswd
AuthGroupFile /dev/null
AuthName "Please enter username and password"
AuthType Basic
require valid-user
Satisfy any
order deny,allow
deny from all
allow from .myfriend.ne.jp(←myfriend.ne.jp からは認証不要)

チルダを前置することで、「~ "regex"」の形でワイルドカードまたは正規表現を使うこともできます。この場合、<FilesMatch> と同じ意味です。

<Files ~ "connect.*">
AuthUserFile /virtual/nseo/.htpasswd
AuthGroupFile /dev/null
AuthName "Please enter username and password"
AuthType Basic
require valid-user
Satisfy any
order deny,allow
deny from all
allow from 163.143.
</Files>
# password.html ファイルに対して、コンフィグを限定
<Files password.html>
...
</Files>
# 画像ファイルに対して、コンフィグを限定
<Files ~ "\.(gif|jpe?g|png)$">
...
</Files>

.htaccess 自体を隠す

AddHandler cgi-script htaccess

または

# .htaccess や .htpasswd ファイルを不可視
<Files ~ "^\.ht">
Order allow,deny
Deny from all
Satisfy All
</Files>

Practical Tips

IE5 compatible mode

IE6 works in IE5 compatible mode if see

<xml version="1.0" encoding="UTF=8"?>

2-pane

Assume we want to design 2-pane web site without using table.

<div style="float:left;width:20%;">
sidebar blahblah blahblah blahblah blahblah blahblah
</div>
<div style="float:right;width:79%;">
body blahblah blahblah blahblah blahblah blahblah
</div>
<div style="clear:both;" />

does not work well in IE6. The sidebar wrap-arounds (goes down) after trying to narrow the width of screen. In details, it happens after one word, blahblah, overed 20% of the width of screen. It happens even if there exists plenty of space at body space. And, we usually use a search form at sidebar. Although we can use css 'line-break:strict; word-break:break-all; word-wrap:break-word;' to break one long word on IE, we can not break the search form. So, it is always considered as a somewhat big one word, and it means this wrap-arounding will be happened so often.

Instead, I recommend to write as

<div style="float:left;width:200px;">
sidebar blahblah blahblah blahblah blahblah blahblah
</div>
<div style="margin-left:200px;">
body blahblah blahblah blahblah blahblah blahblah
</div>
<div style="clear:both;" />

. In this case, narrowing effects to only the body space. Wrap-arounding happens if the size of 'blahblah' overed the width of screen at the body space, but it happens only after the width was pretty narrowed because the body space can use much of space (not only 20%).

When we want to specify width by %, using table is the correct answer.

Extra

<div style="float:right;width:200px;">
sidebar
</div>
<p>....</p>
<p>....</p>
<p>....</p>
<p>....</p>