htmlコードをチェックする
【iframeが原因で出るエラー】
とにかく、FacebookやInstagram、GoogleMapを埋め込むと、これに関するエラーや警告がズラズラッと出てくる。
コピペしてるんだからしょうがないじゃない!!…とは思うけど、放置は気になるから修正したい。
まずは、「Use CSS instead.」と忠告してくれてる部分から。
これは<frame>の中に書いてある”scrolling” “frameborder” “overflow” “border” “width” “height”…などを消して、cssで指定します。
<frame class=””>とclassをつけてからね。
Facebookライクボックスなどのiframeが原因でHTML5構文チェックツールでエラーが出るときの対処方法
ただし、”frameborder”はHTML5 では廃止されたため，使えなくなったそうです。
HTML5 & CSS3 リファレンス/属性 x – 枠の表示・非表示を指定(廃止）
また、
"allowfullscreen"
は、
"allow="fullscreen"
に更新されたということで、そのように書き換えます。
MDN Web Docs/<iframe>: インラインフレーム要素
【xmlns属性なるものについて】
まるでチンプンカンプンですが、属性値に必ず「http://www.w3.org/1999/xhtml」を指定しなければならないということだけはわかりました。
埋め込み用コードは「https://」になっていたのですが、しょうがなく「s」だけ消しました。(それでエラー解消した)
【Attribute xmlns is not serializable as XML 1.0.】
これも何のことかさっぱり。コピペしてそのまま検索、何となく<head>の部分に問題がありそうな感じ?
HTML 構文解析エラーAttribute 【名前】 is not serializable as XML 1.0.
<meta>の書き方が悪かったのかなぁ?
調べていく中でOGPなるものに遭遇したので、これも調べてみる。
と、OGPはSNSに対するSEO対策でした。
なんだかとてもややこしいけど、(まだSEO対策まで手が回っていない)大事なところなので無視はできませんね。
prefixなるものを<html>に設定すればいいのか、<head>に設定すべきか。
どうやら、Facebookを主たる設定先にするのなら<html>にするのが良さそう。
OGPの正しい設定方法！Facebook・Twitter対応
本当に、慣れるまでは結構大変かも。
Page 1 2
