2019/04/27

別ブログへ記事コピーしたのでcanonicalタグとは何か調べてみました

今回はcanonicalタグについて書いてみます。

なぜ、canonicalタグかというと、一部の記事を別のブログに持っていくことにしました。対象の記事は数日はこちらのブログにも記事を残したいと思ったためです。では、canonicalタグはどういうものかを次の章から記載します。

※最終的にFC2ブログで、記事毎にcanonicalタグを記載できないとの結論に達しましたが、せっかく調べたので記載します。

canonicalタグどんなもの?

canonicalタグは、異なるURLで内容が同じ記事が複数ある場合、「優先するURLを通知する」するもので、「URLを正規化するもの」らしいです。正直これを聞いてもわからないと思います。

もう少しわかりやすくすると、ある記事をコピーして複数のブログに配置したとします。GoogleなどでWEB検索をした際、検索結果にコピーした同じ内容の記事がいっぱい並んでも困りますよね。なので、この記事はこのURLのコピー品(代替品)なので検索結果に出さなくていいですよと明記したものです。この明記する方法(タグ)がcanonicalタグです。

でも単純に考えれば、記事を作った人は同じ内容でも、検索結果にいっぱい表示されたほうが人の目につきいいと思いますよね。ですが、実際にはそうとも言えません。※次の章に書きます。

コピー記事にcanonicalタグがないとどうなる?

結果からいうと、GoogleなどのWEB検索の結果の一覧に、コピーした記事がそもそも表示されなくなったり、サイト全体の評価が下がり、コピーしていない記事も含めて、検索結果の表示順がかなり下がったりします。なので、Google検索をする人達にサイトを見てもらえなくなります。

GoogleなどのWEB検索業者では検索結果にコピー記事がいっぱい並ぶことを嫌がります。なぜならGoogleなどのWEB検索業者を使いやすくし、より良いサービスにしたいためです。 例えば、情報を知りたくて検索した人が、この記事は必要な情報がなかったと思い検索結果に戻っても、同じコピー記事が並んでいたら、そのWeb検索の検索結果は使えないと思いますよね。結果、その人は別のWEB検索を使うようになります。 なので、GoogleなどのWEB検索業者としては、コピーされた記事は不要なのです。 そして、そもそもコピー記事を配置しているサイトは良くないサイトというのもあり、サイト全体の評価を下げて検索結果の表示順位を下げたりするペナルティを与えているようです。 せっかく書いた記事がgoogleやyahooなどで検索されないと、ブログを見てもらえる機会が減ってショックですよね。

canonicalタグはどう書くの?

html内のheadタグ内に下記のような行を追加します。今回は、移動先のブログを残していきたいので、移動先のブログのURLを書くことにしました。

<link rel="canonical" href="検索結果に出したい記事のURL"/>

実際に追加してみた際のHTMLソースです。※もともとこのブログ内に記載していた私の記事で試したものです。 canonical

FC2ブログで記事単位のcanonicalタグは設定できるの?

やめたほうがよいとの結論に。。

通常のブログでは、html内のheadタグ内は、記事本文からは変更できません。通常テンプレートに記載されています。また、FC2ブログではテンプレートを編集はできるのですが、記事毎に移動先のブログのURLを設定することはできません。

その為、今回はJavaScriptを使って、画面表示後にcanonicalタグを設定するようにしてみました。が、結果としてJavaScriptでタグの設定自体はうまくいきましたが、Googleはサポートしていないようで、うまくいきませんでした。

※同じブログ内で、PCとスマホのURLが違う場合のcanonicalタグの設定は他のサイトで公開されていたので、同じブログ内であれば可能のようです。

※一旦、最大手のGoogleで確認しました。実際には正しく認識することもあるようですが、JavaScriptで変更するのは想定外とのことなのでうまくいったとしても、いつダメになるかわかりません。また、別の記事で試したところ、うまくいったものもあり、原因がわからないため、JavaScriptではやらないほうが安全です。

検証した内容

JavaScriptでhead内にcanonicalタグを追加するコードを書いたのち下記を確認しました。

  • ブラウザの開発者ツールでcanonicalタグが正しく追加されていることを確認。こちらはうまくいきました。
  • Google Search Consoleの「公開URLテスト」を実施。「ユーザーが指定した正規 URL」は「なし」のまま、「テスト済みのページ」でHTMLのソースを見るとcanonicalタグが反映されていませんでした。
  • 後日、Google Search Consoleの「クロール済みのページを表示」で確認しましたが、ある記事ではcanonicalが表示され、ある記事では表示されていませんでした。また、「クロール済みのページを表示」でcanonicalが表示されている記事でも、「ユーザーが指定した正規 URL」で正しく設定されている記事や、「なし」と表示されており、正しく設定されていな記事もありました。

