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内に記
WEBページに設定しておくと良いHTTPヘッダとかメタタグとか - Qiita
header('Vary: User-Agent'); header('Vary: Accept-Encoding'); header('Vary: Accept-Language'); header('Vary: Cookie'); プロキシサーバなどのキャッシュを適切に行ってもらうために必要 UserAgentなどの条件によってコンテンツの内容が変わる場合は、別々にキャッシュしてもらう。 HTTP圧縮に対応しているなら、Accept-EncodingをつけるとブラウザがHTTP圧縮したコンテンツを受けてくれる。 参考 http://web-tan.forum.impressrd.jp/e/2013/05/17/15269 http://kaigai-hosting.com/opt_site-specify-vary-header.php Cache-Control: Webサーバから返
HEY META - Website Meta Tag Check
Why should websites include meta tags? Like it or not, your website will be searched for, bookmarked and shared online. No matter how good your content is, what matters is the first impression. Meta tags make sure your website shines right away. Show an image preview when shared online Take control over what search engines show/display Improve your SEO rating Four steps to awesome tags Easily chec
The Essential Meta Tags For Social Media | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! These days, almost every website encourages visitors to share its pages on social media. We’ve all seen the ubiquitous Facebook and Twitter icons, among others, just begging to be clicked. This comes as no surprise as sharing via social media, the internet incarnation of word-of-mouth, is on
head内に記述する要素の総まとめ -meta要素、link要素、ソーシャルサービス用の要素、ブラウザやスマホアプリ用の要素など
HTMLドキュメントのhead内に記述するmeta要素やlink要素、ソーシャルサービス用の要素、ブラウザ用の要素、スマホアプリ用の要素などをまとめた「HEAD」を紹介します。 HEAD -GitHub 翻訳するにあたりいくつか尋ねたところ、著者様はとてもいい人でした。 公開当初から内容がアップデートされ、ライセンスもCC0に変更されています。 オススメの最小限の構成 要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 スマホアプリ関連のhead内の要素 メモ オススメの最小限の構成 下記は、head内に記述する最小限のタグです。
robots.txtの書き方（保存版） » 海外SEO情報ブログ・メルマガ
今日は、いつか書こう書こうと思って、そのままにしておいた「robots.txt」にの書き方・書式について書きます。 robots.txtは「ロボッツ・テキスト」、または「ロボット・テキスト」と読みます。 robotではなく、robotsです。 robots.txtはサーチエンジンのクローラ（スパイダー）の、ファイルとディレクトリへのアクセスを制御するために使われます。 「secretsというディレクトリにあるファイルにはすべてアクセスさせたくない」とか、「himitsu.htmlというファイルだけはアクセスさせたくない」という使い方ができます。 「アクセスさせたくない」というのは、「インデックスさせたくない」すなわち「検索結果に表示させたくない」ということです。 「なぜ、検索結果に表示させたくないの？」と疑問に思うかもしれません。 さまざまなケースがあります。 たとえば、URLを自分が教え
iPhone向けSafari、HTML拡張属性を使いこなす | Webサイト開発
iPhone向けSafari、HTML拡張属性を使いこなす 2009.11.04 2020.09.10 Webサイト開発 HTML iPhone, demo iPhone向けSafariでは、W3C標準のHTMLタグ・属性をサポートしているのはもちろんだが、iPhone固有の拡張属性・拡張CSSプロパティが使用できる。具体的には、テキストの入力方法を制御するものからタッチパネル操作専用のイベントハンドラ、バックライトの制御といった機能まである。 今回はiPhone固有のHTML拡張属性を紹介したい。 関連記事： 円記号をiPhoneのブラウザに表示するには？ maxlengthで半角文字数で制限するには？ iPhone でHTTPプロキシを使用する際の制限 スマートフォンのラジオボタンを使いやすいサイズにするには？ スマホ向けページャデザイン 3選 CSS3 擬似クラス SafariのPC
iPad用HTMLのメタタグapple-mobile-web-app-capableを試してみる
iPad用HTMLのメタタグapple-mobile-web-app-capableを試してみる スポンサードリンク Tweet iPadには、Webページを開くボタンを、ホーム画面に配置することができるのですが、その配置するときに、HTML内で、<meta name="apple-mobile-web-app-capable" content="yes" >とかしておくと、ホーム画面から開いたとき、Safariがフルスクリーンモードになり、あたかも普通のアプリのように見える、と言うネタがあったので、ちょうど手持ちのサイトではAdobe Creative Suite対応店マップ http://labo.dtpwiki.jp/printshop/ があったので、設定してみました。 次の画面は、それぞれ、上記メタタグなし、メタタグありの状態でホーム画面に登録したものです。登録した時点のメタタグ
記事を読んでもらうために要約をつけよう
記事を読んでもらうために要約をつけよう 多くのウェブサービスで本文の抜粋が使われていますが、内容を把握するには十分ではない、ということをビフォーアフターで考えてみます。届けたい人に情報を届けるために要約をきちんと書いておきましょう time2013/01/27 hatenabookmark- ウェブ上のデザインパターンとして、あるページ（URL）に対して何か言及するというものがよく見られます。 そこでは、おそらく読者が内容を推測しやすいように（読むべきかどうかを判断しやすくする）という配慮からか、ページ内容の"抜粋"を入れています。 しかし、この抜粋って内容をある程度つかむためにどこまで有用なのでしょうか。ちょっと例を挙げながら見て行きましょう。 抜粋表示の一例 facebookの例。冒頭の数百時が使われています。タイトルにある3つの設計思想が書かれていればよりわかりやすかったですね。 こ
ブログのTwitter Cardsが有効になりました - F.Ko-Jiの「一秒後は未来」
Twitter CardsはTwitter独自の仕様で、ツイートにURLが含まれているとそのURLのタイトルや概要、サムネイル、そのサイトのTwitterアカウントなどの情報がTwitterのWebサイトや公式クライアントアプリに表示されます。Facebookなどで利用されるいわゆるOGPみたいなものです。 この機能を有効にするにはまずサイトのほうにTwitter Cards用のmetaタグを記述する必要があります。さらにTwitter Cardsを有効にするために申請が必要です。申請が通ったらメールが送られてきます。 うちのブログはMTなので<head>タグ内に以下のような記述をしました。参考までに。 <!-- Twitter Cardsの種類。ブログ記事ならsummaryで。 --> <meta name="twitter:card" content="summary"> <!-- パ
iOS でサポートされた viewport 以外の meta タグ
前回の記事のついでに viewport 以外の iOS でサポートされているメタタグについて整理してみましょう。 Supported Meta Tags <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> apple-mobile-web-app-capable content が yes にセットされているならば、ウェブアプリケーションはフルスクリーンモードで実行されます。デフォルトのふるまいは、ウェブコンテンツを表示するために Safari を使用することです。JavaScript
ViewportでiPhoneの画面に合わせたサイズを指定 |
Viewportを指定せずMobile Safariのデフォルト値を使用した場合 以下を指定したのと同じ状態になる。 <meta name="viewport" content="width=980px,initial-scale=1.0,user-scalable=yes,minimum-scale=0.25,maximum-scale=1.6" /> おすすめの設定 <meta name="viewport" content="width=divice-width" /> 横幅をdivice-widthとし、他はデフォルトのまま。 divice-widthは対象デバイスの横幅を表す。 iPhoneであれば、縦向き状態の横幅は320px。この設定を使用した場合、本体を横向きにした場合でも表示領域の横幅は320pxのままになるため、1.5倍（480px÷320px）に拡大された状態で表示さ
meta viewportがよくわからん
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / 結局 が一番いいのかもと思った。html5 boilerplate mobileでも使われていたので… 以下はよく検証してないので間違ってる可能性があります。 まず、ほんとは にしたい。想定される結果は、iPhone縦だとviewportの幅が320px、iPhone横だとviewportの幅が480pxになるというもの。だがこれをやると、iPhoneで縦→横にしたとき、コンテンツの幅は320pxのまま、これが幅いっぱいにズームされた状態になる。iPhone Safariは、基本、縦→横にしたら、その時の画面の幅を維持して拡大してくれるので、user-scalableがyesである限り、wid
Humans TXT: 私たちは人間です。機械ではありません。
humans.txt について humans.txtって何？ ウエブに関与した人たちについての情報が入ったTXTファイルです。 何故TXTなのですか？ これは 簡単に早く 作れるのです。何故なら コードに於いて篏入的ではないからです。サイトの効率が低下するなどの主張により、サイトの所有者は、ウエブ作者が自分のウエブにサインすることを望まないことが多くあります。こうすることにより、外的に、素早く、簡単に、気軽に、作者が誰であるかということ（所有権ではなく）を明示できます。 どこに配置すれば良いですか？ サイトルートです。 robots.txt の隣です。 そして（可能であれば） <head> の authorタグに次を追加してください <link type "text/plain" rel "author" href "http://domain/humans.txt" /> 何故これをやら
HTML - meta タグの仕様詳細まとめ :: Drk7jp
前エントリ - Internet Explorer のイメージツールバーを無効化する meta タグ で予告したとおり meta タグについて生まれて初めてまじめに調べてみました。改めて調べてみると知らなかったこと満載です。っていうか Web エンジニアたるもの一度は W3C勧告 くらいは一通り目を通しておかなくてはダメだなと思ったりしました。面倒なくらい分量があるけど。ひとまず meta タグ情報としての自分にとって永久保存版まとめという位置づけです。 まずは参考になったサイトの紹介から。 W3C勧告HTML4.01 :: The global structure of an HTML document W3C勧告HTML4.01 私的日本語訳 :: The global structure of an HTML document(ja) rfc2616.txt Another HTML
meta メタタグとは？種類・意味・徹底解説 – 検索エンジンから集客 WEB集客コンサルタント｜マイアイランド
メタタグは、サイトの情報を検索エンジンに提供するうえで非常に便利です。メタタグを使用して、あらゆる種類の情報を提供できます。各システムでは、サポートするメタタグのみを処理し、残りは無視されます。HTML ページの <head> セクションにメタデータを追加する効果・種類について解説します。 meta タグとは？metaタグ（メタタグ）とは、htmlページの<head>～</head>内に記述される、ページの各種付加情報を定義するタグです。 META要素META要素は、メタデータを指定するための一般的機構である。しかし、HTML要素・属性の中には、既に何らかのメタデータを取り扱うためのものがあり、著者によってMETA要素の代わりにメタデータ指定に使われ得る。 TITLE要素、ADDRESS要素、INS及びDEL要素、title属性、cite属性がそれである。 META要素とHTTPヘッダの関
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ディスクリプションのSEO効果とは？書き方のポイントも3つ紹介 – ワードプレステーマTCD
無料ツール - SEO 検索エンジン最適化