はてなブックマーク

Google Googleアプリのディスカバー（Discover）、クロームの「おすすめの記事」に前回のブログ記事が初めて掲載されました。 「Google砲」の効果、「スマニュー砲」とのちがい、掲載された理由、参照元googleapis、Google砲の狙いかたなどについて、まとめました。 ナゾの参照元「googleapis.com」 スマニュー砲とのちがい Google砲は狙えるのか？ サイトの作りこみ、構成・見出し等、情報のまとめかた アイコン等の画像がある すでに特定のジャンルで評価を受けている クローラーにインデックスされている AMP対応を完了させている 狭い領域に特化した記事内容 トレンド感のあるテーマ ユーザーの興味を持ちそうな情報 SNS等で告知、短時間にアクセスを集中させる Twitter はてなブックマーク ユーザー満足度が考慮されている アプリ内CTR（クリック率）

ブログ開始2カ月半と少しの初心者ブロガーが、無料版はてなブログでGoogleアドセンスの審査に合格することができました。 合格時のブログ状況や、合格までにやったことをまとめました。 ブログ初心者、開始82日目で合格 合格まで4回審査に申請 合格時のブログの状況など アクセス数 記事のしぼりこみ 記事の文字数 ほかのアフィリエイトリンク 再申請までの期間 申請回数は少ない方がいい？ 初ブログ、初合格 「PRO版にして独自ドメインの取得」は不要 Googleアナリティクスの利用、Googleサーチコンソールとのひも付け Googleサーチコンソールに記事を手動でインデックス サイトマップの追加 Googleタグマネージャの利用 合格までにやったこと プライバシー・ポリシーページ お問い合わせページ 自己紹介ページ わたしが考える、いちばんの不合格理由 無料版はてなブログとアドセンスの相性の問題

SEO Webサイト（ブログ）のページスピード（表示速度）を改善することは、SEO対策として重要な要素です。画像イメージを遅れて読み込ませることにより、サイトアクセス時のダウンロード容量を抑え、ページスピードを向上させることができます。 それには、IntersectionObserverというJavaScript機能を使います。今回は、IntersectionObserverの導入方法についての投稿です。 CONTENTS IntersectionObserverの導入方法 JavaScriptコードをフッタに貼り付け 画像の HTMLコードを書き換え HTMLを一括で書き換える手順 title属性が付与されている場合 title属性とalt属性 titleは不要？ altは指定したほうが良い おわりに 主な手順とポイント 前回の投稿で、ページスピード（表示速度）を改善する施策のひとつとし

ブログなどWebサイトのページスピード（表示速度）について。 測定の仕方や、表示スピードアップの方法、SEO的な影響を調べました。 SEO的な影響 ページスピードが遅いほど直帰率が高くなる 直帰率は検索順位に関係ない SEOの目的 ページスピードの測定方法 ページスピードの改善方法 画像の圧縮 コードのminify（ミニファイ）化 画像の遅延読み込み さいごに SEO的な影響 ページスピードが遅いほど直帰率が高くなる 一般に、ページの表示にかかる読み込み速度は3秒未満が適切と言われているようです。 ページ表示速度の影響を理解して高速化しよう｜ferret ページ読み込みは「2秒以内」に - 3秒待てないモバイルユーザー、画像圧縮で表示速度改善を | Beyond（ビヨンド） ページスピードが遅いほど、ユーザーのストレスとなり、ページを見る前に閉じられてしまう率は高まるようです。 つまり、表

検索結果で上位に表示されるブログの記事タイトルの付け方について、考えてみました。 記事本文中で使っているワードごとの使用回数をPythonで抽出してタイトルとの整合性をとり、UbersuggestでSEO対策に有利なキーワードを選出。 また、最適な文字数は「32」と言われていますが・・じっさいは？ 記事タイトルの見直し 記事タイトルの付け方 Pythonで形態素解析 コードの実行 Ubersuggestでキーワードを選ぶ 記事タイトル32文字論 記事タイトルを決定する おわりに 記事タイトルの見直し ブログを始めて約2か月、投稿数も30を超えました。 いろいろとブログをやるうちにわかってきたこと、知ったことがあって、そのひとつがブログ記事タイトルの付け方です。 ブログを書きはじめたころは、SEO対策（検索結果の上位に表示されるようにする対策）という視点があまりなかったので、記事タイトルの文