今回、canonicalタグについては勉強になったのですが、無料ブログサービスなど、記事の内容しか変更できないブログサービスでは、canonicalタグは設定できないことがわかりました。ちょっと残念でした。レンタルサーバでWordpressや、MovableTypeを使用すようにすると、いろいろ自分の好きなようにできるのだろうなぁと思いました。
2019/04/16

FC2ブログの有料会員になって独自ドメインを取得。リダイレクトのされ方など記載しています。

fc2ブログの有料会員になってみました。有料会員でできることや、独自ドメインにしてみたので、気になっていた切り替え時の挙動(リダイレクトや、SSL)などを書いてみます。

なぜ有料会員になったの?

  • 少し独自ドメインにあこがれがあった(笑)
    →自分のドメインというのは、会社のページを持っているみたいで少し優越感があります。あんまり意味ないですが。。
    ちなみに、1年後からは独自ドメインは費用が掛かるのでどうするかは、その時に考えます。※これも気になる点がありますので、下に記載します。
  • 月々300円程度なら遊びで使える。
    →300円も。という人がいるかもしれませんが、1日10円と思えば。嫌になったら簡単にやめられるしなぁ。と思いました。
  • FTPでファイル(HTMLなど)がアップできる。
    →これがちょっとほしい機能でした。詳細はのちに書きます。
  • スマホの広告や、下部のFC2内のランキングを消すことができる。
    →これもいいなぁ。と思いました。自分に関係のない広告が表示されて見にくくなったり、自分のサイトなのに、勝手にFC2ブログのランキングが表示されても見てくれる人がなんなのか分からないだろうなぁ。と思っていました。

他に有料会員でできること

私はあんまり魅力に感じなかったですが、有料会員になるとできることです。

  • アップロードファイルが5MBまでできる。
    →あんまり大きなファイルをアップする機会がなさそうです。。。
  • ファイルのアップロードの容量が無制限で保存できる。
    →無料会員の10GBも使い切る自身がないです。。。
    ちなみに、FTPのアップロードファイルの最大は500MBまでだそうです。これも使い切ることはないだろうなぁ(^^;)
  • 一日の投稿記事最大数が100件になる。
    →一日で100件も記事を書くことは不可能だと思われます(笑)
  • 404ページが自分で変更できる。
    →記事を削除とかしないと404ページ(該当のページがないですの画面です。)が発生しないのと、初期のものでも困らないと思うので。
  • トークン発行機能がある。
    →これは何のための機能なのかよくわからないです。
    有料で使えるということは、何か有用に使えるのだとは思うのですが。。
  • 続けて編集設定ができる。
    →1日1記事も書けるかどうかなのに、やっぱり私には不要かな。

1年後のドメインの費用などで気になる点

「https://nknot.jp/」のドメインが1年間無料となっていたので、申し込んでみましたが、1年後からは3,000円程度の利用料がかかってくることになります。
まぁ、ドメインを使用するのでお金がかかるのは仕方ないですが(それが商売ですからね。)、実は「.jp」ではないドメイン、例えば「.net」とかだと1,000円ちょっとから使用できます。
こちらは初年度からお金がかかりますが、2年目になったタイミグで「.jp」より安くなることになります。
ドメインも人気なものが高くなっているんですね。
ドメインにあまりこだわりがなく、長期使用を考える方は、ランニングコストが安いドメインを取得されるほうがいいかと思いました。
※私は、2年目以降高くなるのは気が付いていましたが、「.jp」いいなぁと思ってポッチとやってしまいました。(笑)

ドメインの切り替え

ドメインの切り替えですが、画面上でボタンを押していくだけで完了します。※いくつか自分の情報や、決済のため、入力が必要ではありますが、迷うことはなかったです。
最後に、有料会員で追加されるドメインの管理画面で、新しいドメインを選択しすると切り替えが完了します。

ドメイン登録時に、個人情報を入力するのですが、Whoisに公開されますと記載されています。しかし、実際にはFC2の会社の情報で公開する設定(whois情報公開代行サービス)がある(初期設定)ので、個人情報を公開したくない人はFC2の会社の情報で公開するといいです。

前のドメインにアクセスするとどうなるのか、ですが、前のドメインのページアクセスすると、新しいドメインに転送してくれます。
ちなみに、301リダイレクトとなります。そのため、Google Search Consoleのドメイン切り替えの手続きも可能です。※わからない方は気にしなくても大丈夫です。

SSLは使えるのですが、新しいドメインに切り替えた直後はサーバ側の設定が行われていないため、httpでのアクセスのみとなります。※httpsでアクセスするとエラーになります。
私の場合10分~20分後には、SSLの設定が完了し、httpsでのアクセスができるようになりました。
httpでアクセスするとhttpsに転送されるようにもなっています。httpからhttpsへは302リダイレクトになっています。※301リダイレクトに変更することも可能です。
また、SSLを無効にすることも可能です。

FTPでファイルアップできることについて

あまり使用する人は少ないかと思いますが、FC2ブログでは、Cssはテンプレートで一つだったり、JavaScriptに至ってはテンプレートに直接書くか、プラグインのフリーエリアにしのばせるしかできません。
ある程度は、機能単位に分割して管理したいので、自分で作成したファイルをアップロードできるのは助かります。
※Cssや、JavaScriptは別ファイルで作っておいて、テンプレートで読み込むように指定することができるのです。
「.html」、「.css」、「.js」のファイルはアップロードできるのを確認しました。
ちなみに「.php」はエラーとなりアップロード禁止、「.pl」はアップできましたが、テキストが表示されるだけでした。さすがにセキュリティや、重たい処理を動かされると困るので、使えないようにされているのですね。少し残念でした。

趣味+アルファでブログをやっているのですが、月300円(2年目からは600円)程度の趣味であれば問題ないかなぁと思います。
独自ドメインに興味があるかたや、有料会員のサービスに興味がある方は月300円ですし、一度やってみてはいかがでしょうか。
もちろん、サーバサイドのプログラミングや、WordPress、MovableTypeなどを使いたい方などは、レンタルサーバを使用するのも手ですね!
※私も、続くようだったら、レンタルサーバにも手を出すかもしれません。(^^)

2019/04/14

ブログ記事内の見出しに背景色や線を付けて読みやすくする。

ブログを見やすくするために、記事内の見出しの文字を装飾して目立たせ、読みやすくしたいと思います。
見出しと、文章がわかりやすく区別できるとメリハリがついて、記事が読みやすくなると思います。

見出し装飾

やりたいこと

下の4つを対応してみたいと思います。

  • 1.見出しの背景に色を付ける
  • 2.見出しの下に線を入れる
  • 3.見出しの左横に縦線を入れる
  • 4.縦線と見出し文字をずらす

前提

  • 過去やこれから書く記事すべてに同じように反映されます。
  • ブログの見出しの文字列はh2タグ(※)が設定されている前提です。このh2タグで囲まれている文字が全部同じように装飾されるように対応します。
    (※)たとえば「文字の装飾」という文字を見出しとすると<h2>文字の装飾</h2>のように記載していることを前提にしています。
    FCブログでは、h2タグを入れるには、「本文の編集」で「W」を押していない状態でできます。「W」が押されている状態だとうまく反映されません。※押されている状態で、さらに「ソース」ボタンが押されている場合はできます。
  • すでにh2タグなどの装飾がされている場合ではうまくいかないときがあります。※装飾されている内容を削除すればできるようになります。

装飾をするための修正箇所

CSSに追記します。FCブログでは、左メニューにある「テンプレートの設定」のリンクをクリックすると右側の下部に表示される「スタイルシート編集」の部分に追記します。

PCとスマホとでレイアウトを分けている人は、PCとスマホそれぞれで追記が必要になります。※PCだけに対応する場合は、PCだけでも大丈夫です。

CSSは、タグなどに装飾(sytle)の定義を記載することができるものです。HTML上のタグへ直接記載することもできますが、全記事で読み込まれる共通のCSSファイルに記載することで、全部の記事に同じように反映されるようになります。※管理画面の「スタイルシート編集」で編集すると、全記事で読み込まれる共通のCSSに反映されます。

事前準備

