スマホでやるべきalt属性、title属性対策

スマホでもSEO対策

※2016年4/12 はてなフォトライフの仕様変更によりソースコードの修正を行っております。と参考元のvarさんに教えて頂きました！
ありがとうございます！
4/12以前にブックマークレット作成した人は作り直しをお願いします！

こんにちは！

エカキオです！

はてなブログで画像を貼り付ける時、はてなフォトライフという機能を一般的には使用しますね。

通常通り貼り付けると、特に意味のない文字列でリンクが貼られます。

ただ、それはSEO的にはあまり良くないと有名ブロガーのB-CHANさんも言っています。

www.b-chan.jp

前々から、何か対策を使用とは考えてはいましたが、見たままモードでhtmlを編集するのも大変だしなぁと思って、とりあえず放置してきました。

そこで、先日購読しているブログの中で興味深い記事が！！

www.aritai.net

さっそく読ませて頂きました。

ふむふむ、なるほど。

ただ、カツヲさんの方法はPCからの作業になるなぁと思い、基本iPhoneから更新するわたしは、なにかいい手立てがないか考えました。

上記のサイトも色々なサイトに紐付いて参考にしていて、下記のページにたどり着きました。

ここで、iPhoneでも可能な

「ブックマークレット」

に注目したのです。

具体的なやり方をご紹介します。

まずは下準備します

まずはこちらのサイトのブックマークレットを参考にさせていただきましょう。

tar.blogru.me

こちらの「はてなフォトライフ2HTML(拡大無効)」を使います。

説明頂いている内容は主にPC向けに紹介していただいていますが、iPhoneではブックマークバーはありませんので、以下の方法を使います。

まずはソースコードをコピーします。

JavaScriptのソースコードはこちら。

javascript:(function()%7Bif(-1!=location.href.search(/http(s)?:%5C/%5C/f.hatena.ne.jp%5C//))%7Bvar%20a=document.getElementById(%22foto-body%22).getElementsByTagName(%22img%22)%5B0%5D;if(null!=a)%7Ba.removeAttribute(%22width%22);a.removeAttribute(%22height%22);a.removeAttribute(%22style%22);a.setAttribute(%22class%22,%22hatena-fotolife-disable%22);a.setAttribute(%22itemprop%22,%22image%22);var%20b=new%20String,b=b+%22%3Cp%3E%3Cspan%20itemscope%20itemtype=%27http://schema.org/Photograph%27%3E%22+a.outerHTML,b=b+%22%3C/span%3E%3C/p%3E%22;prompt(%22%5Cu306f%5Cu3066%5Cu306a%5Cu30d5%5Cu30a9%5Cu30c8%5Cu30e9%5Cu30a4%5Cu30d5%5Cu304b%5Cu3089HTML%5Cu751f%5Cu6210%22,%20b)%7D%7D%7D)();

上記を丸々コピーしてください。

次に、Safariでどこのページでもいいので、ブックマークします。

登録後、編集します。

名前は任意で良いです。
URL入力欄には、先ほどのJavaScriptを貼り付けます。

これで下準備完了です。

実際の作業

まずはフォトライフに写真を投稿します。

f.hatena.ne.jp

その後、写真単独のページに行き、そのページで、

ブックマーク画面

↓

先ほど作成したブックマークレットを選択

するとこのような画面が表示されるので、本文をコピーします。

こんな文章です。

<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/e/ekakio/20160409/20160409214709.jpg" alt="ああああ" title="ああああ" class="hatena-fotolife-disable" itemprop="image"></span></p>

その中の

alt="ああああ"
と
title="ああああ"

の「ああああ」部分を編集して、はてなブログの記事に貼り付けましょう。

はてな記法でもMarkdownでもそのまま貼り付ければ良いかと思います。

以上で作業終了です。

まとめ

まずは、SEO対策に関して貴重な記事を書いてくださっているB-CHANさん。
いつも参考にさせて頂いています。

今回の記事のきっかけをくださった、カツヲさん、大変感謝しております。
おかげさまで、スマホからの投稿スキルが上がった気がします。

専用のブックマークレットを開発してくださったtarさん、今回の記事の要になりました。
ありがとうございます。

皆さんのおかげで、またいい機能が生み出せました。

心より感謝申し上げます。

単純にはてなフォトライフの機能を使って投稿するより一手間二手間かかりますが、長い目で見てきっと後悔はしないはずです。

はてなブログ等々、スマホからブログ投稿が多い方は、ぜひ実行しSEO対策に励んでみてはいかがでしょうか。

それでは、この辺で。

エカキオ

スラスラわかるCSSデザインのきほん

ekakio.hatenablog.jp

ekakio.hatenablog.jp

ekakio.hatenablog.jp

ekakio.hatenablog.jp