2020年版 見直すサイトコーディング 第２回 ヘッダー周り

2020年時点のウェブデザイン制作を記事としてまとめていますが、前回と同様に続いて作業をおこないます。今回はSNS連携辺りでウェブ制作の現場を離れた人やこれからウェブサイト保守ができる人向けの記事、あ、これから学び直そうって人もどうぞ。

重複しますが……身も蓋もない話ですが、弊社はインフラがメインですので、MDNやウェブ制作を専門にやってる方の記事を見ていただくのがベストです。

2020年版 見直すサイトコーディング 第１回 環境とブレークポイントを見直す

今回はヘッダー周りの見直す。

見直しはいいから、サクッと使えるテンプレート探してんだ！って人はこちらのコードをお使いくださいませ。

それ以外のひとは今から始まる説明をどうぞ。ちなみに以前のHTMLは本当に簡単でした。例で書くとすごいあっさりしてました。

しかし、現在のMDN等が推奨するヘッダー情報は追記が多くなりました。現在多くあるヘッダーの一部を記載すると…

とてもmetaが増えてます。めんどくさい値も当然上がります。

OGPの設定とは

ついつい昔からサイト作成していると「OGP」の設定を忘れる事が多いものです。結論から書くと、OGPの設定とはSNS上でシェアするときに利用されるmetaタグです。

「Open Graph Protocol」の略で、TwitterやFacebookなどのSNSでwebページがシェアされた時、ページのタイトル、URL、概要、画像を表示させる仕組みになります。主に以下が必要になります。

og:title　：ページのタイトルを記述します。
og:type　：ページのタイプを記述します。トップページはwebsiteかblog、下層ページはarticl。
og:description：ページの説明として表示されます。
og:url：ページのURL。絶対パス。
og:site_name　：サイト名。
og:image：　シェアされた場合に表示される画像　指定しないとページ内の画像を適当に選ばれます。

最初から入れておこう

Dreamweaverで新規作成からファイルを作成すると、自動的にいくつかのタグが追加されます。公式ページ的にはスターターレイアウトというらしいですが、
いちいちこのヘッダーのメタやらを追加するの手間ですので、最初からテンプレートに入れおきましょう。
またデフォルトのスターターレイアウトのHTML5を書き換える方法と、使い回しのテンプレートを追加する方法があります。
注意点として少し前はデフォルトのページを書き換えていたのですが、CCになってからバージョンアップに対応できなくなる点と、サイト内ではテンプレートに追加して利用があります。
ちなみに多少勘違いしますが、Dreamweaverではテンプレートというと、そのサイト内で編集範囲を決めて使い回せる基本ページということになります。
…ちなみにデフォルトは、
【追記】
旧Dreamweaverではonfiguration\DocumentTypes\NewDocuments内のDefault.htmlで初期ドキュメントを触れたようですが、試したDreamweaver 2020 は私の環境でうまく動作しないのでいずれ調査して記載致します、バージョン上がったら変わると思いますが……
テンプレートについては別途記事を予定しております。

となっていますので、ひとまず上記の流れで用意してみます。

2020年9月29日現在、Dreamwever 2020 Windows版の場所はC:\Program Files\Adobe\Adobe Dreamweaver 2020\にありますので、【追記に記載】

最後に

業務でのサイト構築はAdobeのDreamweaverを使う事を基本ｔｐしていますが、この辺の効率化は必須になります。
テキストエディタで何か保存しておいて貼り付けるというのもいいですが、最新のDreamweaver内で効率化が必要かな？と見直してみて思いましたよ。

次回、これに関連して効率化という点でショートカット周りを記載してみます。