meta charsetタグは最初の1024バイト以内に出力する必要がある。

• SNSでリンク引用すると表示されるカードなどが文字化けすることもある。
• 実際にページを見ると文字化けはしていない。(Chromeブラウザ、FireFoxブラウザでは問題なし)

調査すると、結論にある通り、「charsetタグはhtmlファイルの最初から1024バイト内に入れてね」というルールがあり、それ以降に配置すると読み込まないケースがある（というか、Chromeはじめ最近のブラウザが賢いおかげでなんとかなってるだけで基本的には読み込まない？）ようです。

対応

<meta charset="UTF-8">は基本的にheadの直下に配置する

ルールを守るだけです。基本的にはそうなってるのでこんなことは早々起きないと思います。
（仕事で作成しているHPでは、Webフォントをなるべく早くダウンロードさせたいという要望があり、深く考えず該当タグより上に要素を配置できるようにしてしまって上記の事象を発生させてしまいました。）

Content-Typeに追加する ★推奨

該当タグは別に必須という訳ではなく、サーバー側の設定でレスポンスのContent-Typeにcharsetを追加していれば不要のタグのようです。

また過去にはこんな事例もあり、レスポンスヘッダーの方がより確実なため指定を推奨します。

が、meta要素の挿入が慣習になってしまったがために書かないことで被るデメリットも存在してしまうようです。
サーバー側にもHTMLファイル側にも同じ設定があるのはもやもやしますが、「とりあえずどっちも書いておく」が一番無難と思われます。 

参考サイト