Googleアナリティクスのデフォルト設定では、外部サイトへのリンクは計測できません。 計測するにはイベントトラッキングの設定が必要となりますが、Googleタグマネージャを使えばかんたんに設定ができます。 外部リンクを取得する イベントトラッキングの設定 ①変数の設定 ②トリガーの設定 ③タグの設定 プレビューモードでテスト 発火（稼働）の確認方法 取得データを閲覧 クリックの内訳を知るには 自分のアクセスを除外する ローカルストレージを利用した方法 まとめと感想 外部リンクを取得する 前回の投稿では、スマホ画面用に設置したボトムナビゲーション（画像）の効果を見るため、Googleタグマネージャを利用してイベントトラッキングの設定をしました。 イベントトラッキングとは 今回はひきつづき、外部へのリンクのクリックを設定します。 外部へのリンクのクリックは、ページの遷移をともなわない行動のた

Googleタグマネージャを使えば、イベントトラッキングをかんたんに設定できます。 イベントトラッキングを設定することで、Googleアナリティクスのデフォルト設定では見ることができないデータの計測が可能になり、アクセス解析の幅が広がります。 リニューアルしたメニューの効果測定 イベントトラッキングとは 効果測定の準備 Googleタグマネージャの設置方法 ①Googleタグマネージャにログイン ②アカウントを新規作成 ③コンテナの設定 ④コンテナIDをコピー ⑤はてなブログに貼り付け イベントトラッキングの設定 ①変数を設定 ②タグを設定 ③トリガーを設定 ④HTMLを編集 データの確認 クリックの内訳を知るには まとめ 番外：おすすめグッズ リニューアルしたメニューの効果測定 前回の投稿では、ブログのスマホ対応ということで、グローバルメニューをボトムナビゲーションに変更しました。 ru

