2017年9月17日日曜日

ウェブリブログから移転の際にrel="canonical"をタグを設定した話

ウェブリブログからWordpressにブログを移転したけどウェブリブログへの投稿は消すつもりはなかった。こういうとき内容が重複する投稿が出来てしまうので検索エンジンには移動したことを伝えたほうがいいらしい。
一番正しいのは301リダイレクトすることだけどウェブリブログではそれはできない。無料ブログサービスはたいていそうだと思われる。

次点としてHTMLに
<link rel="canonical" href=".....">
を記述することになる。
ただそれもウェブリブログではできない。

なにか方法はないかと検索してみたけどウェブリブログから引っ越したという記事はほとんど見つからない。そんな中ひとつ有用な記事を見つけることができた。
JavaScriptで埋め込むという方法だ。ウェブリブログならJavaScriptを使える。この方式だとHTMLに直接書いてあるわけではないけれどクローラーはJavaScript実行後のHTMLを見てくれるようだ、とその記事にはかいてあったのでそれを信じることにした。

この記事を見つけてから実際に作業するまでずいぶん長いこと期間を開けてしまったらその間にこの記事がサイトごとなくなってしまった。でもJavaScriptのソースは控えておいたのでここにそのソースを置こうと思う。たぶん問題ないよね。

<script type="text/javascript">
var Hash = new Object();
Hash['1'] = '記事タイトル1;
Hash['2'] = '記事タイトル2';
var URL = "";
var meta = "";
for (var key in Hash){
  if(document.title.indexOf(Hash[key]) != -1){
    //meta = "<link rel=\"canonical\" href=\"http://example.com" + key + "\">" ;
    var meta = document.createElement("link");
    meta.setAttribute("rel", "canonical");
    meta.setAttribute("href", "http://example.com/" + key);
  }
}
document.getElementsByTagName("head")[0].appendChild(meta);
alert(document.head.innerHTML);
</script>

見ての通り特別なことはしていない。
Hash['1']='記事タイトル1';
配列の'1'の部分に移転先のURLからドメインを取ったものを、'記事タイトル1'の部分にウェブリブログでの記事タイトルを記述する。
ウェブリブログでの投稿数が多いと大変かもしれないけどエクスポートで出力されたデータをエディタなどで置換とかをすればそんなに苦労はしない。

このコードをウェブリブログのフリースペースに置けばいい。「表示項目設定」から「サイドバー表示項目設定」にある。フリースペースは4つあってどれを使ってもいいと思う。
一応の注意点として
  • コードを記述したフリースペースは「□表示」にチェックを入れるのを忘れないように。
  • 「フリースペース3」は反映が翌日になること。それ以外は即反映される。
  • フリースペース3に記述するとブラウザでHTMLのソースコードを表示するとこのコードがそのまま見えるけど「フリースペース」「フリースペース2」は別ファイルから読み込む形になるのでHTMLのソースコードでは見えない。
  • 実行後ブラウザでHTMLのソースコードを見ても<link rel=....>は見えない。F12を押すなどして開発者ツールからみると埋め込まれているのを確認できる。
がある。

これを移転先ブログで引っ越した記事を公開直後に実施した。


ウェブリブログに投稿した記事をWordpressにインポートしたとき意外と大変だった話

ウェブリブログからWordpressへ引っ越したときの概要

何年も前にウェブリブログ(旧ブログ)を使っていたけど数年前にWordpress(現ブログ)に移行した。そのときから旧ブログの投稿を現ブログにインポートしようと思っていた。ただちょっと面倒なので引越しに関する情報だけ集めてた。

そして先日思い切ってインポートしたんだけど多少の手間はあっても簡単に終わるとおもった。ただちょっとしたこだわりを入れたら意外といろいろなことをやらなきゃいけなかった、というおはなし。

旧ブログをどうするか

