ブログは楽しい

このページの記事目次 (カテゴリー: ブログは楽しい

← 前のページ  total 26 pages  次のページ →  

執筆ガイドライン8、直リンク・ディープリンクはマナー違反らしい

直リンク、ディープリンクを知らなかった…


関連記事、「執筆ガイドライン5、アンカーテキストの中身に注目」を書いた際に、アンカーテキストの作りが初めてわかったような気がして、楽しかったんですね~。


サイトの評価は被リンクの数も影響するっていうじゃないですか?
職場では、被リンクの数が多いとサイトの信頼度、被リンクからのアクセスが多いと有用度が高いと信じて、沢山リンクを貼ってもらえる質の高いコンテンツを作りましょう~!、的な雰囲気な気がします。


ところが、img系の画像は、直リンクディープリンクなどと呼ばれて、マナー違反とされているようです。
そりゃ~もう。がっつり混乱いたしました!


いくつの記事を読み漁った感じでは、imgファイルは、googlebot(以下、ロボ子)には内容がよくわからず評価しがたい(SEO評価につながらない??)。被リンクを受けた際のサーバー負荷を考えると、どちらかと言うと迷惑。だから、マナー違反。
であると、理解いたしました。


いろいろあって、大変よね…



引用と転載は、大きく違うらしい


直リンクについて調べていく中で、直リンクは転載だからダメ!というような記述を見かけました。
え?
何のこと??


一旦、自分のサーバーにダウンロードして引用するのはOKとも書いていました。
おぉ!
違うの??


ウィキペディアの転載引用のページをそれぞれ読んでみました。


これまでは、違いをはっきり認知していたわけではありません。それでも他のブログで画像を直リンクをしている例を殆ど見かけなかったので、なんとなく慣習的に引用元データダウンロード→FC2へアップロード→引用元記載の流れをとっておりました。


関連記事、「イギリスと言えば、「王家」」を書いた際に、ウィキペディアコモンズのShare or Embed機能を使って9つのファイルを自ブログに埋め込んだのですが、これもディープリンクなのでマナー違反と言うことになるのかな??


embed機能があるのだからいいんじゃないか??、とは思いつつ、貼り直しました。



当ブログでの執筆ガイドライン


引用元は明記し、自ブログサーバー(FC2)へダウンロードし、外部への画像直接リンクは貼らない。

執筆ガイドライン7、画像にはわかりやすいファイル名をつける

偶然知ったことなのですが、Googlebotには、私がロボ子と呼んで親しみを醸成しようとしているgooglebotのほかに、画像を専門に巡回しているGooglebot-Imageが存在するようです。

ウェブマスターツールのおススメ


ウェブマスターツール、画像検索についての A to Zより引用:
画像をインデックスに登録しやすくするために、下記の点を守ってください。

  • 画像が埋め込まれている HTML ページと画像そのもの、どちらも Google がクロールできるようにしておくこと
  • Google が対応している形式の画像であること(BMP、GIF、JPEG、PNG、WebP、SVG)

さらに、下記のようにしておくこともおすすめします。

  • 画像のファイル名が画像の内容に関連した名前になっている
  • 画像の alt 属性が、人間が読んで分かるような画像説明になっている
  • 加えて、HTML ページのテキスト コンテンツと画像近辺のテキストを、画像に関連した内容にしておくことも有効です。


へぇ~



FC2での画像ファイル名の変更


私の大好きなサーチコンソールがHTML の改善を提案してくるページは、ほぼ毎回、画像です。でも「img/20161126102837b1b.jpeg」と言われてもパッとは分からないんですよね~。
画像が表示されますから、あぁ~これね!っとなるわけですが、もっとわかりやすい状態で表示してくれないかな~。なんて思っていたのです。


でも、わかりにくいのは、実は私が手抜きしてファイル名を更新していなかったからでした。
あはは。


写真ファイル名1
↑のファイル名を変更ボタンを押すと…


写真ファイル名2
↑の様に画像ファイル名を変更できるみたいです。
これで、ロボ子がアクセスできなかったために画像が見えなかったとしても、だいたい推測で当該画像を特定できます。
おぉ~


FC2のプラットホームは、非常にユーザーフレンドリーなので、ウェブの知識がなくても簡単にコンテンツを作成できちゃいます。こういう細かいことを知らなくてもサクサク書けるという偉大な長所の裏側に、無知で居続けられるというちょっとした問題点が…
(ん?、みえない、みえない。笑。)



当ブログでの執筆ガイドライン


番号のままだとエラー修正の際に自分が困るから、面倒でも画像のファイル名は変えるようにしましょう!

執筆ガイドライン6、テーブルタグを止めてdl、dt、ddタグを使う

これまで、下記のような見た目のページを作る時、エクセルのテーブルをぺたっと貼っていました。コードが読みにくくて仕方がないので、何か簡潔化する方法がないかと探していたところ、定義リストもしくは説明付きリストと呼ばれるタグの存在を発見いたしました。
dl-dt-ddサンプル


我ながら大変無知でお恥ずかしいのですが、この1年半エクセルテーブルのコピペで、人間が理解できればよし!と思っておりました。定義リスト(説明付きリスト)にするとGooglebot(以下、ロボ子)にとっても意味があるリストになるそうです。


<dt></dt>で囲まれた言葉を、後続の<dd>で説明するそうです。1つの<dl>に対して複数の説明<dd>を持つこともできるそうです。ふむふむ。



当ブログでの定義リスト


class付きのHTML、CSSはどれもうまく行かなかった…


今だにCSSの書き方がよくわかっていない為か、class付きの.yokonarabi dl {などのクラス付きのCSSとHTMLはどれも全く上手くいきませんでした。class付きの記述がうまく行けば、映画用、ゲーム用などと、定義リストの見た目を内容ごとに変えることができて楽しいかなと思ったのですが断念いたしました。


横並びにしたかったので、それが達成できたのが今回の収穫です。



HTMLは普通に書く


<dl>
<dt>言葉1</dt>
 <dd>説明1</dd>
<dt>言葉2</dt>
 <dd>説明2</dd>
<dt>言葉3</dt>
   <dd>説明3</dd>
</dl>


普通です。



CSSにはheightを追記したらちゃんと並んだ


.entry_m dt {
padding-top : 0.2em;
padding-bottom : 0.2em;
padding-left : 0.2em;
width : 10em;
height:1;
float : left;
clear : left;
}
.entry_m dd {
padding-top : 0.2em;
padding-left : 0.2em;
padding-right : 0.2em;
padding-bottom : 0.2em;
width : 40em;
height:1;
margin-left : 1em;
}


本当に理解に苦しむのですが、Bloggerにはサクッと入るコードが、FC2では言葉(=dt)説明(=dd)の高さが少しずつずれる、もしくはCSSが認知されないなどの怪奇現象が起きました。ようやく有効に見えるコードが下記の通りで、他のコードとの違いはよく分かりません。敢えて言うならheightを追加したことかな??なんて勘ぐっているのですが、結果オーライで検証終了しました。


他のことをしている時にふと理解できるようになったりするといいな~。なんて、運を天に任せております。



当ブログでの執筆ガイドライン


項目名と説明文のような形式をとる場合には、dl、dt、ddタグを使い、ロボ子にも構成情報を共有する。

執筆ガイドライン5、アンカーテキストの中身に注目

アンカーテキスト面倒くさい


お、思わず本音が…
じゅ、重要らしいですよ。SEOに!
これまであまり深く考えたことがありませんでしたが、アンカーテキストって中にていろいろ指示出しできちゃうんですね。



rel=nofollow


グーグルボット(以下、ロボ子)にリンクの先を追跡しないように指示出しする為のモノらしいです。


参照資料、外部リンク、サーチコンソールのヘルプ
特定のリンクに対して rel="nofollow" を使用する


nofollow属性は、ある程度限られたリンク先に使用することを意図されているみたいですね。信頼できないコンテンツ、有料リンクに関しては、そもそもそういうものを引用しないようにしたいものです。
クロールの優先順位については、当ブログでいうところの記事一覧やタグ一覧などの一覧系の独自コンテンツを持たないページへのリンクにはつけておいた方がいいかもしれません。ロボ子は、「内容が薄かったぞ!」みたいな感じで、嫌うみたいですから。



target=_blank


リンク先を表示するにあたって、新しいタブを開くか、同じページのまま移動するか?をコントロールしている属性です。
target=_blankかどうかなんて、ロボ子、興味なし!という話なので、後はどっちを好む人が多いかの問題みたいです。


意外だったのは、新しいタブを開かれるのが嫌な人が結構いるらしいということです。結構って、どのくらいの割合なんだろう。新しいタブにするかどうかは自分で決めたいらしいです。
私は個人的には新しいタブを開いてくれる方が好きです。前のページに戻ると読み直しが発生したりします。前のタブに戻る方が読み直し頻度が低いからです。中国やインドのような通信速度にストレスを抱える地域に住んでいると、リンクを開くときに右クリック(もしくは長押し)で「新しいタブで開く」を選択する習慣ができます。弱者の味方を気取って、当ブログでは、常に新しいタブを開く、target=_blank派を通していきます!あしからず。



id="#"


ページ内の指定の場所にリンクしたい場合の話、便利ですね。恥ずかしながら、過去記事は長文・脱線が多いので、ページに対してリンクを張っているだけでは、アンフレンドリーだったりします。「ロボ子よ、ここに書いておるぞよ!」とお伝えしたいときに、必要に応じてidをつけていくのはアリかもしれません。


記事内に内部リンク付きの目次を作っていらっしゃる方なんて、なんかプロブロガーな雰囲気でてるな~っと圧倒されます。
勇気を出して言っちゃうと、私の記事は暇つぶし&流し読みで寛いでもらう系を目指しているので、目次をみてジャンプしたくなるほどのボリュームにはしないように心掛けています。(←努力目標)


idでのリーディング支援より、どちらかと言うとスキムリーディングを支援する感じでハイライトを目で追うだけで、さっと内容がわかり、読みたければ詳しく読めるような書き方に挑戦中です。(ライティング手法名、思い出せませんが…)



title=" "


アンカーテキストのtitleって、存在すればホバーした時に吹き出し説明をポップアップしてくれるアレです。FC2はファイル挿入ボタンやリンクボタンで作成したリンクは全てtitleやaltを書いてくれるので便利ですね。テンプレートの中に自分で手書きしたアンカーテキストには入れ忘れていることが多いので、ボチボチ修正したいなと思っています。


理想的には、titleとリンク名の使い分けができるようになるといいなと思っています。んが、面倒くさいです。



external linksアイコン


外部リンク;日本銀行(←この外部リンクの文字の後ろについているシンボルマークです)



外部リンクアイコンCSS


a.exlink {
    background: url("http://blog-imgs-102.fc2.com/l/a/g/laggy2015/exlink.png") no-repeat right 0;
    padding-right: 10px;
}

画像はwikipediaを参考に作りました。普通にFC2のファイルアップロードを行い、CSSにて表示させています。
外部リンクか、内部リンクかを自動判定させるほどのこともないので、そこまではやっていません。


HTMLを書くとき、すなわちFC2のURLボタンにアンカーテキストを書いてもらった後、
<a href="http://www.boj.or.jp/" target="_blank" class="exlink" title="日本銀行">日本銀行</a>
手差しでclass="exlink"を追記することにしました。


CSSについてはこれまであまり取り組んでこなかったのですが、いい機会なので作ってみました。
classの書き方がわかったのが非常に大きかったです。



当ブログでの執筆ガイドライン


いろいろあるから、急に全部はムリだろうけれど、少しずつ習慣づけるのもいいんじゃない?


執筆ガイドライン4、強調、弱い強調、装飾、マークを使い分ける

強調には4種類ある


強調の表現方法には、強調タグ<strong></strong>、弱い強調タグ<em></em>、装飾タグ<b></b>、マークタグ<mark></mark>の4種類があるようです。


このうちグーグル先生のところのグーグルボット(以下、ロボ子)が重要ワードとして理解するのはstrongタグとemタグで、bタグは人間用のみため強調、markタグは検索用語をハイライトしたりして検索した用語をわかりやすくしたりするのに使われるみたいです。ただ、strongタグの多用は、ロボ子が混乱するので、避けた方がよいと書いていました。


しらなかった~。


FC2だと本文編集メニューに太字にしたいときのBボタンがあります。それはタグ的にはstrongタグなので、太字にしまくっていたら、ロボ子がイラッとしてしまうかもしれませんね。くわばら、くわばら。



当ブログの強調CSS


私がBボタンをあまり使わないのは単に太字が嫌いだからです。ハイライトの方が好きです。このため今回CSSを書き直してすべてハイライトにしたのですが、strongとbは指定しなくても勝手にboldになってしまうことがわかりました。(いまさら…)そのうちboldの解除の仕方を調べてみようと思っていますが、当面は下記の通り進めます。



強調タグ<strong></strong>
strong {
background: linear-gradient(transparent 60%, #ffadad 0%);
}

赤みが強いハイライトとデフォルトでくっついてくる太字です。
あまり使ったことがないタグですが、一つの記事に重要なものが何もないのもさびしいかな?っと思えてきました。一つぐらい重要な言葉が入った記事が書けるようになりたいものです。



弱い強調タグ<em></em>
em {
background: linear-gradient(transparent 60%, #ffc256 0%);
font-weight: bold;
}

実は、先に決まったピンクのstrongとゴールドのbのタグを混ぜて、中間色としてできた色です。橙色と呼ぶことにしています。



装飾<b></b>
.entry_m b {
background: linear-gradient(transparent 60%, #ffd700 0%);
}

これまで強調が嫌い&ハイライトの仕方がわからなかったので、よく「」を使っていました。これからは、スムーズに読めるように実際の発言以外は全て装飾に置き換えていこうと思っています。
※装飾タグはテンプレートの中でも使われているので、このタグは記事本文の限定指定です。



マーク<mark></mark>
mark {
background: #ffff00;
font-weight: bold;
}

他のタグはlinear-gradientを使用してアンダーライン風なハイライトなのですが、マークタグは検索語をハイライトする時の一般的な色と一般的な様式に合わせて置きました。でも、もしかしたらCSSを作らなくてもFC2のデフォルトが効いている??


自分で記事を書くときに使うものではありませんが、現在のブログ内検索の仕組みを書き換える時に使うかもしれません。



当ブログでの執筆ガイドライン


強調表現は、使い分けましょう!
(というか、一つの記事に一個ぐらい重要語句を入れるようにした方がいいんじゃない?)