スキップしてメイン コンテンツに移動
ラベル(リンク)が付いた投稿を表示しています すべて表示

サイトのGoogle検索へのインデックスを向上して検索結果に表示し易くしよう

イメージ

サイトがGoogle検索に表示されない原因は大きく分けて二つある。 一つはインデックスされず、Googleにサイト内容が把握されてない。もう一つはランキングが低く、インデックスされたページがあってもサイト評価が低くて検索結果の順位を落とされるか消されている。 ランキングの向上に関しては余りはっきりしたことはいい難いし、Google検索のサイト評価がどのように行われるかはGoogleの関係者も分からないくらい複雑怪奇な面がある。個人的に 公式の検索エンジン最適化(SEO)スターターガイドが最も信頼できる と思う。ランキングの方向性(何が良くて何が悪いか)がGoogle検索の視点から示されているからたとえランキングが更新されても付いて行けるようなサイト運営が可能になるに違いない。 本稿ではインデックスの向上を考える。ランキングと違って決められたことをやれば大丈夫だから遥かに簡単なんだけれども偶に落とし…

HTMLの画像のimgや動画のiframeの下の隙間を消して文章やリンクと整えるCSS

イメージ

サイトで画像や動画に文章を続けると隙間が多めに付いたり、囲うリンクが大き過ぎて画像や動画の下が余ったりしてデザインが崩れることがある。枠線や余白を消しても現れて悩まされるけれども対処法が分かったので、どうすれば余分な隙間を消し去って画像や動画のデザインを次の文章やリンクの大きさと整えられるかを纏める。 画像や動画が周りの要素とずれる原因 サイトの画像や動画が周りの要素とずれる原因はHTMLの画像を表示するimgタグや動画を表示するiframeタグの扱いが影響している。 imgとiframeは改行なしの要素で、縦位置がベースラインとなり、次の列の要素との間に僅かな空間が取られる。 日本語にはないけれども例えば英語では「g」と「j」と「p」と「q」と「y」の文字が本体よりも下に伸びるところがベースラインの下になる。 HTMLでそうしたベースラインの下が画像のimgタグや動画のiframeの下の隙間に相…

スマホでタップすると光るリンクの色と形のデザイン

イメージ

スマホでサイトのリンクをタップすると青く光る。調べると使用中のブラウザが影響しているようで、リンクの光の色と形がそれぞれで、何も起こらないものもある。僕はAndroidのChromeで気付いたけれどもiPhoneのSafariでもリンクのタップした瞬間の光が付けられている。その他、Edgeなども対応している。サイトのリンクのデザインとしてハイライトカラーと呼ばれる。 スマホのハイライトカラーはパソコンのマウスのカーソルに相当するもので、サイト作成ではリンクのクリックの効果として等しく扱うことができる。 リンクの光の色を変更する方法 CSSにスマホのハイライトカラーを変更するマークアップがある。 -webkit-tap-highlight-color スマホのリンクのハイライトカラー 通常のcolor/色やbackground-color/背景色のように色名や色コードの値を指定してデザインを付けられる…

Bloggerの投稿画像の種類とサイズ/容量と画像URLについて

イメージ