現ブログに移行しても旧ブログは削除せずそのままにしておくことにしていた。なんとなくもったいないし入り口が多い方がいいだろうから。
とすると同じ内容のブログがふたつあることになる。Googleさんはそれをあまり良しとはしてないらしい。ひとつの投稿の文字数がそんなに多いわけではないし閲覧数もごくわずかな自分のブログはそんなこと気にしなくても良さそうではある。
でも一応ちゃんとしておきたい。車がほとんど通らない道でも信号はちゃんと守る、みたいな感覚。

こういうとき301リダイレクトというものをやるのがいちばんいいらしい。けどウェブリブログではそれはできない。次点でrel="canonical"という指定をHTMLのhead部に書けばいいらしいがそれもできない。
検索するとブログの引越しに関する記事はおおいけれどウェブリブログからの引っ越しはほとんど見つからない。そんな中ひとつみつけた記事でJavascriptでhead部に書き込むという方法。なるほど。GoogleさんもJavascript実行後のhead部を見ると書いてある。
といわけでそれを採用。

旧ブログから現ブログへインポート

ウェブリブログがエクスポートしたデータ形式はMT形式。とくに問題はない。テキストエディタで写真のリンク先を修正するぐらい。
写真もダウンロードして現ブログ用のサーバーにアップロード。
インポートしたらカテゴリー・タグ変換ツールを実施。ウェブリブログにはカテゴリーやタグというものはなく代わりにテーマというのがある。これがたしかタグとして取り込まれるのでカテゴリーに変換し現ブログに合うように調整。そのときタグも追加する。
変換は一発でできるけどカテゴリー・タグの調整は記事ひとつずつ行ったので時間がかかった。
この時点では引っ越してきた記事はまだ非公開の状態。とりあえずこのまま公開してもいいんだけどやりたいことがあったので(それは次項で)。
ここまでやってしばらく放置してた。

旧ブログからインポートしたことを明確にしたい

引っ越してきた旧ブログの記事と現ブログで書いた記事を区別できるようにしたい。記事画面の上になにか文言をいれるとか背景の色を変えるとか。
そしてその違いをどう判定するか。投稿日時が旧ブログ最終記事以前であれば旧ブログと判定するのがいちばん簡単なんだろうけどこれだとこれから新しく書く記事すべてでも常に判定する処理が入るのでなんかかっこわるい。
これをどうしたらいいか解決策を思いつくのに時間がかかった。

カスタム投稿タイプを使うというアイデア

どうしたらいいかとずっと思っていたところ思いついたのがWordpressのカスタム投稿タイプという機能。これなら判定処理は必要ないと思った。カスタム投稿タイプ用に背景の色を変えるCSSを追加で読み込ませるようにテンプレートに書くだけだ。
これはいいアイデアを思いついたと思って実行したのだけどこれが簡単ではなかった。全く別のブログの開発するのに近い手間がかかってしまった。

CSSの変更は背景色だけというわけには行かないし、カスタム投稿タイプ用のカテゴリー・タグを表示するテンプレートを用意しないといけないし、サイドバーも全く別のものになるし。自分のブログにさえ対応していればいいと作ったパンくずリストも改造がひつようだし。
まあおかげでWordpressの知識は増えました。ほかに活用する機会は無いけど。

そんなこんなを次の投稿からもう少し詳しく書いていこうと思う。


2017年5月2日火曜日

NURO光開通!その記録

4月にNURO光が無事開通した。

去年のうちから申し込んでから開通するまでどんな作業があってどれくらいの時間がかかるのか調べていた。
申し込んでから開通までは1ヶ月くらいの場合もあれば2~3ヶ月くらいの場合もあるようなのでWiMAXを解約する7月までに開通できるようにと4月に申込んだ。

4月は世間的に新生活が始まる月だし5月には連休もあるし工事が多くて時間がかかるのではないかと思っていたけど4月中に開通した。

開通までの記録

4月8日

NURO光の公式サイトから申し込み。この申込で住所などを記入する流れで宅内工事の希望日時が指定できる。家の事情もあって4月18日午後に宅内工事を希望した。

