最も重要なHTMLメタタグ:概観📝

17166 ワード
html テキストリンク
もともと公開webdeasy.de !
すべてのウェブサイトは、HTMLメタタグをページのプロパティを記述する頭のセクションにあります.それらの多くは必須であり、他の偉大な機能とウェブサイトを強化することができます.ここで最も重要なHTMLメタタグを持つリストを得ることができます!
すべてのHTMLページには、定義済みの、主に一様なHTML構造があります.これは、大きなセクション、体と頭の領域として含まれています.このヘッドセクションは私たちが今日対処することです.このセクションはページに関する重要な情報を含んでいます.スクリプトの統合などの外部の変更に加えて<script> and <link> タグまたはタグバーのタイトルバーでは、多くの情報が訪問者に見えないです.これらはメタタグと呼ばれ、特に検索エンジンに重要な情報を与える.したがって、彼らは非常に重要ですSEO (search engine optimization) . 今、あなたは彼らが何であるかを見つけることができます.

目次

  • Structure of HTML Meta Tags
  • 1. Title, description & keywords
  • 2. Theme color
  • 3. Preview for WhatsApp, Facebook & Co.

  • 5. Canonical URL
  • 6. Indexing for web crawlers (robots meta tags)
  • 7. Character coding (encoding)

    • HTMLメタタグの構造

    In general, the basic structure of an HTML page is as follows. The selected line is an example of a meta tag. KEY stands for the keyword with which the respective property is addressed. VALUE, on the other hand, is the value that this meta property should have.

    <!DOCTYPE html>
<html lang="de">
<head>
    <meta name="KEY" content="VALUE">
    <!-- ... -->
</head>
<body>
    <!-- ... -->
</body>
</html>

    The following meta tags are not in any order, so they have nothing to say about their valence or importance. I have also left out "Basic Tags". Tags like description or keywords will not be found in the list. If you want to get an overview, you are welcome to have a closer look at the source code of this page! ;)

     Did you know: even in CSS there are certain "guidelines" that you should follow, these CSS No-Gos you can find out here .

    1章タイトル・説明・キーワード


    これらの3つのプロパティは、検索エンジンによって正しくページを分類し、右の検索クエリに表示されます.しかし、説明は提案だけですので、必ずしも検索エンジンで表示する必要はありません.検索エンジンは時々ページの異なるセクションを表示します.
    記述の長さとキーワードの数はしばしば議論される.明確なガイドラインはない.あなたの記述がおよそ150 - 160文字であるならば、そして、あなたはおよそ20のキーワードを使います、それはすばらしいです.
    
<title>Important HTML Meta Tags</title>
<meta name="description" content="Here you can find some important HTML Meta Tags" />
<meta name="keywords" content="html, meta, tags, head, description, theme, twitter, whatsapp">

    テーマカラー

    The theme color is a nice feature that many web developers unfortunately don't know (yet). If the corresponding meta tag is set, the URL line (tab bar) can be displayed in mobile browsers in any color. On this page ( webdeasy.de ) URLラインの色は、ウェブサイトの配色に適しています.

    色を決定するには、通常、スタイルシートでこれを使用するので、16進数のカラーコードを使用します.一致するタグは次のようになります.
    <meta name="theme-color" content="#3d50a7">

    3 . WhatsApp、Facebook＆Coのためのプレビュー。

    Open Graph information is important when sharing posts on social networks like Facebook & Co. But Open Graph information can also be displayed via Messenger Slack or even via WhatsApp. The example of this WhatsApp message shows what the tags do.
    ここで最も重要なオプションは、タイトル、説明、プレビュー画像です.また、言語やページ(記事、ビデオ、…)の種類などのオプションを指定できます.
    <meta property="og:locale" content="de_DE">
<meta property="og:type" content="article">
<meta property="og:title" content="Nextcloud 17 ist da! - So bekommst Du das Update » webdeasy.de">
<meta property="og:description" content="Am 30. September 2019 wurde Nextcloud 17 veröffentlicht! Hier erfährst Du, wie Du schon jetzt auf Nextcloud 17 - trotz Beta - upgraden kannst.">
<meta property="og:url" content="https://webdeasy.de/nextcloud-17-update/">
<meta property="og:site_name" content="webdeasy.de">
<meta property="article:published_time" content="2019-09-30T16:46:53+00:00">
<meta property="article:modified_time" content="2019-10-17T08:45:24+00:00">
<meta property="og:image" content="https://webdeasy.de/wp-content/uploads/2019/09/nextcloud-17.png">
<meta property="og:image:width" content="1400">
<meta property="og:image:height" content="600">
    あなたがWordPressページを使用しているならば、プラグインYoast SEO この仕事は直接できます.一般に、プラグインは非常に推奨されます!)あなたが統合と個々のタグに関する詳細な情報を持っているならば、あなたは読むこともできますthis article from Ryte magazine .

    さえずりタグ

    Twitter Card Tags are especially useful for Twitter users and sites that are often shared on Twitter. These meta tags change the appearance of a shared page in the Twitter feed. Thereby you can adjust the data exactly to the target group.

    (Not visible on the dev.to twitter embed.... 😢) => see .

     This is the official twitter account of the webdeasy.de '>webdeasyデブログ!様々なWeb開発のトピックについてのチュートリアルとコードスニペットwebdeasy.de '>webdeasy記事は英語＆ドイツ語でご利用いただけます.愛と知識を広める!💕
    午前11時20分- 2020年10月20日
    Twitterのカードのタグが設定されていない場合は、リンクが完全に詳細情報なしで表示されます.例えば、意味のある画像によって、ユーザーはもちろん、ポストを意識していて、ポストは、より多くの報道を得ます.
    Twitterのポストのメタタグは次のようになります.
    <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:description" content="This tutorial is for all developers who want to program with Node.js but don't know much about Node.js yet. Here you will find the Basics!">
