OGP補足（イラストレーターで制作した時）

某職業訓練校に、代講で入ったんよ。
Photoshopはこれから習うみたいだったので、イラストレーターでOGPの画像を作ってWeb用に書き出しして使ってもらうことにしました。
が、制作時間が足りなかったので、いつもの先生に、後はお願いします。引き継ぎとして、ここに書いておきます。

OGP（Open Graph Protocol）とは、SNSでシェアされたときの見た目を整える設定のことで、専用の画像を入れておくと、いい感じになる。
（こちらの実例は、修了生さんがお仕事で作成したサイト）

イラストレーターでOGP用の画像を作ったとする。推奨は 1200×630px（比率1.91:1）
両端が切れることがあるので大切な内容は中心にもってきておこう。
出来上がったら、まずは普通に保存。

その後、ファイル → 書き出し → Web用に保存(従来)…

書き出しの時、元画像と見比べて、できるだけ軽くなるように画質を落とす。
基本的に、Webは表示100%で見て、キレイならそれでOK。「保存」

OGPを設定したいサイトの画像フォルダに保存。ファイル名はもちろん、英数半角文字で。
ちなみに今回は「ogp.jpg」というファイル名にしました。

保存されるファイルの中に、ラテン文字以外の文字が含まれています。「OK」

画像が用意できたらHTMLファイルのほうにコードを入れよう。
Xサーバーの「OGPとは？SNSでの役割や設定方法を初心者向けに解説」に詳しく書かれているのだけど、あえて最低限のタグでいくと(笑)　以下の通り。

<meta property="og:title" content="記事(ページ)ごとの個別のタイトル">
<meta property="og:description" content="記事の説明文">
<meta property="og:image" content="画像のURL(絶対パス)">
<meta property="og:url" content="ページのURL(絶対パス)">

意味としては