まずは、背景色を決めます。
ただ、色はブラウザがわかる色を指定する必要があります。下のサイトから使用したい色の名前(英語)、もしくは、色の番号(#000000のような#と6桁の数字)を取得します。
サイト:見本とカラーコード変換
※記載のサイトを開いて、画面上部に表示されている色の箱から設定したい色をクリックすると、該当する色番号が左側に#000000のような感じで表示れますので、控えておきます。もしくは、画面の下部に色の名前(aliceblueなど)が書かれていますので、その名前を控えてください。
もし、サイトがなくなっている場合は、googleで「色 カラーコード」などの文言で検索して確認してください。

「テンプレートの設定」の「スタイルシート編集」の一番下に下記の文字を入力します。
h2 {
}
※この{}内に装飾の設定を記載していきます。

h2タグの装飾

では実際にCSSへ設定を追加していきます。

1.見出しの背景に色を付ける

「テンプレートの設定」の「スタイルシート編集」に追加したh2の設定の箇所が下記のようになるようにします。
※青文字を追加します。
h2 {
background: #e6f8ff;
}
背景(background)の色です。
#e6f8ffが背景色です。この値を変えると色が変わります。

2.見出しの下に線を入れる

「テンプレートの設定」の「スタイルシート編集」に追加したh2の設定の箇所が下記のようになるようにします。
※青文字を追加します。
h2 {
background: #e6f8ff;
border-bottom: solid 3px #00A2b6;
}
下(bottom)の線(border)を指定しています。
#00A2b6が線の色です。この値を変えると色が変わります。ここに色の名前(aliceblueなど)を記載することもできます。
pxは線の太さです。数字を小さくすると細く、大きくすると太くなります。
solidは1本の実線を表しています。doubleだと2本の実線、dottedだと点線、dashedだと破線になります。

3.見出しの左横に縦線を入れる

「テンプレートの設定」の「スタイルシート編集」に追加したh2の設定の箇所が下記のようになるようにします。
※青文字を追加します。
h2 {
background: #e6f8ff;
border-bottom: solid 3px #00A2b6;
border-left: solid 5px #77d2d9;
}
左(left)の線(border)を指定しています。
※設定値は下線と同じです。

4.縦線と見出し文字をずらす

「テンプレートの設定」の「スタイルシート編集」に追加したh2の設定の箇所が下記のようになるようにします。
これを入れないと、左横の線と文字がくっついて表示され見にくいです。
h2 {
background: #e6f8ff;
border-bottom: solid 3px #00A2b6;
border-left: solid 5px #77d2d9;
padding-left: 0.5em;
}
左側(left)にスペースを入れる(padding)します。
0.5emの値を大きくすると、大きくずれます。

最後に保存してもらうと反映されます。

参考

たとえば、下線がいらない場合は、border-bottomの行を書かなければ表示されません。
自分が好きなように装飾をしてみてくださいね!

今回はh2タグでの記載をしましたが、h3タグや他のタグも同じように設定ができますので、気が向いたら設定してみてくださいね。

2019/04/06

FC2ブログでページ毎にDescription(ディスクリプション)を設定する方法

Description(ディスクリプション)とは、WEB検索サービス(googleやyahooなど)の結果で、タイトルの下に表示される文章です。

※設定方法をすぐ見たい人はここを押しててください。
※JavaScriptでDescriptionを設定する方法を書いています。
※FC2ブログでの紹介ですが、同じようなことをすれば別のブログサイトでも可能です。

Descriptionを付けたい理由

ブログをやっていると、どうしてもアクセス数が気になります。 特にブログを初めてのころは全然アクセスがなく0という日もあります。 今の私がまさにその通りです。(^^;) ※ふと思ったのですが、だれも見てもらえない間は独り言を言っているようなものだと気が付きました。(笑)

少しでもアクセスを伸ばしたいため、まずはWEB検索の表示結果を改善していきたいと思います。小さなことからコツコツとです。

Description(ディスクリプション)って何?

まず、Description(ディスクリプション)とは、冒頭に記載した通り、WEB検索の結果一覧で表示されるそのページの説明文です。

何も設定していない場合は、Googleが検索された文字を元にある程度判断して、本文の中の文章を表示してくれますが、できれば自動で表示される内容ではなく、自分が表示したい文章を表示して見たいですよね。 そちらの方が、検索結果に並んだ時に見てもらえる確率が上がるような気がします。

※ちなみに、Descriptionを設定していても、検索内容からGoogleが最適と判断すれば、本文中の文言が検索結果に表示されることもあるそうです。さらにいうと、タイトルも自動で変えて表示することもあるらしいです。 Googleって頭いいですね!

FC2ブログでのDescriptionは?

では実施にFC2ブログに投稿した際のDescriptionはどうなるのかを確認してみました。 どうも、ブログの作成に「ブログの説明」へ記載した文言が設定されるようです。

※「ブログの説明」の確認は、ブログの管理画面にログインし、画面右上のほうにある「環境設定」をクリックすると「ユーザー情報の設定」内に表示されます。

どのブログの記事でも同じ文言が設定されるようで、記事毎にDescriptionの文章を分けて出すことはできないようです。 参考までにFC2ブログでDescriptionの設定をGoogleで検索してみましたが、ぱっとでてきたのはどの記事でも同じ固定の文言とする方法でした。 残念ながら、私がやりたいこと(記事毎に設定する)とは違う内容でした。

どうやってDescriptionを設定する?

さらにいろいろと調べていったところ、JavaScriptでDescriptionを設定できることがわかりました。 このJavaScriptと言うのは、WEBブラウザ(InternetExplorerやSafariなど今この記事を見ているアプリ)上で、画像を動かしたり、文字を変更したりできるものです。 JavaScriptで設定するのは、プログラミングになりますが、決まった内容を決まった手順で設定していくだけなので、特に難しくなかったです。 ちなみに、Googleが検索時に表示してくれる内容は、JavaScriptで書き換えた後の内容になっていました

※下記の文字列をChrome(WEBブラウザです。ここから取得できます)のURLを入力する欄に入れてEnterを押すと、Googleに登録されているこのサイトの一覧が表示されます。クリックすると該当記事に行きますが、一覧に表示されているものと同じ内容の文言は記事内にないことがわかります。
site:https://nknot.jp/

記事ごとにJavaScriptでDescriptionを書き換える手順

ブログの記事毎にDescriptionを書き換える手順です。

※カテゴリー一覧やトップページはこの方法できません。やろうと思えばできそうなので、別の記事で書くかもしれません。
※descriptionが出力されないテンプレートを使用している方は対応できません。

全体の流れ

下記の流れで設定を行います。見ればわかりますが、ブログの記事の書き方は今までどおりで、最後にDescriptionの設定を行います。
  1. ブログの記事を書く
  2. JavaScriptをコピー(後程かいてある文字をコピー)
  3. ブログの記事に貼り付け
  4. Descriptionに書きたい文言を設定
  5. ブログの記事を保存

1.ブログの記事を書く

これは今までどおり普通に好きなように記事を書いてください。画像を使ってもらってもいいですし、何をしても大丈夫です。

2.JavaScriptをコピー

下に記載されいてる「―この下から―」「―この上まで―」の間にある文言を選択してコピーしてください。

※「―この下から―」「―この上まで―」の文言はコピーしません。

―この下から―

<script type="text/javascript"> var dc="この文字を削除して書いてください。(最初と最後の"は消さないでください。)"; var url_str=location.href; if(url_str.match(/blog-entry-/)){   if (typeof(dc) != "undefined") {      var tag = $('head').children();     for(var i = 0;i < tag .length;i++){       if(tag.eq(i).attr('name') === 'description'){         tag.eq(i).attr('content',dc);       }     }   } } </script>

