お馴染みの啓蒙・注意喚起記事でございます (´・ω・｀)
何度も同じ内容をUPしていますので既読の方はスルーで(笑)
最大注意は全角スペースの使用
お引越しでFC2の新会員になった方もいらっしゃいますので再々々々…掲。
html構文内での全角利用は即エラーです。
<img src="画像URL" alt="">
属性間スペースが全角
<img src="画像URL" alt="">
<ul> <li>リスト1 <li>リスト2 </ul>
インデントが全角スペース(2つ目のリストアイテム)
<ul> <li>リスト1 <li>リスト2 </ul>
リストアイテムのインデントに全角スペースというのは非常によくみかけます。特に ナビゲーションリンクの追加 時に起こります。今このページ上のサンプルコードは半角と全角の見分けをつけやすいんですが、ブラウザ上でカスタマイズをする際には全角・半角スペースの区別がつきにくい です。フォントが monospace という 等幅フォント だからです。以下は等幅フォントのソースの見た目です。
一見しただけでは見分けつかないですよね。
* ごめんなさい。スクショに「全角スペース2つ」とあるんですが実際は「1つ」の間違いです。「半角スペース2つ」と「全角スペース1つ」の見た目がほぼ同じ、という点を説明しています。
head要素のカスタマイズは細心最大の注意を
テンプレートのhead要素内にはドキュメント(文書)の構成やSEOの根幹に関わる重要な内容が記載されています。
head要素というのはテンプレートの上方にある <head> から </head> までの内容を指します。
htmlに明るくない方はできるだけ触らないようにして頂きたいんですが、どうしてもカスタマイズの必要が生じる場合も。
- Google Search console登録の認証コード
- Google Analytics(アクセス解析)コード
- Twitterカード
大体はこのぐらいかなぁ、と思います。FC2のアクセス解析 はhead要素内に入れる必要はありません。<body> の直後でOKです。
head情報に何かを追加する際は細心の注意を
head element (へっど えれめんと) 日本ではしばしば ヘッダ情報 という呼称が使われます。 htmlの中のこの部位はページを構成する基本的な文書の種類ですとか、htmlをきちんとhtmlとして正しく伝えるための情報を記しますのでとても重要です。 一般的にヘッダ情報内の要素は「目に見えるもの」「可視化されるもの」ではありませんので、人間のためというよりもむしろコンピュータのためのものとも言えるかと思います。 が...
上記記事にも書いてるんですが、head内にクリティカルなエラー(致命的エラー)が有った場合、Googleはhead内容の解釈を破棄してしまいます。ですから記されている重要な「URLの正規化」や「重複コンテンツ回避」など機能を失ってしまいます。つまりGoogleに正しい情報が伝わりません。当然インデックスやサイトランクにも影響してくるでしょう。そして致命的なエラーとはFC2では多くの場合 全角スペースの利用 です。日本人だからしゃーない。
Twitterカードの記載をサンプルにしてみます。
FC2でOGPを利用したTweetの設定【Twitterカード】
SNSシェアに欠かせないOGP(おーぷん ぐらふ ぷろとこる) を含めたFC2でのシェアの仕方についてです。 SNS共通の設定がOGPと呼ばれるものです。 一体なんぞ？ というのは通常の単純なシェアというのは見た目がとっても寂しい物です。 URLだけポーン みたいな (´・ω・｀) OGPを正しく設定していると表示がリッチになります。...
<meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@Twitter ID">
必須メタ要素は上記2つです。記載位置は <head> の 直前 で構いません。というかhead要素内に何かを追加する際にはhead終了タグ直前をおすすめします。構文エラーの拡大範囲を少しでも減らすためです。
<meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@Twitter ID"> </head>
headの外(head開始タグよりも前やhead終了タグより後)に記さない
</head>
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Twitter ID">
html5ではclosing slash不要
<meta name="twitter:card" content="summary /"> <meta name="twitter:site" content="@Twitter ID /"> </head>
closing slash(閉じスラッシュ)であってtrailing slash(末尾スラッシュ)ではありません。念の為。trailing slashというのはURLの末尾に付いているものを指します。
html5テンプレートの場合はclosing slashは不要です。必要なのはxhtmlです。htmlはxhtmlではありません。各社の某かのコードを取得した際にclosing slashがくっついているのは、html5でclosing slash「あり」は構文エラーではありませんが、xhtmlでclosing slash「なし」は構文エラーだからです。自身で何かを追加する際、それがhtml5だとわかっている場合は不要です。head内のmeta要素の書き方は揃えるようにしてください。私が製作しているテンプレートは全てhtml5です。
インデントが全角
<meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@Twitter ID"> </head>
要素の後ろに全角スペース
<meta name="twitter:card" content="summary"> ↩ <meta name="twitter:site" content="@Twitter ID">↩ </head>
改行位置がわかるように ↩ マークを入れました。
これも非常に多いんですが、要素の「後ろ」に全角スペースが有るケース。半角スペースならギリセーフですが本来要素の後ろにはスペースは入れません。上記サンプルコードでは summary の方のmeta要素の後ろに全角スペースがあります。これは クリティカルエラー です。
自分が対象者かどうかのヒント
まず以下のリンクをドラッグ&ドロップでブラウザのブックマークバーに登録し、自身のページを開いた状態ででクリック(トップページでの検証をおすすめ)
検証結果がポップアップ表示されます。エラーの指摘の中に
errorAttribute xxx not allowed on element meta at this point.
という文言が出てきたらまず間違いなく head情報が壊れています。
まとめ
テンプレートの「背景画像を変える」「フォントのサイズを変える」などはどんどん行って良いとして。head要素内を触る時には細心の注意を払うようにしてください。でないと 全てが台無しになってしまいます よ。最後に役に立ちそうなツール情報記事を掲載しておきます。
ブログ作成に役立つブックマークレット
FC2ブログで記事を書く際に 役立つかもしれない、という条件付きです。 特に 旧投稿画面を利用し、htmlを使うことが多い 方向けです。 他の方が製作したものについてはここでの二次配布は致しません。ご紹介するだけです。 リンクを掲載しますので直接赴き、提供者様の規約・ルールに則ってご利用ください。...
テンプレートカスタマイズをよく行うFC2ブロガーにSublime Text3をおすすめします
テンプレートのカスタマイズをよくしている、という方に 「HTMLエディター」 をおすすめしたいと思います。「テキストエディター」という呼び方もされます。 なんとなく上級者向けなイメージがあるかもしれませんが、寧ろ初心者の方ほど積極的に使って欲しい と思います。...
ナビゲーションにリンクを追加した後の見た目がおかしくなる方へ
こちらweb一般ではなく私のテンプレート限定の内容です。 リンクを追加しただけなのに… 隣のリンクとの距離がおかしい または ナビゲーションの縦幅が大きくなっちゃった などなど。 その原因・対処・事情についてご説明します。...
htmlの絶対的NGそれは「全角の利用」
やっぱりすごく多いんですね。うっかり全角を利用して全てが台無しになっている というケース。 母国語が日本語の場合は普段からキーボードが「ひらがな」の状態になっているのではないかと思います。 htmlを操作する際にはまず最初に「半角英数字」にキーボードを変換する ことを癖づけされると良いと思います。...
There are no comments yet.