サイト名

# メタ情報したい（``meta``） ```html サイト名 ``` メタ情報は`head`タグの中に記述します。 `meta`タグを使ってkey-valueペアで設定します。 ## 文字エンコーディングしたい（``charset``） ```html ``` `charset`キーで文書の文字エンコーディングを設定します。といっても、``utf-8``以外の値は指定できません。この宣言は文書の最初の方に書いておく必要があります。 ## ビューポートしたい（``viewport``） ```html ``` [ビューポート](https://developer.mozilla.org/ja/docs/Web/HTML/Viewport_meta_tag)のサイズを設定できます。画面の幅はデバイスによって異なるため、``width=device-width``を設定しておきましょう。また、``initial-scale``で読み込んだときの表示倍率を設定できます。よく``initial-scale=1``を書いているサンプルがありますが、デフォルトで1倍なので省略してよいと思います。 ## サイト名したい（`title`） ```html サイト名記事のタイトル | サイト名ページのタイトル | サイト名 ``` `title`タグでそのページのタイトルを設定できます。このタイトルはブックマークに保存するときや、ウェブ検索の結果の見出しとしても利用されます。トップページは`サイト名`、記事／ページの場合は「`タイトル | サイト名`」のようにするとよいです。 ## サイト説明したい（``description``） ```html ``` ## OGPしたい ```html ページのタイトル ``` OGP（The Open Graph Protocol）はウェブサイトや記事が、SNSなどシェアされたときに利用されるメタデータです。適切に設定しておくと、シェアされたときにいい感じに表示されます。 OGPが適切に設定できたかどうかは[OGP確認ツール](https://ogp.buta3.net/)などの外部ツールで確認できます。 CMSではプラグインが用意されている場合もあり、自分で書く必要はないかもしれませんが、その構成要素は理解しておくとよいと思います。また、上記のサンプルは必要最低限の要素を抜粋したものです。 [OGPの公式ページ](https://ogp.me/)を読むと、もっと広く表現できるようです。 ## OGP画像したい ```html ``` 画像の設定項目はオプションがあります。 ## Twitter Cardしたい ```html ``` Twitterには[Card](https://developer.twitter.com/ja/docs/tweets/optimize-with-cards/guides/getting-started)という専用のOGPがあります。これも追加で設定しておくとよいでしょう。 ## リダイレクトしたい ```html ``` リダイレクトの設定も``meta``タグに書きます。リダイレクトするのに、そのページを読み込むのはもったいないので、この設定もはじめのほうに書いておくとよいです。