すぐに登録した連絡先メールアドレスにSO-NETのメールアドレスの本登録確認メールがきたので登録。SO-NETのメールアドレスを取得。
メールアドレスはとったけどこの段階でユーザーIDは不明。へたなことしないようにそのままにしておいた。

4月9日

連絡先メールアドレスに宅内工事実施日の連絡がきた。希望通りの日時だった。SO-NETのマイページから進捗状況がわかるとあったけどユーザーIDがわからないので見ることはできない。たぶんよくある“ユーザーIDを忘れたら”のリンクから操作していけばわかるんだろうけどなにもせず。

4月11日

NURO光担当から屋外工事の日程を決めるために電話がきた。ネットで調べたとき屋内工事をしたときに屋外工事の日程を決めるとあったように思ったのだけどその前だったのでちょっと驚いた。
4月29日を勧められたのでそのまま受け入れた。開通月は無料なのでこの日だと無料期間が無いのも同じだと思ったけどなるべく早く開通してほしかったし連休に入ると遅くなりそうなので(確認しなかったけど)まあいいかと。

4月12日

SO-NETからはがきが到着。申し込んだコースなどの通知と一緒にユーザーIDやパスワードなどが書いてあった。それをみてSO-NETのマイページを確認した。

4月17日

屋内工事担当の方から電話。18日午前でもいいかと言われたけど午後にしてもらった。

4月18日

屋内工事実施。室内の電話口を開けてみるとチューブがあったけど外壁の電話線入り口にはチューブが見当たらない。なので光ケーブルを壁の中を通すことを諦めて外壁を這わし壁に穴をあけて部屋に通すことになった。
そのためちょっと時間がかかったんだろうけど無事工事終了。
ONUに光ケーブルを差し込むのも工事のうちだった。

4月28日

宅外工事担当の方から電話。予定通り29日の午後に他での工事が終わってこちらに来る前に電話するとのこと。

4月29日

宅外工事実施。まず少し離れた電柱から作業が始まり、家の近くの電柱での作業、電柱から外壁への作業という流れ。ケーブルをつなげるだけと思ってたんだけどそれぞれでの作業が意外に時間がかかっていた。しかし簡単に作業してあとでトラブルが発生するよりかはそのほうがもちろんいい。

工事が終わった瞬間からネットが開通!

使い心地

さすが光回線!はやい。
WiMAXで使っていたときはリンクをクリックしてから表示開始までわずかだけど間があった。画像の多いページは順番に表示してるなという感じだった。
光にしたらリンクをクリックしたらすぐに表示開始される。そして画像が多くてもほぼ瞬時に表示される。

WiMAXも速度制限がかかってないときはそんなに遅くはないんだけどやっぱり光回線の速さはすごいね。

NURO光は最大2Gbpsを謳っているが実際の速度はそこまでではないとわかっている。とはいえある程度の速さは期待して通信速度を測定するサイトで測ってみたら思ったほどではなかった。たまたまその時調子悪かったのか自宅の地域ではこんなものかわからない。

だけど待たされる感じがほとんどなくいい感じで使えていてとっても満足している。

2017年4月23日日曜日

WiMAXから光回線へ移行することにした

WiMAXの2年契約更新をきっかけにネット環境を見直し

現在、WiMAXを自宅の固定回線として使っている。だからルーターはURoad-Home2+でありこれはAC電源専用なので持ち歩いて使うことはできない。最初から持ち歩いて使うつもりはないのでこれで問題ない。

さて、今度の7月にこのWiMAXの更新月を迎える。これまでキャンペーンで2年間で月3696円(税抜)で使っていたのだけど更新月を過ぎたら月4880円(税抜)※となる。

※WiMAX契約時に受けた説明の記録では月4880円となってるけどUQ WiMAXのサイトを見ると現時点では月4380円になってる。

もともとWiMAXを固定回線で使っていた理由はふたつあってひとつは工事の必要が無いから、もうひとつは料金が光回線よりは安いからだった。

