web忘却録 ＜meta＞を使用
metaタグ…たくさんありますよね…。
何なのあれ…。意味も違うものばっかり！
…と、言うことでここで<meta>タグの意味とかをここに書き出して忘却録にしていけばいいのでは？と、思って作ってみました。
◆<meta charset="utf-8"> 文字エンコード名
<head>
<meta charset="utf-8">
</head>charsetは文字エンコード名。文字化けを防止するものです！←確か…(;´Д｀)
このコードがないと皆に見てもらいたい文字が文字化けしてしまい、伝えたいことが伝えられないことになる。なので忘れちゃ、ダメ！絶対！！です。
◆<meta name="viewport" /> 表示領域
<head>
<meta name="viewport" content="width=device-width,maximum-
scale=1" />
</head>viewport(ビューポート)は、表示領域。
表示領域…まるで呪術廻戦に出てくる「領域展開」みたいな名前に読めるｗ
サイト画面はPCモニターが基本と言われている。だけど、世の中には…というか最近はタブレットやスマホでサイトを閲覧する人が半分以上いるので、そのモニターに合わせた表示をするための指示をここで入れておきます。
width=device-width(表示領域の幅＝端末画面の幅に合わせる)
content内のwidth=device-widthですが、表示領域の幅＝端末画面の幅に合わせる。って意味！
ちなみにwidth=数値(0～10000)を指定することが出来るらしいけど、普通は980みたいです。どうすればいいかわからない時はwidth=980でOK！
height=device-height(表示領域の高さ＝端末画面の高さに合わせる)
widthは幅。つまり、width=device-widthのwidth=をheight=device-heightに変更すると、表示領域の高さが端末画面の高さに合うようにモニター画面が変更するのです。
maximum-scale=数値
maximum-scale=1 最小拡大比率の設定…だそうだけど…。意味全く分かんねぇ！
…と、まぁ…真面目に調べてみたらスマホやタブレットで見てる時に「この字、読みにくいなぁ」「このイラストを拡大して見たい！」って時、皆さん何します？モニターに向かって2本の指を広げますよね？つまり、拡大させる。
けど、この指示をしていると拡大が出来るか出来ないか。又は拡大はどこまで出来るかをここで指定してるんです。これ、知ってめっちゃ「豆知識じゃん！」となりましたが…「いや、web系の仕事してる人知ってるでしょ」とツッコミを入れてしまいましたわ。←一人でｗ
<head>
<meta name="description" content="カッコいい概要分を入れてみようぜ☆彡" />
</head>◆<meta name="description" />検索した時に出てくる概要文
概要…この言葉、格好つけてるようだけど何言ってるか理解できないぴんくですｗ
Google先生で検索して結果が表示されたときに出る↓の赤枠線がdescriptiotionで入れた内容が表示されます。…まぁ、これはnoteですが。
これが概要です。ここを表示すると、「ここのページに求めているものがある！」と検索側から探しているものが分かりやすくなっているのがありがたいので、このタグは制作時に入れるのがいいと思います。
ちなみに、この ↓↓ガチオタ断捨離の話はこれ↓↓ です。
<head>
<meta name="keywords" content="キーワード,検索しやすいワード"/>
</head>◆<meta name="keywords" />検索しやすいキーワード
検索する時、皆さん何と検索バーに入力しています？私は単語で、的確な言葉を入力して検索します。
その検索バーに入力するのが「キーワード」です。検索されやすい言葉を製作したページのテーマやキーワードをここに入れていけば、見られる頻度も高くなります。
インスタやツイッターでも「#(ハッシュタグ)」もキーワードの一種だと私は思ってます。って言うか同じもの。
<head>
<meta name="robots" content="noindex,nofollow">
</head>◆<meta name="robots" content="noindex,nofollow">検索登録されない・文章内のリンクをたどらせないよう指示
これは検索されないためのタグです。この世の中には検索されて困ることがあります。はい！エロいページです!!←ちゃう…。
ネット通販すれば個人情報を入力するページに飛びますが、そこへ突然検索して飛び込んでこられないための方法です。
例えば、人気アイドルのチケットを先着で取るために申し込みページに辿り着くのに登録したりするページがあります。それをすっ飛ばし申し込みページに入ってきたりすると腹立ちませんか？簡単に言えば横入りです。
それをさせないために大事なページに検索できないようにガードをしているタグなのです！
◆metaタグまだまだあんよ！
これ、まだ一部なんですよね(;^ω^)
一応metaタグの中でも<meta name=>で纏めたページにしてみた。
後に、もうちょっと理解できるようになったら書き直したりするかもしれないけれども自分用だからOKOKｗ
metaだけでも色々と指示ができることが多くて、混乱することが多い(;^ω^)
あと、言葉で表現するのって難しいね。
この記事が気に入ったらサポートをしてみませんか？