【 WEB制作 】実務で必要だけど学習で見逃しがちなあれこれ　①metaタグ　FirE♯ 658

WEBデザイン・コーディングの学習はWEBサイト作り方という部分の比率が大きです。

しかし、この実際にはWEBサイトの公開するにあたって確認する事項は多くあります。

今回から数回に渡りこちらのテーマを書きます。

■ 公開に必要なこと

① metaタグの設定
② OGP画像・Appleタッチアイコンの設定
③ ドメイン移管
④ サーバーの準備
⑤ リダイレクト設定
⑥ フォームのテスト

今回は① metaタグの設定について解説します。

① metaタグの設定

コーディングはWEBサイトの見た目を作るだけでなく、実際にユーザーには見えない部分のコーディングも必要です。

metaタグ関連は、SEOにも関わりますから、クラインアントの満足とも直結するタグになります。

▶︎ meta description

WEBサイトの説明を書く
120文字程度
基本的に一文で書く
検索結果のタイトルの下部に表示される

descriptionは「説明」という意味なので、その名の通り、WEBサイトの説明をここに書きます。

コードはこのようになります。

<meta name="description" content="ここに書く">

120文字程度を書くと良いとされています。

それは、ここの書いた文章が、検索結果で表示されたWEBサイトタイトルの下に表示されるからです。

また、基本的には一文で書くようにします。これは絶対ではないのですが、この意識で書くことで、要点をまとめて必要時なこと絞ることができます。

内容はSEOを意識してキーワードを取り入れて書きます。
会社名はもちろんですが、サービス提供地域や、事業内容などをキーワードとして取り入れましょう。

例：
○○○○株式会社は、○○県の○○を拠点に京都・大阪の公共施設・工場・商業施設などの各種電気工事・電気設備工事を社員一人ひとりが誇りをもってご依頼を承っております。また、社会の発展向上を支える若いスタッフを育成する取り組みを実施しています。

こちらは実際に使った例です。

社名と、地域と、サービス内容、会社が推したい情報を取り入れて設定しました。

▶︎ meta keywords

キーワードは近年では設定する意味はないとされいます。

設定してはいけないわけではないので、ひとまず入れておくと良いと考えています。

<meta name="keywords" content="ここに書く">

例：
電気工事,滋賀,京都,大阪,テナント,ビル,工場,商業施設

このように、キーワードを並べて書きます。

【 まとめ 】

metaタグの設定について書きました。

書いていなくてもWEBサイトは動きます。コーディングの学習に際には、このあたりまで意識がいかないことが多いです。

実際にはWEBサイトは、公開がゴールではなく、その後の運用がゴールであり、スタートです。

そういったところまで、学習の段階で意識しておくと良いでしょう。