でも、更新月を過ぎてからは光回線とは料金的にたいして差がない。だったら工事の手間があるけど光回線にしようと決めた。

工事の手間が…と書いたけどじつは部屋の片付けが大変という方が本当のところ(^o^)
その部屋の片付けも少しづつ進めていった。

7月にWiMAXを解約するときにはすでに光回線を開通済にしておく必要がある。光回線は工事があるので申し込んでから開通するまでのそれなりに日数がかかるし何か問題が発生する可能性も考えて4月に申し込みをすることにした。

WiMAX速度制限の仕様が変更されたけど

ネット環境の見直しを去年のうちから考えていたらWiMAXの速度制限の仕方が変わるという案内が年末に出た。

変更前
3日間で3GB以上利用したら翌日の昼から翌々日の昼間でYouTubeが見られるくらいの速度に制限

変更後
3日間で10GB以上利用したら翌日の18時頃から翌々日の2時頃まで1Mbpsほどに速度制限

この変更は制限がかなり緩和されているようにみえる。これなら光回線への移行をしないことも検討しようかと思った。でも2月になって実際にこの運用に変わったら使いにくいものになってしまった。

自宅でそれなりの通信量があって変更前は常に速度制限を受けてる状態だったけどその状態でも使ってて遅いと思うようなことはなかった。
変更後でも制限を受ける条件に当てはまったのだけどこれがまあ遅い。

Windows 10のタスクマネージャーを見てると変更前は速度制限時で4Mbpsくらいだったのが変更後は案内通り速度制限時で1Mbpsになっている。これが思った以上に遅くて画像が多めのサイトを見ると表示完了まで時間がかかってしょうがない。

もともとWiMAXから光回線へ移行することにしてたけどこれがとどめとなった


2017年3月8日水曜日

「さくらのブログ」から「Blogger」へ引っ越すときの“canonical”に関する処理

投稿データのエクスポートとインポート

さくらのブログであるブログを書いていたけど思うところあってBloggerに引っ越した。(もちろんこのブログのことではない)

さくらのブログで書いていた投稿をエクスポートして形式と時間を変換してBloggerにインポートした。さくらのブログのエクスポートはMT形式、Bloggerのインポートできる形式はXMLなので変換してくれるサイトを使わせてもらった。また投稿時間もタイムゾーンの関係でずれてるのでこれも変換してくれるサイトを使わせてもらった。
そうしてインポートした投稿はとりあえず下書き状態にしておいた。

検索エンジンにパクリでなく引っ越しであることを明示する方法の検討

さて、同じ内容のブログがふたつになったときはパクリではないことやどちらがメインであるかを検索エンジンにわかるようにしておいたほうが良いということなので対策をとらないといけない。
引っ越しの時点での投稿数は100くらいで見ている人も少ない自己満足的なブログなのでそんなこと気にしなくてもいいじゃないかとは思ったけど技術的興味もあったし。

理想的なのは301ダイレクトだそうだけどそれはしなかった。.htaccessファイルの書き方をちゃんと理解するのに時間がかかりそうだったし、たぶんだけどさくらのブログではできない。それに別のウェブリブログで書いたブログの引っ越しも考えていてそれもこのやり方は使えないから。

rel="canonical"を使うことにしたけど

HTMLの編集できないブログでもJavaScriptで埋め込むことができるということで
<link rel="canonical" href="">
を挿入することにした。

このやり方は"引越し元の投稿"と"引越し先の投稿のURL"を1対1で対応させる必要がある。最初に知った方法では「引っ越し元の記事のタイトルが一致した配列から引越し先URLを取り出して上記href部分に埋め込む」という形式だった。
これだと"引越し元のタイトル一覧"と"引越し先URL一覧"を用意する必要がある。これだと投稿件数が多いと大変なのでもう少しいい方法を探した。

