URLを間違えたので正しくリダイレクトさせるJavaScript (はてなブログの場合)
よくやってしまいがちな日本語タイトルのままのブログ記事投稿。
一応モダンブラウザだと問題なく日本語URLで表示されますが、サーチコンソールでチェックしづらく、SEO的にもイマイチそうな文字化けの可能性があるURLになってしまいます。
ですので、気づいたらURLを正しく半角英数の自然なものに変更し、JavaScriptを使ってリダイレクトさせています。
その際につけてもらったはてなスターが消えてしまうのは残念で申し訳ないところではありますが、いた仕方無し。
具体的な方法を知りたい方は是非当記事をご覧頂ければ幸いです。
【参考サイト】フリースタイルエンターテイメント
【検証・解説】Youtube埋め込みはサイト評価を下げる恐れ有り！要一工夫、読み込み遅延。
Web上での動画埋め込みといえばYoutube。
色々なサイトに埋め込まれて利用されてると思います。
ただ、こちら実はGoogleの提供している速度測定ツールよるとページ表示速度の評価を下げるという事実があります。
▼Youtube動画を２つと見出し・画像を埋め込んだページの測定結果。
▼Youtube動画無し、見出し複数と・画像を埋め込んだページの測定結果。
▼Google公式のページ速度評価測定ツール
結果は一目瞭然で、動画を2つ埋め込んだだけでPageSpeedInsightsのスコアは激減します。
そもそも当ブログは読み込み速度をさほど気にせず運営していますし、あくまでページの表示速度の問題なので、どこまでSEOに影響するかは微妙なところではあります。
とはいえ、ページの表示が遅いせいでのユーザーの離脱など、少なからず影響は考えられるので、本来はSEO対策として気にした方がいい部分でしょう。
そこで今回Youtube動画を埋め込む際に、評価スコアへの影響を下げるように動画を読み込ませる方法を解説したいと思います。
ページの速度改善に取り組まれてる方のお役に立てれば幸いです。
ではやっていきましょう。
続きを読むSlick.jsやSwiper.js等が全く動かず小一時間無駄にした話
Slick.jsや、当ブログでも解説記事を書いたSwiper.jsなどの便利なスライダープラグイン。
ウェブのフロントエンド制作においては必須クラスに重宝すると思います。
今日も、とある案件作業でlaravelアプリケーションのフロントエンドでサクッと使用しようと思って導入していたら
｢あれ？動かない、、、｣
コンソールを見てちょいちょい出てるエラーに対処しても動かず。
表題の通り、小一時間必死に調べて無駄に過ごしました。。
解説記事とか書いていた手前でお恥ずかしい。
原因はあっけないものでしたが、今後もし誰かが同じように小一時間を無駄に過ごす事の無いよう、備忘録として記しておこうと思います。
続きを読む【JavaScript】要素をコピーするボタンの作り方
たまに、ウェブ上で調べものをしてるとテキストをコピーするボタンってみかけますよね。
「これをコピペしてください。ボタンを押すとコピー出来ます」的な。
「」こういうアイコンと一緒に表示されてたりもしますね。
通常コピーしたい部分を選択してCtr+Cのショートカットキーでコピーできますが、この動作が面倒だったり、あまり慣れていない方向けにボタンでコピー出来るようにこういった方法がとられてたりすると思います。
実装にはJavaScriptを使うので、JSに慣れない方向けに解説してみたいと思います。
続きを読む【JavaScript】スクロールに合わせてふわっと表示させる方法 Part1-2.「AOS編 スクロール連動カスタムイベント」
前回、スクロールに合わせてふわっと表示させるJavaScriptのライブラリ
｢AOS (Animate On Scroll)｣
について導入、実装について解説しました。
AOSの標準機能だけでお手軽簡単にふわっとフェードインなどの効果が実装出来ますが、今回はその表示、または非表示になるタイミングにJavaScriptのイベントリスナを使用して、通常とは別の新しいカスタムイベント処理を追加する方法を解説します。
続きを読む