<meta name="twitter:title" content="The Ultimate Node.js Beginner Tutorial » webdeasy.de">
<meta name="twitter:image" content="https://webdeasy.de/wp-content/uploads/2019/09/node-beginner.jpg">
    詳細な情報については、Twitterから直接対応しています.あなたがWordPressウェブサイトを持っているならば、プラグインもこの仕事をすることができます.

    標準URL

    The canonical URL is tagged with the Canonical Tag. This is important if there is a website with duplicate content . そのようなページが現れるならば、彼らはランキングでGoogleと他の検索エンジンによって罰されて、より少ない訪問客を得ません.
    ページの内容がいくつかの(少なくとも一つの追加)ページに現れるとき、複製している内容によるページはつくられます.コンテンツが他のウェブサイトから1 : 1コピーされたときに発生します.製品が2色で提供されるオンラインショップでさえ、例えば、URLはわずかに異なります、しかし、ページの内容は実質的に同じです.したがって、ページが重複した内容でないという検索エンジンを示すために、正準タグを正しく使用することは重要です.
    これは次の日に起こります.URLは、ポストまたはページの元のURLでここで置き換えられなければなりません.
    <link rel="canonical" href="URL">
    オンラインショップの例から始めると、ページタグとURLは次のようになります.

  • - 1https://webdeasy.de/shop/product1.php なし

  • 菅2https://webdeasy.de/shop/product1.php?color=green (対数表記はHRef値を1 )

  • 菅3https://webdeasy.de/shop/product1.php?color=red (対数表記はHRef値を1 )
    • これは、同じ製品は、なぜすべての同じ説明テキストなどを持っている理由は、画像や見出しだけ、すなわち、最小限の変更が存在している.
    注意:標準のタグはAMP pages .

    Webクローラのインデックス(ロボットメタタグ)

    The robots meta tags can be used to tell the web crawlers of the search engines which links and thus pages of yours may be indexed, i.e. included in the search results. You can also determine whether the current page should appear in the search results or be excluded. So you make the rules ;)

    Normally, if all links on the page may be indexed and the page is visible in the search engines, the meta tag looks like this:

    <meta name="robots" content="index, follow">

    Search engines differentiate here basically between two characteristics:

    • Indexing of links available on the page (a-tags)
      • follow : all links are followed (default value if no value is set)
      • nofollow : no link is followed
    • Indexing the current page
      • index : the current page is indexed (default value if no value is set)
      • noindex : the current page is not indexed

    As shown in the example above, you can specify both properties separated by commas. If you only want to exclude single links on a page from indexing, you can set the rel attribute to nofollow the corresponding link.

    <a href=“https://webdeasy.de/top-10-php-string-funktionen/“ rel=“nofollow“>Top 10 PHP String Funktionen</a>
    For a more detailed overview of all possible values, Google has published a specification for robot meta tags .

    7文字変換(符号化)

    The appropriate character encoding should be set on every website. If this is not done, it can happen that german "Umlaute" ("ä", "ü", "ö") and special characters (e.g. "ß") are not displayed correctly. This is a very important day, especially in the German language.

    <meta charset="UTF-8">
    In addition to the appropriate meta tag for the website, the encoding can alternatively be set on the server side. For this purpose a corresponding .htaccess entry 例えば、
    AddDefaultCharset utf-8
    ウェブサイトのための最も使用されるエンコーディングはこれら2つです.
  • UTF - 8
  • ISO - 8859 - 1
    • もちろん、多くのメタ情報は、リストのメタタグは私の意見で最も重要なものです.すべてのウェブサイトに何を知っているのですか?
    読書ありがとう!あなたがこの記事が好きならば、私に知らせて、それを共有させてください!あなたがチェックアウトすることができますmy blog そして、私に続いてください!😊
    【JS】JSを根本から再復習、関数とかオブジェクトとか
    FileBeat JSONログの収集