2023年最新版: HTMLのheadの書き方、head内に記述する要素の総まとめ
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内に記述する要素の総まとめ -meta要素、link要素、ソーシャルサービス用の要素、ブラウザやスマホアプリ用の要素など
HTMLドキュメントのhead内に記述するmeta要素やlink要素、ソーシャルサービス用の要素、ブラウザ用の要素、スマホアプリ用の要素などをまとめた「HEAD」を紹介します。 HEAD -GitHub 翻訳するにあたりいくつか尋ねたところ、著者様はとてもいい人でした。 公開当初から内容がアップデートされ、ライセンスもCC0に変更されています。 オススメの最小限の構成 要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 スマホアプリ関連のhead内の要素 メモ オススメの最小限の構成 下記は、head内に記述する最小限のタグです。
ウェブサイトで事前レンダリングする方法
ウェブサイトで事前レンダリングする方法を紹介します。 １．はじめに 先日発表された、モバイルウェブ高速化を目的としたプロジェクト「AMP」の記事を読んでいたところ、事前レンダリングという手法が使われていることを知りました。 AMPプロジェクト ということで、本エントリーで事前レンダリングについて紹介します。 ２．事前レンダリングとは 事前レンダリング（Prerendering）とは単語が示すとおり、あるページを表示している間に別のページの読み込みとレンダリング実行するものです。 Google検索では、検索結果の1番目に表示されたサイトは、この仕組みを使って事前レンダリングされています。 ３．ウェブサイトで事前レンダリングする ウェブサイトで事前レンダリングするには、ページに下記のlink要素をページに埋め込みます。 <link rel="prerender" href="http://us
Medium – Where good ideas find you.
A place to read, write, and deepen your understanding
ipadのviewportって厄介？ - sukceson’s diary
viewportって、画面幅表示、最大拡大率2倍にしてるけど、 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes"> これだとipadでうまくいかなかった！ 縦表示から横表示に傾けると、コンテンツが画面をはみ出てしまった。 initial-scale=1.0をとるとうまくいくけど、 それだとスマホで、画面を横に向けた時の、文字サイズが大きすぎて、 すごく気になる！ ということで、ipadのときだけ、initial-scaleの指定を取ることにしたけど・・・・ var ua = navigator.userAgent; var tabletFlg = (ua.indexOf('Android') > 0 && ua.indexOf
blog.鶯梭庵/links/たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる
二〇一三年 長月 廿五日 水曜日 ■ たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる [/links] この記事は書かれてから1年以上経過しています。内容が古くなっている可能性があります。コメントの受付は終了しました。 この記事は古くなっています。改訂版があります。 ウェブサイトをスマートフォンに対応させるために <meta name="viewport" content="..."> と指定することは、多くの人が知っていると思う。しかし、content の中身を何にするべきか本当に理解している人は、日本ではごく少ないようだ（かくいう私もつい最近まで理解していなかったのだから、大きなことは言えない）。 試しに「meta viewport」を Google で検索すると、以下のページが上位に出てくる。 Quick Tip: Don't Forget the Vi
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
いま改めてWordPressとOGPについて考える
「WordPress Advent Calendar 2011」も半分を折り返してしまいました。 ということは、今年は残り半月も無いわけですね、恐ろしいですね; どうも、@anticyborg さんからバトンをうけました @kamiyam です。 WordPressについて WordPressはその多機能さもさることながら、やはり大きな特徴は非常に活発なコミュニティーの存在ではないでしょうか。 また、最近では Twitter、FacebookなどのSNSを始めとしたソーシャルグラフが非常に有用で、そのつながりから沢山の情報を得ることが多くなってきました。 そこで OGPを正しく設定して情報を有効に伝えましょう。というのが今回のお話です。 Open Graph Protocol OGP ( Open Graph Protocol )は 指定したURLコンテンツの内容をあらわす情報とその仕組み
WordPressをFacebookのOGPに対応させる
前回のソーシャルボタンを追加しようと思ったときに 当然その方法を探すために、ググっていろいろなサイトを見たわけですが、 その中に「いいね！ボタンを付けるなら、OGP対策をしないと意味ないよ」的な情報を見ました。 OGPって何？ The Open Graph protocol フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か – IT戦記 つまり、いいね！やシェアしたときに、いい感じにしてくれるらしい。（よく分かってない） まずは、OGP対策前に試しにいいね！ボタンをクリックしてみました。 Facebookのウォールには以下のように表示されました。（1ヶ月くらい前の画像で申し訳ない） アイキャッチ画像が何故か「はてブ」のアイコンになってるし、 記事の概要ではなく、サイトの説明（WordPressでいうところのキャッチフレーズ）だし、
WordPressで簡単にOGPタグを実装できるWP-OGPプラグインを設定画面付きに改造してみた。
利用したいと思っている人 Commented on 2011.08.25 12:57 管理画面で設定を変更しても「保存」ができないです。本家の場合、「SaveOption」というボタンがありますが、このカスタマイズ版はそのボタンが見当たりません。どうやって変更した設定を保存するのでしょうか。こちらWP2.9を利用しています。 家富 正幸 Commented on 2011.08.28 05:02 ごめんなさい、本プラグインはWordPress3.0以上からの対応となります。 記事に仕様が書いてありませんでした、せっかくダウンロード下さったのに申し訳ありません。 noisecat Blog - WordPressでソーシャルブックマークボタンとOGP設定 Pingbacked on 2011.11.14 00:46 [...] WordPress tweetmeme_url = 'http:
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TwitterカードやOGPなど、head内のmetaに記述するコードを簡単に生成できるオンラインサービス -Hey Meta