スマホでやるべき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でもそのまま貼り付ければ良いかと思います。

以上で作業終了です。

ああああ