asklife

IT&Life

Month: 11月 2014 (page 1 of 2)

WordPressテーマによりSEOがどう変化するのか検証

WordPressのテーマによってPVは変わる?

過去、3つのテーマを試しました。
Bueno/Stinger/Hemingwayです。
変更した際の記事は以下です。
WordPressテーマをStinger3に変更したらPVが18%ほど向上したのでご報告
WordPressテーマをHemingweyに変えました。

StingerはSEOに強い、Hemingwayはオシャレ

Bueno:2010/10〜2014/1
デザインが良くて長く使っていました。
ただ、時代の流れでモバイル対応していなかったので変えることにしました。

Stinger:2014/1〜2014/6
モバイルも対応していたし、SEOに強いと噂があったので変えてみました。

Hemingway:2014/6〜2014/11
Stingerを使う人が増えてきてデザインが似通ってきて嫌だなぁと。
デザインが良いHemingwayに変えてみました。

改めてStingerに戻してみた

スクリーンショット 2014-11-30 14.04.14

と、いろいろテーマ変更したのですが、PV数が如実に落ちました。
時代の流れはあるので検索ニーズについていけなくなったんだろうと仮説を立てています。
ただ、以前はGoogle検索一位だったのに、今は2ページ目になっていました。
これはSEOが悪化したと考えるのが良いので、Stingerに戻して様子を見たいと思います。

ただ、Hemingway以降の他の記事は伸びてるですよね。だから一概にテーマの差とも言い切れない。。。
スクリーンショット 2014-11-30 14.04.55

Stingerの課題感はデザイン

とは言え、デザイン頑張ればいい話です。

スクリーンショット 2014-11-30 14.24.34
スクリーンショット 2014-11-30 14.25.00
こちらのブログはStingerで作られています。iPhone・Macの情報発信ブログ “NUMBER333”

Pite@infoNumber333さんをベンチマークにしてデザイン変更していこうと思います。

■2015/1/13追記
テーマで検索順位が戻ることはありませんでした。
2014年12月の間はStingerにしていました。2015/1/13からはHemingwayに戻しました。変わらずダウントレンドだったのでテーマはオシャレな方に戻しました。
おそらく、記事の内容が古くなったため、有益な他のサイトを優先するようGoogleに判断されたのでしょう。
つまり、優先な情報を提供することで、多くの人の役に立つようになっているとわかりました。

image

add_shortcodeでWordPressにフック関数を作成する

フック関数:add_shortcode($tag,$func)

<?php add_shortcode($tag,$func);?>

とすると、フック関数が作れます。
※フック関数についてはWordPressのカスタマイズという記事でまとめてますのでそちらをご一読ください。

パラメータ

$tag
(string) (必須) 記事の本文より検索する、ショートコードタグ
初期値: なし
$func
(callable) (必須) ショートコードが見つかったときに実行されるフック
初期値: なし
戻り値
(なし)

実装サンプル1

記事かページで以下のようにタグコードを入れると、

[footag foo="bar"]

function.phpに作成した以下のメソッドが呼び出されます。

function footag_func($atts) {
     return "foo = {$atts[foo]}";
}
add_shortcode('footag', 'footag_func');

Outputはこんな感じです。
スクリーンショット 2014-11-26 2.02.40

実装サンプル2

タグコード

[baztag]content[/baztag]

function.php

function baztag_func($atts, $content) {
     return "content = $content";
}
add_shortcode('baztag', 'baztag_func');

Output
スクリーンショット 2014-11-26 2.10.04

実装サンプル3

returnにhtml文字列を返す。

add_shortcode( 'func_link', 'tag_func_link' );
function tag_func_link( $atts, $content='' ) {

	extract( shortcode_atts( array(

		'target' => '_self',

		), $atts ) );

	return '<a href="/function/'.$content.'.html" target="'.

		attribtue_escape( $target ).'">'.$content.'</a>';

}

書き方を変えただけ

class my_shortcode {
	function my_shortcode() {
		add_shortcode( 'var_link', array( $this, 'tag_var_link') );
	}
	function tag_var_link( $atts, $content='' ) {
		return '<a href="/var/'.$content.'.html">$'.
			$content.'</a>';
	}
}

参考

http://wpdocs.sourceforge.jp/%……_shortcode

Twitterボタンをカスタマイズする方法

Aタグに公式ボタンのURLを渡してあげるだけでOK
ボタンデザインはCSSを指定すればOK

<a class="mydesign" href="https://twitter.com/share?text=mytext&amp;amp;url=http://asklife.jp&amp;amp;via=asklife_jp&amp;amp;data-related=asklife_jp">ツイート</a>

参考記事
ツイートボタンのデザインを独自にカスタマイズする方法|クラスメソッドブログ http://dev.classmethod.jp/ria/……et-button/

Facebookシェアサムネイルを指定するOGPとTwitterCardの設定方法

