The other way round

Welcome to my blog

SNSを重視した記事タイトルの付け方注意点

記事タイトルの付け方についてですー (´・ω・`)
以前ちょっとだけ書きましたが
FBやTwitterのシェアリンクというのは ユーザーが付けた記事タイトルがURL内に含まれます
それはもう そういったプロトコルになってますからどうしようもない(笑)
タイトルの付け方によって非常にまずいことになりますのでご説明

結論から

SNS連携を大事にされる方は タイトル中に安易に記号を使わない

htmlの基本形というのは以下のようなカタチです
例えばアンカー(リンク)の開始タグ

<a href="リンク先">


イコールの後ろにちょんちょん が入ってますよね
ダブルクォーテーション というやつですが
この記号に挟まれた内容は非常に重要な意味を持っています
イコールの後ろにダブルクォーテーションがある それ即ち htmlタグ とみなされます

そこで仮にタイトルにダブルクォーテーション記号を使ってしまうとですね
その記号はURLとして組み込まれますので
htmlで重要な意味を成す構文として解釈されてしまいます

こういうの イコールの前をattribute(あとりびゅーと 要素名)
ダブルクォーテーションの中身をvalue(ばりゅー 値)と言います
タイトルが

"本日のおすすめ"

だとしますとURLはこうなります(例 Facebook)

http://www.facebook.com/sharer.php?u=該当ブログページアドレス.html&amp;t="本日のおすすめ"


おわかりでしょうか
記号に囲まれた部分付近 見た目がまんま htmlタグと同じ形 になってますよね
ですが実際はイコール前は要素名ではありませんし
ダブルクォーテーション内も値ではなく単なるURLに含まれるタイトルです

これはシンタックスエラー(構造エラー)ですから
後続の要素全てに影響する可能性があります

後続要素って何か = テンプレート内容全て
テンプレートになにかしらの影響を及ぼしてしまうことがある ってことですね (´・ω・`)

ダブルクォーテーションだけでなく

● 半角スペース
● &

これもまずいです
じゃあどうするかなんですけれども
こういうときは 文字エンティティ というのを利用します
いわゆる エスケープ文字 というやつね
以下のページを参考に

HTML特殊文字

表中に 文字表記 というのがありますよね
これに置き換えます
タイトルを書くときにですよ
こうしておくと安全

&quot;本日のおすすめ&quot;


こうやって書く
めんどくさいけども!(笑)

テンプレートが崩れてしまう というのはよっぽど起こりませんが
一番困ったケースは ダブルクォーテーションが 奇数
一個だけとか 三個とか
これもう最悪なパターン (´・ω・`)

なんかしらんがテンプレ崩れとる!!!
なんでかシェアができん!!!
な時はもしかしたらそれが一因になっている... かもしれません
基本的にタイトルへの記号の乱用というのは避けた方が良いですね (´・ω・`)
いろんな場面で抽出が行われます
FC2変数であったり SNSシェアであったり あれこれなにがし

SNSシェア使いません(テンプレ内のものも FC2個人設定でのボタン表示でも)
な方はまあ一応... セーフというか...
でもあんま良くないemoji

記事タイトルをつけた際に
これ特殊文字かもしれないな... (半角スペースや記号があるなど)
と思われましたら
以下のサイトさんを利用するのも良い方法だと思います

HTML特殊文字変換ツール
TECH-UNLIMiTED 様

エスケープできる文字を一発変換してくれるので重宝します
関連記事

Comments 4

momo  
ありがとうございます。

Akiraさんのブログは勉強になるのでいつも拝見しています。
テンプレートは最新のQuietを使わせていただいています^^
バリデーターでエラーが出るのはどうしてだろうと頭を悩ませており、機会があれば図々しくも教えを乞おうと思っていたところ、記事のとおりに修正をかけたら解消されました!
30近くあったエラーが全部消えたのにはびっくりです。
このエラーが全部のエラーを次々呼んでいたということでしょうね?
すっきりしました〜。お礼を言わせてください^^
もう一つ教えてください。
<img>のaltのエラーを解消する方法ってありますか?
ジャバでできるみたいなのを読んだことがありますが知識不足で。。
お時間のあるときに記事にしてもらえたらなぁなんて図々しく思っています。

2016/04/12 (Tue) 21:03 | EDIT | REPLY |   
Akira  
To momoさん

一つエラーが出ると整合性を探して辻褄が合うまで延々とエラーになります (´・ω・`)
レイアウトに影響する場合とそうでない場合とありますが、いずれにしろ良くはないです(笑)

<img>のalt属性抜けについては、現状のFC2仕様ではどうしようもできないんです。
JSで後付してやることはできますが、それだとバリデート時にクリアできません。
最初からきちんと書いてある必要があります。
html5では無理にaltの値を設定する必要は無いので、
alt=""
これでもOKなんですけどね。
FC2さんお願いします(笑)

2016/04/13 (Wed) 12:03 | EDIT | REPLY |   
momo  
やっぱりそうですか。

FC2に任せるしかなさそうですね(ーー;)
お忙しいところこたえて頂きありがとうございました!
Quietがとても気に入っているのですぐは変えないけど新しい(申請中?)テンプレートもDL確定です!
楽しみにしてますね♪

2016/04/14 (Thu) 06:57 | EDIT | REPLY |   
Akira  
To momoさん

なんかエディターが新しくなってる (´・ω・`)
それでもしかして... と淡い期待で確認しましたが、何も変わってねーでやんのー ヽ(^o^)丿
リクエストにも挙がってますし、早期対応して頂きたいものですね (´・ω・`)

2016/04/14 (Thu) 08:33 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
About this site
新テンプレ動作確認中。ご迷惑おかけします。
About me
テンプレのご質問の際には
カテゴリ > 利用上のお願い > FC2テンプレートご利用時のお願い
をご一読されましてからお願いします ( ゚Д゚)ノ
* メールでの返信をしておりません
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *