2019/02/20AMPページでCDN経由でFont-Awesomeを読み込むときはホワイトリストに気を付けて!WEB目次Googleの検索結果からAMPページが消えたAMPページでFont-Awesomeのウェブフォントを使うことができるということで、埋め込んでみたところ、テストページではアイコンが正常に表示されたので、公開ページに適用したところ、数日後にGoogleの検索結果からAMPマークが表示されなくなりました。Consoleを久々に開いてみたところ、AMPページに問題があるというエラーの通知がありました。「Google検索結果には表示されません」と、無効なAMPページとされていました。原因はCDNAMPページでFont-Awesomeを使うために、以下のようなコードでCDN経由のCSSを読み込んでいました。これがいけなかったみたいです。href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/css/all.min.css">これの何がいけないかというと、cdn.jsdelivr.netから読み込んでいるということ。本家のuse.fontawesome.comよりもcdn.jsdelivr.netから読み込む方が速いかな?と思って使ったのがいけなかったみたいです。PC用のページはこれで読み込んでいますが、AMPページではこれが警告の原因となり、Googleの検索結果にAMPマークが表示されなくなりました。使えるCDNと使えないCDNがある以下のページを見ると、<link>タグでFont-Awesomeを読み込む場合はAMPプロジェクトのホワイトリストに登録されたCDNでないと使えないみたいです。https://www.ampproject.org/ja/docs/design/responsive/custom_fontsスタイルシートで@font-faceを使えば特に読込先に制限なくWEBフォントを読み込むことができるみたいです。<link>タグで読込可能なCDN以下のいずれかのCDNからの読み込みであれば<link>タグで読み込んでもエラーが出ずに使えるようです。以下のページにあるFont-AwesomeのCDNのコードから読込をすることで無事解決できました。Consoleで再検査したところ有効なAMPページになりました。(30)このサイトについてパソコンのことをいろいろメモしています。InsightsQwerty.Workについてこのブログは個人が運営しているサイトです。Qwerty.Work。