HTML-ラベル付きラベル

13643 ワード
html テキストリンク 
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="<image address>" />
    <link rel="apple-touch-icon" href="<image address>" />
    <title>탭에서 보이는 제목</title>
    <!--  -->
    <meta name="description" content="" />
    <!--  -->
    <meta property="og:title" content="title" />
    <meta property="og:image" content="<image address>" />
    <meta property="og:..." content="..." />
</head>
<body>..</body>
</html>

🚀 Check!


⓪ html

  • attribute "language":<html lang="en">...</html>

    • ① head

  • HTMLのヘッダとヘッダ
  • 実際に非可視部分

    • ②バビコン（ファビコン）

  • 法比康(法維康)
  • プロパティ「href」:ほとんどのアイコン(ico)ファイルはルートディレクトリ
    • にあります.
  • 属性「size」:通常16 x 16、最近32 x 32度(複数サイズ)をサポートsizes="16x16 32x32 64x64"

    • ③ラベルmeta

  • 追加要素として検索エンジンに通知するウェブサイトの説明
  • charset : 🌟 <meta charset="utf-8" />
  • description

    • ④フェイスブック、NAVER、KakaoTalk等のプレビューを設定する

  • "og:..": Open Graph protocol 
    •     <meta property="og:type" content="{website, video.movie, ...}" />
    <meta property="og:url" content="링크될 URL" />
    <meta property="og:title" content="콘텐츠 제목" />
    <meta property="og:image" content="콘텐츠 이미지 URL" />
    <meta property="og:image:width" content="" />
    <meta property="og:image:height" content="" />
    <meta property="og:description" content="1-2줄 설명" />
    <meta property="og:locale" content="기본 en_US, {ko_KR, ...}" />
    <meta property="og:site_name" content="공식 사이트명" />

    ⑤Twitterプレビューの設定

  • "twitter:..": Twitterプレビューの設定
  • ツイッター専用ラベルは、オープングラフで代用できます.twitter:cardが必要です<meta name="twitter:card" content="summary, photo, player />

    • ⑥App Linksの設定

  • "al:ios:..", "al:android:..": アプリケーションプレビューはApp Linksに設定されています

    リファレンスドキュメント

  • https://ogp.me/
    • 新しく Fabric に加わった Appsee を試す
    OEM、OpenAPIによって供給される休息/hateoasのためのmediatype