ブログのスマホ対応について。 スマホ表示のとき、メニューをいちばん下に固定して、グローバルナビゲーションを使いやすいデザインに変更しました。 どれくらい効果があるか、Googleアナリティクスのイベントトラッキングを使って検証します。 読者の3分の2はスマホから ハンバーガーメニューについて Googleアナリティクスの数値 変更理由と効果測定 ボトムナビゲーションの実装 メニューを増やす場合 効果測定の準備は次回に 読者の3分の2はスマホから Googleアナリティクスの数値から、わたしのブログの約65%が、スマホから見ていただいてることを最近、知りました。 「スマニュー砲」があった11日のデータは外しています。rubirubi.hateblo.jp タブレットが約3~4%、つまり、デスクトップ（PC）の比率は全体の3分の1以下です。 ※データは、Googleアナリティクスの[オーディエ

Photo by  Hitesh Choudhary  on  Unsplash 相互リツイートを確実にしたい。 ツイッターで、相互リツイートの約束を確実に返したいと思い、お返しできる方法を考えてみました。 Python × Twitter API でユーザー一覧の取得、SeleniumBasic で連続スクショ貼り付けなど。 相互リツイートを確実にしたい Python × Twitter API でユーザー一覧の取得 ソースコード ライブラリについて SeleniumBasic で連続スクショ貼り付け ソースコード Excelの編集 ユーザーリストをExcel シートに貼り付け プログラムの実行ボタンを設置 プログラムの実行 Excel で確認 まとめ・感想など 相互リツイートを確実にしたい Twitter で、リツイートをもらったお礼としてリツイートのお返しを約束したけれど、思いのほか

Google Adsense はてなブログ無料版でGoogle アドセンスの審査に申請しました。…が、、結果は不合格。理由と対策について、まとめました。 PageSpeed Insights（ページスピードインサイト）、IntersectionObserver（インターセクションオブザーバー）でのブログ改善のことなど。 アドセンス審査に申請、不承認 改善策をヘルプフォーラムで質問 トップ > アーカイブを排除 画像サイズが大きいため、ページの表示速度が遅い →PageSpeed Insights でWeb 表示速度を測定 →画像のリサイズ、圧縮 →画像の遅延読み込み IntersectionObserver Create Link alt属性について（2019-09-12追記） 記事が少ないカテゴリー まとめと感想 動画紹介 サイトが承認されるには？：Google AdSense 書籍紹介

URLのリストから連続してWebページのスクショを撮り、Excelに貼り付けていく作業を自動化します。SeleniumBasic(旧Selenium VBA)を使います。 ここのところ日差しめちゃ強い！外出に日よけ対策必須ですね。 最近、クラウドワークスさんで下記のようなお仕事の募集案件がありました。 「Selenium VBAを使って自動でブラウザーを操作してスクショをExcelに張り付けるサンプル実装」 これをじっさいの実務として実装してみるつもりで、Seleniumの勉強がてら、試しにやってみました。 Selenium VBAとは、Google ChromeやFireFoxなどのWebブラウザを自動操作できるExcelのVBAライブラリのことです。 SeleniumはPythonにもあるライブラリですが、それのマクロ（VBA）版、といったところでしょうか。 SeleniumBasic

Googleの無料ブログサービス、Bloggerについて。Twitterカード、SNSソーシャルボタン、トップへ戻るボタンの設定・設置方法を紹介しています。 前回に引き続き、Googleブロガーについて。 今回は、Twitterカード、SNSソーシャルボタン、トップへ戻るボタンの設定・設置のやり方を、ご紹介します。 Twitterカードの設定 SNSソーシャル共有ボタンの設置 忍者おまとめボタンの設置方法 ’トップに戻るボタン’の設置 'トップに戻るボタン'の設置方法 ①JQueryの準備 ②CSSでボタンをデザイン ③JQueryコードの追加 Twitterカードの設定 Twitterカードとは、自分のブログ記事がツイッターで共有されたとき、画像・タイトル・説明文がカードのように表示される機能です。 ※ちなみに、現時点で自分の記事がTwitterに共有されたとき、どのように表示されるのか

Googleの無料ブログサービス、Bloggerの紹介です。始め方、おすすめのテンプレート、ワードプレスからの移転、使い方など。 今回は、Google Bloggerの紹介です。 Bloggerは、思ったより使いやすい Bloggerを使うメリット Bloggerの始め方 おすすめのテンプレート テンプレートの適用 WordPressから、Bloggerへの引っ越し① ①WordPressからデータをエクスポート ②エクスポートしたXMLファイルをBlogger用に変換 ③変換したファイルをBloggerにインポート WordPressから、Bloggerへの引っ越し② 引っ越し後にやるべきこと その他、カスタマイズ等 もくじを設定するには 記事の公開後、パーマリンクを再度変更するには ブログカードを埋め込むには Bloggerは、思ったより使いやすい Bloggerは、Googleが提供

Pythonの勉強／インフルエンサーとは？ Twitterアカウントからスクレイピングで最近の200ツイートを抽出し、分析します。【Pythonでできること】 Pythonでできること インフルエンサーとは 有名人のTwitterアカウントから、最近のツイートをスクレイピング Pythonを使うには？ Twitteer APIの承認 コードの使い方 Twitterアカウントの貼り付け スクレイピングしたツイートを、janomeで形態素解析 Word Cloudで可視化 Pythonでできること 今回は、ひさびさにPythonを使って、何かやりたいと思いまして。 「Python」という言葉を、Ubersuggestでキーワード候補検索すると、、 できること 入門 学習 勉強 などの言葉が候補のなかでSEO的に効果がありそうだったので、いつかどなたかに読んでもらえることを願って、、この辺の言葉

Ubersuggestを使って、SERP分析をしてみました。 Serpscopeというツールのこと、はてなブログでブログを始めて良かった理由について、書いてます。 ツールっていろいろ。Ubersuggest→「SERP」→Serposcope はてなブログ界のレジェンド！？発見 ツールっていろいろ。Ubersuggest→「SERP」→Serposcope 今回は、SERP 分析を行ってみようと思います。分析、ってほどでもないかもですが。 SERP（サープ）とはSearch Engine Result Page の略で、Google などで検索した結果のページのことです。 今回も、お気に入りの便利な無料SEO ツール「Ubersuggest」を、使います。 neilpatel.com まずはキーワード候補、そのままですが「SERP」と入れてみます。 検索ボリュームは少ないですね。CPC（G

はてなブログテーマ「Innocent」をカスタマイズして、前回の投稿で設置したグローバルメニューの色を変更しました。 背景・文字の色の変更と、背景色の透過、マウスオーバー時に色を変化させる方法について。 メニューの色を変える メニューの背景色を透過させる マウスオーバー時に色を変化させる 前回は、はてなブログテーマ「Innocent」でグローバルメニューを作成しました。 rubirubi.hateblo.jp そのままでも十分、よくなったのですが、すこしシンプルな気もします。シンプルが好きなかたは、このままでもよさそうですね♪ もともと、はてなブログテーマ「Innocent」は、カスタマイズを前提としてシンプルにつくられているみたいなんですよね。 はるなぴさんのブログより ブログのイメージチェンジや、ちょっとした気分転換に、グローバルメニューの色を変えてみてはいかがでしょうか(*^^*)