STAFFBLOG スタッフブログ

スタッフブログを AMP 対応しました!

fujie
2016/08/30
閲覧所要時間:約6

amp-thumb ※画像のカルーセルスライダーはこんな感じになればいいな…というパロディイメージです。

AMP ( アンプ ) 対応になったスタッフブログからこんにちは。
アンプと読むらしいです。読み方は知っていてもエーエムピーと読む癖がついているので、いきなりアンプが~と言われてもまったく認識できませんでした。

対応方法や情報だけは前々から仕入れていましたが、個人的に盛り上がってない感やニュースサイトだけでいいのではと思っておりましたが、

スマホ対応が不要になる!? Google、通常のモバイル検索結果でスマホ向けページの代わりにAMPページを表示する実験を開始
https://www.suzukikenichi.com/blog/google-starts-experiment-to-replace-mobile-friendly-pages-with-amp-pages/

などを読むうちに急にやる気になり、重い腰をあげました。

WordPress を利用しているので、便利なプラグインにてささっと対応もできますが、( 現段階のプラグインだと、AMP の厳しい制限によりエラーがかなり多くなるようですが… ) より深く理解したかったので、オリジナルテンプレートで対応することにしました!

ということで実際作業した感想のレポートです。
※詳しい対応方法は解説記事を探すと大量に見つかるので省きます。

対応方法にて大変お世話になった参考サイト



URL はどうするか?

AMP 化の URL は自由に決めることができます。

使用できるタグや属性などが厳しく制限されているなか、URL は特に定まっていないのに衝撃を少し覚えました。

既に AMP 対応なされているメディアのブログ、個人のブログなどを参考に URL の末尾に ?amp を付与すると AMP 対応のテンプレートを見るように設定しました。

この記事の実際の AMP ページは下記のとおりです。
スタッフブログを AMP 対応にしました! ( AMP )
https://www.fvs-net.co.jp/blog/11607?amp




どういうデザインにするか?

制限されているタグや属性の中で表現できる範囲内に関しては、デザインは自由なので、こちらもすでに AMP 対応なされているところを参考にしました。

いくつか見ていくうちに共通点がありました。

  • スマホ対応にてよくつかわれるハンバーガメニュー ( ドロワー ) などは無し
  • 記事のみに集中 ( サイドバーなどは排除 )
  • 前後記事や似た記事などはあったりなかったり
  • オリジナルテンプレートで対応している場合は、レスポンシブウェブデザインとかなり近い形で表現が可能
以上のことを踏まえ、レスポンシブウェブデザインの時に書いた CSS をもとに、ハンバーガーメニューやサイドバーを排除したテンプレートを用意し、細かい調整を行いました。



HTMLタグを AMP 用に置き換えるときに苦労したこと

画像 ( img ) や フレーム ( iframe ) などは、それぞれ対応したタグに置き換えなければならないので、テンプレート上にて処理を記述します。
何度も繰り返しになりますが、タグの制限などが厳しいため、間違いがあると、デベロッパーモードにて、すぐにエラーが出てしまいます。
URL の末尾に #development=1 を付与するとエラーチェックができます。

WordPress なので、 PHP の正規表現を駆使していくことになりますが、
iframe というタグだけても
  • 普通の iframe を amp-iframe へ置き換え
  • WordPress の記事埋め込みカード機能の iframe も amp-iframe へ置き換え
  • YouTube の埋め込み iframe は amp-youtube へ置き換え
といろいろあり、正規表現が苦手なので、分岐に苦労させられました。

正規表現作るときはいつもこちらのリファレンスとにらめっこ…。
PHP: preg_match() / JavaScript: match() 正規表現チェッカー ver3.0
http://okumocchi.jp/php/re.php




最初のインデックスまでに1日!

AMP 対応ページは元の記事にメタタグにて指定を行うので、即時に公開できるのですが、サイトマップや Fetch as Google を行ったとしても、Search Console の Accelerated Mobile Pages にてインデックスされるまでに1日かかりました。



検索結果に雷マーク!

また、インデックスされたとしても、話題性がない普通のブログ記事は、トップニュースには載らないようです。
今日だったら台風とか天気に関することを書いて、アクセスが伸びれば載るのかな?という感じだと思います。

でもでも、ちゃんとインデックスされれば、下記のように検索結果に雷マークが付与されます。
名称未設定-1 いい感じ!

また余談ですが、スマホ対応のラベルは撤回されました。
( ラベルがなくなっただけでランキングシグナルからは外れてません )
こちらが参考になると思います。
「スマホ対応」ラベルをGoogleが廃止!?モバイル検索結果から削除される・・・
https://www.peko.co.jp/seo/smartphone/sumaho-corresponding-label-google-abolition



エラーへの対処とまとめ

弊社の今までのブログ記事は、648件です。

毎日20件前後 AMP 対応ページがインデックスされ、
その中で1・2件ほどエラーが上がってきている ( PHP の置き換え漏れ、カバーできない範囲 ) のが現状です。

とりあえずの AMP 化対応はプラグインを使えばすぐに終わり、オリジナルなら半日か1日で終わるけど、その後の対応でエラーへの対処を図っていく必要があり、さらに今後の記事への品質管理も考えなければ ( AMP を意識した記事の書き方のマニュアルの整備など )、検索エンジンに対してよい評価がもらえないと思うので、今回の AMP 対応を通して仕組みづくりが大切で、大変なことだと学ぶことができました。

また、取り掛かり前と後では正規表現に関する知識もより一層蓄えることができたので、総じてプラスになったと感じております。

以上です。



過去の対応 or 導入しましたの記事

