HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「HEAD」を紹介します。 HEAD: A simple guide to HTML <head> elements 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 以前の版からいろいろと変更されています。 2016年版: head内に記述する要素の総まとめ 2018年版: head内に記述する要素の総まとめ head内に記述する最小限の構成 head内の要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 メモ head内に記述する最小限の構成 下記はシンプルなWebサイトで必須となるhead内に記
head内に記述する要素の順番はページのパフォーマンスに影響を与える可能性があります。記述の順番が間違っている要素を特定し、プライオリティが高い順にしてくれるツールを紹介します。 指定したページのhead内の各要素とその重みをリスト化し、プライオリティが高い順に並び替えたものもリスト化してくれます。 2023年最新版: HTMLのheadの書き方、head内に記述する要素の総まとめ capo.jsの使い方 capo.jsを実際に使ってみた capo.jsの使い方 capo.jsを使用するには、2通りの方法があります。 デベロッパーツールのスニペットで実行する ブックマークレットで実行する 手順は簡単です。 capo.jsのJavaScriptをコピーします。 コピーしたJavaScriptをデベロッパーツールのスニペットで実行するか、ブックマークレットを作成します。 ※ブックマークレットは
一度サイトを作ってしまうと、あまり見直すことのないheadタグ内の記述。新たなLPを作ったりする時でも、以前作ったもののコピペで何も考えずに作ってしまうのですが、SEO対策を見直してるうちに、今後のことも考えて順番等もきちんと考えた雛形（テンプレート）を作っておこうかな。という気になったので作ってみました。 ＜head＞タグの雛形（テンプレート）<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <meta name="robots" content="index, follow"> <title>【 １：title 】</title> <meta name="description" content="【 ２：description 】"> <meta name="keywor
概要 Next.js + TypeScriptプロジェクトで出来る超シンプルなSEO対策をご紹介します。 デプロイ先はVercelとなります。 今回は、Open Graph Protocolを利用してSNSでシェアするときに画像付きに出来てリッチな感じに出来るようになりましょうの回です。 SEO対策は多岐に渡り、飛びつける最適解がないので迷いますよね・・・・(´･ω･`) SEOとは Search Engine Optimization(検索エンジン最適化)の略称になります。 Webサイトを上位表示させる為に不可欠な項目です。 Open Graph Protocolとは Open GraphはFacebookによって作成されたプロトコルです。 Open Graphを使用すると、Webページのコンテンツを最適化して、ユーザーがメインのソーシャルネットワークFacebook、Twitter、L
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2023年最新版: HTMLのheadの書き方、head内に記述する要素の総まとめ
head内の各要素とその重みをリスト化し、プライオリティが高い順に並べ替えてくれるツール -capo.js
＜head＞タグの記述例＝順番等もきちんと考えた雛形（テンプレート）
Next.js + TypeScriptで簡単なSEO対策をしてみる