Bloggerの管理画面が2020年9月から刷新されて投稿画像の出方が幾らか変わったから改めて纏めておきたい。 目次 四種類の投稿の仕方とそれぞれの最大幅 Bloggerの投稿画像のサイズ毎の圧縮の目安 画像URLで投稿画像のサイズを変更する方法 Bloggerの投稿画像のサンプルのソースコード Bloggerのimgタグのサンプルのソースコード Bloggerの画像URLのサイズ指定のパターン 画像URLでWebPファイルに変更する方法 webpファイルとその他の振り分けの仕方 四種類の投稿の仕方とそれぞれの最大幅 投稿画像の選択 via Blogger パソコンからアップロード:デバイス(パソコン、スマホ、タブレットなど)から掲載する フォト:Googleフォトのギャラリーかアルバムから掲載する Blogger:Blogger(Bloggerに以前に取り込んだ画像)かGoogleアルバムアーカイブ(Blogg…

無限スクロールを作成する:JavaScriptのIntersection ObserverにFetchを組み込んだプログラム

イメージ

サイトの無限スクロールのプログラムのアイデアは大きく二つの部分に分けられる。一つは要素判定で、今のページが画面のどこまで来たら次のページを表示するように動作するかを決める。もう一つは生成処理で、次のページをAjax通信でサーバーから読み込んで今のページに実際に追加する。JavaScriptのプログラムで前者に正しく画面と要素の交差を監視できて最適な Intersection Observer API 、後者にAjax通信の時間差の難点も克服できて便利な Fetch API を使って無限スクロールを作成する方法を取り上げる。 無限スクロールのプログラムの基本的な流れ Brown grasses under white clouds at daytime by Glenn Carstens-Peters  on Unsplash 通常、同じデザインのページがページネーションのリンクで幾つも続いて行くのを無…

Bloggerの投稿の投稿の設定:ラベルとスケジュール/公開とパーマリンクと検索向け説明と場所とオプションについて

イメージ

CSSのscroll-behaviorのsmoothでページ内のスクロールイベントにゆっくり遅らせるアニメーションを付ける

イメージ

今までブログに 目次のジャンプリンク や フローティングの戻るボタン を設置して来た。HTMLのリンクタグのaを使ってページ内のidを持たせた場所へ移動するように作成しているけど、ところが何もしないままのデザインだと一瞬で、目的地に着いてしまって周りが文字だらけならばそれこそ雰囲気が殆ど変わらないために自分はどこにいるのか、リンクを使ってページ内を本当に移動したのかどうかが分かり兼ねる。 少しでも混乱しないために、または折角と設置したはずの目次のジャンプリンクやフローティングの戻るボタンを気持ち良く使うというサイトのUX(User Experience/利用者の体験)を向上させるべく、ページ内を移動するスクロールイベントにゆっくり遅らせるアニメーションを付けるようにデザインを相応しく変えると良いと思う。 CSS の scroll-behavior のsmoothの使い方 サイトのスクロールイベントの経…

Bloggerブログで投稿の日付からアーカイブページへ記事タイトルから記事ページへリンクする方法

イメージ

僕がBloggerのテンプレートで最も不可解だと感じるのは記事の日付に記事ページへのリンクが付いている。およそ日付にリンクを付けるならば年別や月別などのアーカイブページへ向けなくてはピンと来ないだろう。 日付のリンクは目立たないし、殆ど誰も使わないようだから放っておいたけど――文字色などのデザインがリンクとは気付かないくらい他と変わらない――ただしSEO対策からすると検索エンジンが見ているのは間違いないので、アクセスアップのためにサイト評価を上げるべくは記事ページへのリンクを記事タイトルに付けて日付からはアーカイブページへ変更するのが望ましいと考える。 リンク名のアンカーテキストとリンク先のサイト内容が合ってないのは不正行為と判断される危険性を免れない。あからさまに無関係なリンクを貼れば使った訪問者から騙したともはや嫌われ兼ねないわけで、SEO対策でも検索エンジンでのサイト評価を下げる…

ソーシャルメディアでのサイトの宣伝効果はアクセス解析のリファラー/参照元のURLで分かる

イメージ

サイトのアクセスアップのためにソーシャルメディアへリンク付きの投稿を行う。 Social media by FirmBee [ CC0 ], via Pixabay 実際にどのくらい人が来るかはアクセス解析( Googleアナリティクス など)のリファラー/参照元にソーシャルメディアのURLが表示されるかどうか、そして表示されれば数によって投稿のリンクが、何回、押されて使われたかが分かる。 自分で行わず、他の誰かがサイトを共有した場合でも同じで、ソーシャルメディアでの宣伝効果がアクセス解析のリファラー/参照元には反映している。 主なソーシャルメディアのリファラー/参照元 Facebook /フェイスブック facebook.com(デスクトップ) m.facebook.com(モバイル) l.facebook.com(Link Shimのデスクトップ) lm.facebook.com(Link Shimのモバイル) …

Google+のコミュニティーに参加するサイトのアクセスアップのSEO対策の恩恵

イメージ

サイト運営で久方振りに人々との交流を積極的に開始した。以前は 詩のホームページ で掲示板を中心にやって大きく盛り上がったけれども自分自分の作家活動に支障を来すから優先順位を切り替えて訪問者とは受け取るメールやコメントに対応する程度の触れ合いしか求めなくなっていた。振り返ると十年くらいは完全に一人でやっているに等しい状態だった。気持ちは変わらないし、同じ過ちを繰り返さないために人々との交流を第一にサイト運営を行うつもりはないにせよ、もうちょっと触れ合いを増やしたいと思い直したんだ。 Google+ (2019年4月にサービス終了)のコミュニティーのBlogger 初心者の集いに参加した 目下、ブログのアクセスアップに四苦八苦する毎日だし、人々との交流は知名度を上げるためにはそれこそ正しく最も効果的な方法だからブログ運営に取り入れなくては勿体ないのは明らかだ。 以前から積極的に開始するべきだと感じていた…

はてなブックマークは被リンク/ページランクのSEO効果は高いから投稿しよう

イメージ

コンテンツSEOの核心はキーワードへの情報を的確に載せておくサイト作成だ

イメージ

ブログの内部リンクをクローラーが数多く辿ったら検索エンジンからの訪問者が増えた

イメージ

昨日、ブログのアクセスが一日二百人を越えた。順調に成長していると 数週間振りの喜び を味わっている。たぶん ラベルページへの検索エンジンのクロールを容認した のが最大の要因だろう。リンクが知られて ページランク がラベルページから記事ページへ流れ始めたとするとGoogle検索に好かれるのは正しく尤もではないか。検索エンジンから記事ページに訪問者が増えているからページランクこそ強力な力を発揮しているに違いない。 平均ページの滞在時間 も記事ページの下段に 人気の投稿の表示を増やして からしっかり延びて一分を越え続けているし、 記事名の下に著者名を付けた のも 著者のオーソリティー に好影響を与えながら何れも検索エンジンでのサイト評価を上げていると思う。 クロールの統計情報 via Search Console Search Consoleで クローラーの平均巡回数 が激増している。ラベルページのクローラーの拒否を止めたのが切…

Search Consoleのインデックス登録の対象範囲のエラーと有効(警告あり)と有効と除外の四項目について

イメージ

GoogleのSearch Consoleのデザインが刷新されてスマホ/タブレットのモバイル対応で表示されるようになった。僕はパソコンを使わないので、従来よりも遥かに見易いのが気に入っている。 新しい Search Console は、ゼロからの再構築となりました。これは、可能な限り実用性のあるインサイトをユーザーに提供し、それらに沿ったガイドを行うことで、あらゆる未解決の問題をユーザー自身が解決できるような相互に作用する問題解決モデルを構築するためです。社内のコラボレーションをシンプルにするために、ご自身の組織内でレポートを共有する機能も追加しました。 新しい Search Console をご紹介します via ウェブマスター向け公式ブログ 使える機能はまだベータ版で十分に出揃ってないけど、しかし検索エンジンへのインデックスの状況が一覧表示されるようになったインデックス登録の対象範囲が便利…

ブログに人気の投稿の表示を増やして訪問者と検索エンジンを一挙に引き付けるべきだ

イメージ

画像や動画などのヴィジュアルコンテンツは訪問者を大きく引き付けて被リンクを増やす

イメージ

十月下旬で今年も後二ヵ月しかない。辛いのはブログのアクセスが予定通りに伸びるかどうか。年内に一日数百人を達成したい。 Black and white woman by felixheidrich91 [ CC0 ], via Pixabay 今月に入ってからやっと訪問者が一日百人を越え続けている。Googleでの表示回数が千回を確実に越えていて クリック数が百回を偶に越えている という状況だ。 ブログを開設して十ヵ月で一日百人のアクセスだから平均すれば一ヵ月に十人ずつ増えているわけで、 サイト広告で生活費を稼ぐには一日何千何万のアクセスが必要 なのに何年もかかるのでは伸び率が悪過ぎて死んでしまうんだ――。 人気ブロガーの イケダハヤト や まなしば にはなれないのか。あちこち宣伝して回りながら人々の注目を集めるのは大変で、やっても上手く行くかどうかは本当に難しいし、結局は検索エンジンの検索結果で頭角を表すのが先決な…