WEBページの作り方－WEBフォント・SEO対策－
皆さん、こんにちは！
沖縄地方の梅雨明けが発表され、
全国の梅雨明けも迫ってきましたね⛅
既に暑い日が続いていますが、水分補給をしながら
健康に気を付けて過ごしていきましょうね！
<head>部分に<meta name>タグを記述することを解説しました！
前回の記事をご覧になりたい方は下記URLより読んでみて下さいね！
URL：WEBページの作り方－コメントアウトからスマホ対応－ - nikusukixのブログ
今回はWEBフォントの使い方や<meta name>タグを
使った簡単なSEO対策について解説していこうと
思います！
この記事で学べること！
- WEBフォントの導入方法と記述箇所が分かる
(https://fonts.google.com/からコードを
コピーして<head>部分に貼り付ける)
- <title>タグでタイトルを<meta name>タグで
ページ概要を記載することでGoogleなどの
クローラーにWEBページを認識してもらうことが出来る
- SEOとは検索エンジン最適化といい、
<head>部分にページタイトルや概要を記載し、
更にキーワード選定も行うと上位表示されやすく
なる
それでは、始めていきましょう(^^)/
目次
1.WEBフォントとは
以前はWEBページを表示する際、パソコンによって
文字フォントが崩れてしまうという事が起きていました。
それを解決してくれるのがWEBフォントになります！
コードをHTMLファイルに記述することで、
WEBページを表示する際に文字フォントも一緒に
パソコンにダウンロードすることで、どのパソコンでも
フォントが崩れないようになっています(*'ω'*)
2.<head>部分に文字フォントのコードを記述する
ここからは、WEBフォントの導入方法について見ていきましょう。
下記の手順に従って実際にWEBフォントを導入してみましょう。
①『common.html』を開く
『VSCode』を立ち上げる
→前回作成した『common.html』を開く
もし『common.html』が自動選択されていなければ、
画面上部の『ファイル』→『フォルダーを開く』
→『デスクトップ』→『common.html』の順で
前回作成したhtmlファイルを選択する。
②Google FontsからWEBフォントのコードをコピーする
下記URLからGoogle Fontsにアクセスし、
WEBフォントのコードをコピーする。
画面左上の『Search fonts』と書かれた検索窓にお好きなフォントを入力する
(ここでは『Montserrat』で検索し、Bold700を選択する)
→画面右下の<link rel=・・・rel="stylesheet">までをコピーする
③<head>タグ内にWEBフォントのコードを貼り付ける
前回記述した<meta name>タグの横をクリックし、
エンターを押して改行する。
キーボードの『Ctrl』キーと『V』のキーを同時に押して
WEBフォントのコードを張り付ける。
(もし、貼り付け位置が<meta name>タグと
ずれている時は『左クリックで範囲を選択』
→『右クリック』→『選択範囲のフォーマット』
の順で調整できる)
3.<title>タグでタイトルを<meta name>タグで記事概要を記載する
①<title>タグで記事にタイトルをつける
前回記述した<meta charset>タグの横をクリックし
エンターを押して改行する。
<title></title>の間をクリックし、記事のタイトルを記載する。
(ご自身で作るWEBページのタイトルを記載してくださいね！)
②<meta name>タグでページ概要を記載する
<title>タグの横をクリックしエンターを押して改行し
<meta name>タグを下記のように記述する。
content属性でページ概要を記載することで、
WEBページの概要を認識してもらうことが出来ます。
4.SEOとは
『SEOって何？』 と思われた方もいらっしゃるかもしれません。
SEOとは
Search Engine Optimizationの頭文字を取ったもので
『検索エンジン最適化』と言います。
検索エンジンはGoogle Chromeが代表的です。
検索エンジンは定期的にWEBページを巡回して、
最適なWEBページを上位に表示する仕組みになっています。
クローラーは巡回した際に<head>部分で
WEBページの内容を認識するので、
タイトルやページ概要を記述しておかなければ
いけないのです！
キリがいいので今回はこれで終わりにしましょう(^^)/
5.本日の文法まとめ
- WEBフォントを導入することで、どのパソコンで
見ても同じフォントにする事ができる
- <head>部分に<title>タグと
<meta name>タグを記載することで
クローラーが巡回した際に最適なものが
上位表示される
- SEOとは検索エンジン最適化といい、
ページタイトルや概要を記載し、更に
キーワード選定も行うと上位表示されやすく
なる
次回は実際に作りたいデザイン確認しながら
<body>タグ内を記述いこうと思います(^^♪
記事のご感想等頂けますと、今後の励みになりますので
お待ちしております！
応援宜しくお願いします↓
