些細な日常

投稿

Bloggerブログで記事のラベルを中心に構造化データのkeywordsとして追加するSEO対策

結城永人 - 2018年9月23日 (日)

構造化データにkeywordsを追加してSEO（検索エンジン最適化）対策に効果的かどうかは定かではない。かつてmetaタグのkeywordsにサイト内容と無関係なキーワードを記載したサイトによって検索結果が混乱したという経緯からGoogleなどの主要な検索エンジンはサイトのmetaタグのkeywordsを完全に読み込まなくなってしまっているんだ。 SEO対策でサイト内容の他にキーワードを検索エンジンに伝えるように取り計らっても仕様がないかも知れないけれども何かの役に立たないともかぎらないから構造化データのkeywordsを使ってみたいと感じる。 metaタグのkeywordsは間違いなく無理だし、使ってもSEO効果は皆無にせよ、構造化データのkeywordsは同じではない。ひょっとしたらGoogleなどの主要な検索エンジンがサイト内容に読み込むか、またはサイト評価に多少とも加味する可…

BloggerのJSON-LDの構造化データのpublisherをブログ自体に合わせる

結城永人 - 2018年9月20日 (木)

Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableは記事毎にJSON-LDの構造化データが付いていてGoogleなどの検索エンジンがサイト内容を通常よりも認識し易くなっている。ブログのテンプレートのソースコードからマークアップを確認してみるとpublisher（公開主）がBloggerになっていてさらに画像なしの場合の画像にBloggerのロゴが記載されるのもちょっと気がかりなんだ。 Bloggerを使っているから間違いではないにせよ、ブログ自体には一致してないわけで、どちらもブログ自体に合わせてカスタマイズしたいと感じてしまう。A man who began doing parkour cartwheel on the grass by farioff [CC0], via Pixabay 検索エンジンからのアクセスアップのSEO（検…

JavaScriptの画像などの読み込みが遅い場合に使いたいpreloadのソースコード

結城永人 - 2018年9月16日 (日)

ボタンで複数の画像を切り替える方法をやってみたら二枚目以降の画像の読み込みが遅くて参った。何とかならないかと調べてみたらhtmlの「rel="preload"」を使うと助かると分かった。ファイル毎のブラウザの先読みを可能にするからJavaScriptで後から必要な画像などが直ぐに表示できるようになるんだ。二枚目へ進む二枚目の画像にpreloadを指定していて非表示でもサイトの閲覧と同時にブラウザに読み込まれるためにJavaScriptの切り替えボタンから待ち時間なしに表示される。 preloadに対応する十二のファイルaudio：音楽video：動画track：字幕script：JavaScriptstylesheet：cssfont：フォントimage：画像fetch crossorigin：XHR／fetchworker：Worker／SharedWorkerem…

JavaScriptの繰り返しボタン：押した回数を数えて実行結果を元に戻すプログラム

結城永人 - 2018年9月13日 (木)

サイトのボタンはhtmlのinputやbuttonとJavaScriptのonclickを組み合わせて実装できる。後者のプログラムが前者を押して発動するようになる。JavaScriptのonclickはイベントハンドラと呼ばれてhtmlのinputやbuttonの開始タグに他の属性と同じように記載すれば機能する。 onclick自体はhtmlの様々な要素に使えるから例えば画像のimgに組み込んだり、inputやbutton以外のデザインのボタンもspanなどにcssを付けて作成できるだろう。 htmlとJavaScriptでボタンを作成する押すと画像が二枚目に切り替わる。サンプルのソースコード html<img id="change-images" src="一枚目の画像URL" data-second-image="二枚目の…

JavaScriptでhtmlを書き換えるinnerHTML

結城永人 - 2018年9月11日 (火)

htmlのマークアップをJavaScriptのプログラミングで書き換える、またはサイトのソースコードを置き換えるにはinnerHTMLが良く使われる。 Element.innerHTML プロパティは、要素の子孫を記述する HTML 構文を設定または取得します。 element.innerHTML via MDN innerHTMLはElementインターフェースのDOMString（文字列）型のプロパティで、サイト上の要素内容のマークアップを表す。 JavaScriptでは他にも似たようなプロパティのinnerTextやtextContentがあって――どちらもNodeインターフェースのDOMString型に含まれる――プレーンテキスト（htmlタグなどのマークアップ言語を含まない）を設定取得できる。双方にはcssで非表示のコンテンツを知覚するかしないなどの細かい違いがあるけれども機…

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

結城永人 - 2018年9月9日 (日)

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