これからはXのリンクカードを小さいやつにするのが良さそう
Xでの大きいタイプのリンクカード（summary_large_image）からタイトルが消えたことで、さっそく悪用する人が出てきたようです。 写真を4枚並べた投稿を装いスパムサイトに誘導するポスト、X（旧Twitter）で増殖中 - やじうまWatch summaryならこれまで通りタイトルが表示される 一方で小さいタイプのリンクカード（summary）の表示のされ方は変更されていません。サムネイルは小さな正方形ですが、Webページのタイトルはこれまで通り表示されます。 今後は基本summaryがよさそう 情報のほとんどが画像となってしまったsummary_large_imageは、新規サイトにおいてはよっぽどの理由がない限り選ばない方が良いと思います。画像の中にタイトルを入れたとしても、リンクごとに画像のレイアウトやデザインがバラバラで見る人の負担は大きくなります。悪用が増えれば、ますま
head内の各要素とその重みをリスト化し、プライオリティが高い順に並べ替えてくれるツール -capo.js
head内に記述する要素の順番はページのパフォーマンスに影響を与える可能性があります。記述の順番が間違っている要素を特定し、プライオリティが高い順にしてくれるツールを紹介します。 指定したページのhead内の各要素とその重みをリスト化し、プライオリティが高い順に並び替えたものもリスト化してくれます。 2023年最新版: HTMLのheadの書き方、head内に記述する要素の総まとめ capo.jsの使い方 capo.jsを実際に使ってみた capo.jsの使い方 capo.jsを使用するには、2通りの方法があります。 デベロッパーツールのスニペットで実行する ブックマークレットで実行する 手順は簡単です。 capo.jsのJavaScriptをコピーします。 コピーしたJavaScriptをデベロッパーツールのスニペットで実行するか、ブックマークレットを作成します。 ※ブックマークレットは
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内に記
iPadのビューポートをパソコンと一緒にする方法 - by Takumi Hirashima
iPadのビューポートをパソコンと一緒にする方法を紹介します。 例えば、スマホとiPadでビューポートの指定を変えたい時に便利な方法です。 iPadの表示をパソコンと一緒にする方法 iPadの横持ちを判別する方法 タブレットの表示をパソコンと一緒にする方法 サイト閲覧時にiPadの表示をパソコンと一緒にする方法を紹介します。 userAgent の分岐を使って、iPadはビューポートの横幅を指定してパソコンの表示を再現します。 次のコードをページの head タグ内に追加してください。 <script> if ((navigator.userAgent.indexOf('iPhone') > 0) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) { docum
HTMLテンプレートの基本ファイル一式、Webページを実装するための必要最小限をまとめたHTML
HTMLで、Webページやアプリを作成する時に役立つ、フロントエンド用に必要最小限をまとめたシンプルなHTMLの基本テンプレートのファイル一式を紹介します。 v.8.0.0がリリースされ、現在の環境に合わせた設計にアップデートされました。 IE11を含む、すべてのモダンブラウザをサポートしています。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による分析・研究・実験をもとにしています。 ブラウザの見え方を最適化 プログレッシブエンハンス
ウェブサイトへの流入を爆増させる可能性を持つ「マイクロブラウザ」について知っておくべきこと
by www_slon_pics チャットやSNSでの「リンクの共有」がウェブサイトが見られるきっかけになることが近年急激に増加しています。アプリを使っていると、URLを貼り付けた時にウェブサイトの中身が「チラ見」できる画像や説明文が表示されるのを目にしますが、作家であり研究者でもあるコリン・ベンデルさんはこれを「マイクロブラウザ」と呼び、その効果を重要視しているとのこと。ウェブサイトへの流入を急増させる可能性を持つマイクロブラウザとはどういったもので、どう扱うべきなのか、ベンデル氏が解説しています。 Microbrowsers are Everywhere ◆ 24 ways https://24ways.org/2019/microbrowsers-are-everywhere/ 一般的にスマートフォンなどの携帯機器向けに開発されたウェブブラウザをマイクロブラウザと呼びますが、ここでベ
Google検索結果に表示される説明文などの詳細なコントロールを可能にする新仕様が発表
by 422737 Google検索の検索結果画面には、単に関連のあるウェブサイトのタイトルやURLが表示されるだけではなく、ウェブサイトの内容を説明するテキストなども表示され、ユーザーが適切なウェブサイトを発見するために役立てられています。そんなGoogle検索結果に表示されるコンテンツの内容について、ウェブサイトの運営者がより詳細にコントロールするための、新たな仕様が発表されました。 Official Google Webmaster Central Blog: More options to help websites preview their content on Google Search https://webmasters.googleblog.com/2019/09/more-controls-on-search.html Googleの検索結果にはコンテンツのテキストな
HTMLのheadの書き方、head内に記述する要素の総まとめ
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「<head> cheatsheet」を紹介します。 <head> cheatsheet 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 去年紹介した以前の版からいろいろと変更されています。 head内に記述する最小限の構成 head内の要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 メモ head内に記述する最小限の構成 下記はシンプルなWebサイトで必須となるhead内に記述する最小限のタグです。 <meta charset="utf-8"> <meta http-equiv="x-ua-c
Medium – Where good ideas find you.
A place to read, write, and deepen your understanding
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
head内に記述するソーシャルメディア・検索エンジン用のmetaタグを簡単に生成できる無料ツール -Meta Tags | コリス
TwitterカードやOGPなど、head内のmetaに記述するコードを簡単に生成できるオンラインサービス -Hey Meta