―この上まで―

3.ブログの記事に貼り付け

ブログの記事に貼り付けてください

どこでもいいですが、最後に貼り付けたほうがわかりやすいと思います。 ここで気を付けてほしいのですが、HTMLとして貼り付ける必要がありますFC2ブログだと、「本文を編集」エリアのツールメニューにある「W」(右から2つ目)を押していない状態で貼り付けてください。 もしくは、「W」を押している状態だと、次の行の左側に表示される「ソース」を押してから貼り付けてください。

うまく貼り付けられると、プレビューや実際の記事にはこの文字列は表示されません。
※表示されないのが正しいです。表示されないだけで、ちゃんと残っています。

4.Descriptionに書きたい文言を設定

「この文字を削除して書いてください。(最初と最後の"は消さないでください。)」の文字を削除し、Descriptionに書きたい文言を設定(入力)してください。

文字数はスマホでの検索結果は100文字くらいだそうなので、100文字を少し超えるくらいまでがよさそうです。もちろん長く書いても、切れて表示されないだけなので書いても問題ないです。PCは200文字以上表示されたりします。 また、下記点は気を付けてください。

  • 記号は使わない
  • 改行を入れない
  • 文言はクォーテーション「"」で囲む

5.ブログの記事を保存

最後にブログの記事を保存して公開してください。 これを忘れると全てが台無しになります。(笑)

次にプレビューや公開された記事を見てみて、Javascriptや、Descriptionの文言が表示されていないことを確認してください。 表示されている場合は、失敗しています。 失敗している場合は、たぶん「3.ブログの記事に貼り付け」で失敗していると思いますので、見直してください。

ちなみにGoogleの検索へはすぐには反映されません。数日はかかる可能性があります。 ※ある程度早く反映してれるようにすることもできますが、別の記事で書きます。

うまく設定できれば、自分がアピールしたい文言をGoogle検索の結果に表示されるようになるので、いっぱいクリックしてもらい、サイトに来てもらえるようになるといいですね!