SEO最適化やアクセス数UP!ブログタイトルの付け方!

2014/09/08
閲覧所要時間:約2

こんにちはー、カワゾエ(@zoe)です。今回はホームページの新着情報や社長ブログ・スタッフブログなどのタイトルの付け方でSEO(検索エンジン最適化)効果UP・アクセス数UPにつなげる簡単なテクニックのお話です。


ブログや新着情報のタイトルをチェック!

新着情報サンプル

会社やお店のホームページには「新着情報」「お知らせ」「ブログ」など、情報を発信する機能があると思います。一度自分のホームページをチェックしてみましょう。各お知らせや記事のタイトルは上のサンプルのようになっていませんか?

これでは何についての情報なのか分かりづらく、クリックして読んでみようとは思いません。またSEOの観点からも望ましくありません。


SEOやユーザーを意識してタイトルを改善してみよう!

新着情報サンプル改善案

上のサンプルは「歯科医院」のホームページという想定でタイトルを少し改善してみました。院名の他にも、インプラント、定期検診、予防歯科、虫歯など、検索結果で上位表示されたいキーワードや、歯科(業種)に関係のあるキーワードをタイトルに含めます。
これにより検索エンジンに対して「このホームページ(ブログ)は歯科治療について有益な情報がたくさんある」ということをアピールし、検索結果の上位表示を狙います。

また”無料説明会”、”夏休み・アイス食べ過ぎ”といったユーザーにとって有益な情報・興味を持たれそうな情報がある場合は、それらを含めることもクリックされやすくする工夫になります。


さいごに

タイトルの付け方については、もっとたくさんのテクニックがありますが、簡単にできるはじめの一歩ということで実践してみてはいかがでしょうか。
もちろん、タイトル以外に記事の内容自体も大事です。また不自然にキーワードを多用しすぎるのは逆効果で、ペナルティを受ける可能性もありますのでその点はご注意ください。

ブログの記事にソーシャルボタンを付けたいんだけど

shuhei
2014/08/28
閲覧所要時間:約3

おはこんばんちは、にしむらです。

今年の夏は日照時間が少ないそうですが、暑いもんは暑いですよね。
どうせ暑いんだったら晴れてくれよ洗濯物干しにくいだろ!とか最近よく思ってます。

お盆は何してたかって?(聞いてない)
そんなことより大型アプデだ!(ゲマ並感)


閑話休題


弊社のトップページから直接記事に飛んでもらった人はお気付きかもしれませんが、現在記事の上下にソーシャルボタン達がずらっと並んでいるかと思います。
(一覧で見てる人は記事のタイトルをクリックしてみてくださいね)

今回はWordPressに簡単にこのソーシャルボタン達を入れてくれるプラグイン「WP Social Bookmarking Light」を、導入する際に起こった事をおりまぜながらご紹介したいと思います。

プラグインのインストール

管理画面のプラグイン新規追加で「WP Social Bookmarking Light」と検索するか、下記のページでDLしてアップしましょう。

WP Social Bookmarking Light

有効化してみると、あら簡単ソーシャルボタン達が
スクリーンショット(2014-08-27-16.13.16)
なんか残念な事になっていました。

問題解決:Facebookが表示されてない編

左メニュー設定の「WP Social Bookmarking Light」から管理メニューを開くと下図のような画面が表示されます。
一般設定については図を参照
スクリーンショット(2014-08-27-16.04.01)
追加したソーシャルボタンによって上部タブメニューが追加されますが、表示されないFB likeの設定をどんだけいじっても変化がありません。なんでや。

スクリーンショット(2014-08-27 18.02.53)
原因はFB likeではなくFBの方でした。
Versionを当たり障りのなさそうなiframeにした所無事に表示されました。

問題解決:css編

WP Social Bookmarking LightのcssはStyleのタブで管理されています。
デフォルトの状態でも十分使えると思いますが、カスタマイズしたい方は自力で頑張りましょう。

スクリーンショット(2014-08-27 18.18.10)
で、実際なんでこんな縦並びになっちゃってるかというと、要するにここのcssが読み込まれてないだけですね(白目
弊社のブログではオリジナルテーマを使っているので、おそらくこのプラグインに必要な記述が抜け落ちてしまっているのではないかと思われます。
まぁ読み込まれてないのなら読み込ませればいい。
というわけでこちらのcssをまるっとコピーしてテーマファイルのどこかに置いてしまいましょう。
置いたらそのcssを読み込むようにテーマに追記するだけですね!(荒っぽい)
と、そんなこんなで無事cssの方も解決しました。

まとめ

昨今のSNS普及率には目を見張るものがありますね。
特に若者世代では知り合いのほとんどが何かしらのSNSをやっているといった状況ではないでしょうか。
web業界ですとさらにその比率は高いのではないかと思われます。
こんなニッチな内容のブログでも、SNSで超有名人がイイねとかしてくれたらそれだけでアクセスがグンと伸びるような世の中です。(してもらえるとは言ってない)
ちょっとの手間でそんな機会ができるかもしれないソーシャルボタン。
まだ試して無い方は是非チャレンジしてみてはいかがでしょうか。

Yahoo!検索 第1位

2009/01/21
閲覧所要時間:約1

yahoosearch
ここ1年前くらいからなのですが、ヤフー検索にて「熊本 ホームページ制作」で
検索すると1位になってます☆

やっぱり一番上に表示されるのって嬉しいですね。
特に大したことはやってないですが(笑)、自社サイトで得た技術・情報は、日々お客様のホームページ制作時にフィードバックしていきます。

フロンティアビジョンのFacebook

デンタルWEB

求人情報

スタッフ紹介