Facebook&Twitterボタンを最適化する

fbtwi

Facebook OGP

Facebookいいね!とシェアボタンはOGPを設定すると一段進化します。

OGPとは

OGPとはOpen Graph Protocolです。ソーシャルの仕様です。
名前から何となくわかりますが、その記事のURLの名前、概要、サムネイルを設定するものです。
OGPは以下の仕様になっています。

タイトル<title> </title> に設定しているタイトル
※設定していなければページのURL
概要説明<meta name=”description” content=”テキスト”> のテキストの部分
※設定していなければ本文テキストの冒頭部
URLページのURL
画像ページに使われている画像の中から一定の条件を満たす画像が無作為に3種類選ばれる。画像はトリミングされてしまう。

引用元:OGPを設定して、Facebookでシェアした時の画像を大きく表示させる方法 http://www.webtech.co.jp/blog/……news/6199/

OGPを設定することで得られるメリット

◎友達のニュースフィード(ウォール)に表示される。
普通のいいね!は自分のタイムラインのみの表示ですが、友達タイムラインにも表示されるようになるので記事の拡散率が向上します。

◎ニュースフィードでの表示内容を指定できる。
タイトル・サムネイル・概要説明を指定できるようになります。

◎いいねボタンをクリックしてくれたユーザーに記事の更新通知が送れる。
いいね!したURLページのFacebookページが作成されます。
その記事にいいねをしてくれたユーザーに記事の更新通知が送信できます。

OGPの設定

OGPを使えるようにするには、いいね!ボタンを作成し、appIDを取得し、HTMLタグ、metaタグの設定をします。

いいね!ボタン作成 – Facebook開発者
fb:app_id アプリ作成画面

<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<meta property="og:title" content="記事のタイトル" />
<meta property="og:type" content="article" /> //トップページはwebsite、個別ページはarticle
<meta property="og:description" content="記事の説明" />
<meta property="og:url" content="記事のURL" />
<meta property="og:image" content="画像のURL" />
<meta property="og:site_name" content="サイトのタイトル" />
<meta property="og:locale" content="言語" />
<meta property="fb:admins" content="facebookのユーザーID" /> //できればfb:app_idを利用
<meta property="fb:app_id" content="facebookのアプリID" />

以下の4つは基本的な情報なので設定しておくべきでしょう。
og:title – ページのタイトル
og:type – ページのタイプ
og:image – ページのサムネイル画像
og:url – ページのURL

設定したOGPが正しく動いているか確認

以下から確認出来ます。
https://developers.facebook.co……ols/debug/

TwitterCard

スクリーンショット 2014-11-13 19.38.59

TwitterCardとは

要するにFacebookのOGP設定したシェアのようにTwitter上にもシェア出来るものです。

TwitterCardの設定方法

Facebook OGPを設定していれば、以下二つを追加するだけです。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@asklife_jp">

設定したTwitterCardが正しく動いているか確認

以下から確認できます。
https://cards-dev.twitter.com/validator

WordPressでの設定

wp

All in One SEOプラグインを利用する

All in One SEO → Feature Manager → Social Meta をActiveにします。
これでWordPressの記事毎に設定出来るようになります。

Facebookだけでなく、TwitterCardも同時に設定出来ます。便利!

参考サイト

勉強になりました。ありがとうございます。
facebook いいねボタン設置時のOGP設定方法♪ http://webdesignerwork.jp/web/……cebookogp/ @webboyjpさんから
OGPを設定して、Facebookでシェアした時の画像を大きく表示させる方法 http://www.webtech.co.jp/blog/……news/6199/
【備忘録】WordPressに「Twitter Cards」を設定してみる | Creator Clip http://creatorclip.info/2014/0……ter-cards/
All in One SEOプラグインでOGP作成 WordPressの記事をFacebookで紹介するときに便利 | For My Own Life http://fmol.be-ourselves.jp/?p=7878
FacebookのOGPを記事ごとに思い通りに!All in One SEO PackのSocial Metaが便利だった! | 男子ハック http://www.danshihack.com/2014……e-seo.html @danshihackさんから

WordPressのデザインをPC/モバイルで分けてモバイルデザイン対応する

PC版デザインのサイトをモバイル対応する

方針

1.PCとモバイルでテーマを分割する。
2.PCのテーマはそのまま
3.モバイルのテーマを反映する。

プラグインを探す

Multi Device Switcherが便利です。
インストールすると、「外観」→「マルチデバイス」という項目が出てきます。ここがメニュー。

テーマを選ぶ

スマホ/タブレット/携帯電話の各々の端末に対しテーマを選べます。
ここで、Google Analyticsなどの設定を忘れがちなので注意してください。

参考
http://liginc.co.jp/web/wp/plug-in/91651

Older posts

© 2017 asklife

Theme by Anders NorenUp ↑