さくらのブログではHTMLの編集が可能でここに"投稿のタイトルを取得する変数"を使えば"引越し先URL"一覧があればなんとかなりそう。
と思ってarticle.subjectを使って簡単なJavaScriptで試したところエラーになってしまった。article.XXXXXは<head></head>のあいだでは使えないからだった。
投稿タイトルの代わりに日時を取得して…とも考えたけど同じ理由で使えない。

本来の使い方と違うけどkeywordsを使う

さらにいろいろ調べていくうちにシーサーブログで無理やりWordpressのカスタムフィールドに相当するものを使う方法というの見つけた。それは検索エンジンは見ていない<meta keywords="" content="">に使うためのキーワード入力欄を使う方法だった。
なるほどこれは使える。
さくらのブログも同じブログシステムだしキーワード入力欄に入力した文字列はextra_keywords変数に入り<head>の部分でもちゃんと使える。

そしてこの文字列と同じになるように引越し先投稿のURLのパーマリンクを設定すれば"引越し先投稿のURL"の一覧も必要ないということに気づいた。

さくらのブログでは投稿記事のURLはランダム風のIDにしかならないのでこれを"引越し元のキーワード入力欄"と"引越し先投稿のパーマリンク"に設定すればいい。
ただこれだと一覧を用意する必要はないけれど全記事に対してひとつひとつ設定をしていくことになるので時間と手間がかかる。

Blogger側で設定するときの注意点

引越し先となるBlogger側でのパーマリンクは"/yyyy/mm/設定した値.html"となるので引越し元のキーワード入力欄には "yyyy/mm/設定した値"を入力する必要がある。

またBloggerでパーマリンク設定したあとそのまま保存や公開すると投稿日時がその時点のものになってしまうのでスケジュール入力欄で"日付と時刻を設定"にチェックを入れておく必要がある。インポートしたデータの日時になっているので改めて入力する必要はない。

実施した手順

ということで以下のような手順で設定した。

a.引越し元のさくらのブログ

  1. 記事の編集画面を開く。
  2. URLから記事IDをコピー
  3. それをキーワード入力欄に"yyyy/mm/記事ID"という形式で入力。
    例 "2017/03/123456789"

b.引越し先のBlogger

  1. 記事の編集画面を開く
  2. コピーした記事IDをカスタムパーマリンクに設定する。
  3. スケジュール(公開日時を引越し前の投稿のものにする)


a.b.を繰り返してすべての記事に対して行う。

さくらのブログの設定→デザイン→HTMLでHTMLの編集画面にして<head></head>の間に
<%- if:page_name eq 'article' -%><%- if:extra_keywords -%><link rel="canonical" href="引越し先BloggerのURL/<% extra_keywords %>.html" /><% /if -%><% /if -%>
を挿入する。

感想

投稿数が100くらいだったのでぎりぎり手作業の繰り返しができたけどもっと多いときはやっぱり一覧を用意する方式がいいでしょうね。


2017年2月8日水曜日

dlvr.itによるtwitterへの自動投稿でtwitterカード表示にならない理由がやっとわかった。大した理由じゃなかった。

どうしてもエラーが出てた

あるサイトだけ更新情報をdlvr.itでトラッキングのためのパラメータが付加された状態でtwitterに投稿してもtwitterカード表示されなくて困ってた。
twitterカード検証ツールでもトラッキングのためのパラメータがあるときはエラーになった。

Fetching the page failed because it's denied by robots.txt.

こんなメッセージが出る。robots.txtはWordpressで余計なクロールをされないようにしてあるけど記事や画像は弾いてないのに、というかrobots.txtって関係あるの?と思っていた。

さらに検索して調べてたらやっと原因がわかった。

Wordpressで余計なクロールをされないための記述は何年か前にいろいろ検索した結果を元に書いていた。その中ある指定がtwitterカードを表示させなくしていた。

Disallow: /*?*
Disallow: /*?

この記述だ。URLにパラメータを付加したものは弾くようになっている。dlvr.itがトラッキングのためのパラメータを付加したらこれで弾かれてたのでtwitterカードが表示されなかったわけだ。
twitterカードの表示にrobots.txtって影響あるんだとやっと理解した。

あらためてrobots.txtを確認してみるとちょっと過剰に制限していたみたい。なので上記の記述を無くしたのはもちろんもっとシンプルにした。

この修正をしたら過去の投稿も含めてtwitterカード表示されるようになった。わかってみれば大した理由じゃなかったわけだけどそのへん詳しくないから思い至らなかった。

これでおしまい

ということでtwitterカードに関してはこれですべて完了となりました。



2017年2月6日月曜日

tumblrを更新したらdlvr.itにtwitterにカード表示で投稿する方法を模索

まずは特に設定せずにtumblrの更新をdlvr.itを通してtwitterに投稿してみる

tumblrをtwitterカードに対応させるにはtwitterで認証させるだけでいい。tumblrには設定やカスタマイズは必要ない。

tumblrを更新したらdlvr.itでtwitterに自動投稿する。特に変わったことする必要はないが、dlvr.itの設定で「Post As Photo」はオフにしておいたほうが良さそう。

という調査結果をもとに設定などをした
その結果twitterカード表示されなかった。

tumblrのURLがリダイレクトされるのが原因なのか?

twitterに表示されるurlは「dlvr.it/DDDDD」
twitter的には「t.co/TTTTT」
となっている。

これらを直接ブラウザにURLを貼り付けて表示させると「AAAAA.tumblr.com/post/NNNNN/BBBBB」
のようになる。
またRSSフィードを直接見るとURLは
「AAAAA.tumblr.com/post/NNNNN」
になっている。

上記URLをtwitterカード認証ツールに通すとうまく表示されるのは「AAAAA.tumblr.com/post/NNNNN/BBBBB」
だけで、他はエラーになる。エラーメッセージは
ERROR: Fetching the page failed because it resulted in too many redirects.
とある。
AAAAA.tumblr.com/post/NNNNN → AAAAA.tumblr.com/post/NNNNN/BBBBB
このリダイレクトがエラーになるのが一番の原因なのだろうか。

それでもdlvr.itを通したい

twitterに自動投稿するだけならdlvr.itを通さずにtumblrにもともとあるtwitter連携機能をオンにするだけでいいのだ。
ただこのtwitterにはほかのサイトの更新情報も投稿するので区別のために頭に「tumblr更新:」という文字列を加えたい。となるとやっぱりdlvr.itを通したい。

となるとtumblrのURLのリダイレクトをなくす方法があればいいことになる。tumblrの設定にはそんな項目はない。
しかしtumblrの各投稿のURLのパーマリンク(tumblrではフレンドリーURL)を自分で設定することができるのでそれをすればリダイレクトのないURLになるかもしれない。
と思って試したらそうではなかった。
AAAAA.tumblr.com/post/NNNNN → AAAAA.tumblr.com/post/NNNNN/BBBBB
となる。ただtwitterの認証ツールに通すとエラーにならない。

ここで本当のエラー原因らしきものがわかった。エラーしていたのはBBBBBの部分が日本語だったからみたい。

どうすることにしたか

BBBBBの部分は投稿内容からtumblrが自動で抜き出しているから日本語になるので英数字になるようにしなくてはいけない。
そのためにはtumblr投稿時にパーマリンク(フレンドリーURL)を自分で設定すればいい。これは手間が増えていまひとつすっきりしないけれどいまのところこれしかない。
tumblrではない別のサイトの更新時も毎回URLを英数字で決めていたのである意味慣れてはいるし。

どうなったか

カード表示になるときとならない場合がある。
どうやら画像があるとうまくいくがテキストのみだとカード表示にならない。
HTMLソースをみたらtwitterカードのためのコードがなかったのでこれがtumblrの仕様のようだ。

少し不完全だけどtumblrのtwitterカード対応の件はこれでおしまいにします。