5 HTMLのSEOのヒントを上位にランク付けする

7835 ワード

導入

この記事では、HTMLドキュメントの構造を設定する際に遭遇する可能性のある最も重要なHTMLタグについていくつかの新しいヒントと洞察を学びます.しかし、検索エンジン最適化(SEO)を高めることは重要ではありません.

なぜSEO？

誰もが自分の携帯電話になっており、最も簡単なことの一つは、特定のトピックや単語について困惑しているときにGoogleを検索することです.だからGoogleの最初のページで利用可能な不動産を活用するには、あなたの権限を高めるためにあなたのウェブサイトのキーワードを使用して適切なことを行う必要があります.

SEOの利益

それはあなたのウェブサイトの発見と可視性に役立ちます.

人々が特定のキーワードを使って検索するとき、それはあなたのウェブサイト交通を押し上げます.

SEOの利点についてもっと知るためにlink .
始めましょう🚀

1 .タイトルタグ

The <title> タグは、あなたのブランド名を記述する検索結果に表示されるタイトルと、ページが何であるかです.これは、タイトルを短く、約60文字を維持することをお勧めします.

<head>
   <title>
      SEO tips | Rank higher on Google search result
   </title>
</head>

上記のコードスニペットから<title> 間の要素<head> and </head> HTMLの要素.注意すべきことはHTMLの内容である<head> ブラウザに読み込まれたとき、ページに表示されません<body> 要素.head要素には、ドキュメントに関するすべてのメタデータが含まれます.

メタタグ

The <meta> タグは、ブラウザーがあなたのウェブサイトの内容が何であるかについてわかっているのを助けます.注目に値する一般的なメタタグのいくつかは以下の通りです.

著者

説明

ビューポート.

   <head>
    <meta name="author" content="Teri Eyenike" />
    <meta
      name="description"
      content="Project-based guide for web developers and devops engineers"
    />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
  </head>

Viewportメタタグを使用すると、ビューポートの幅とスケーリングを制御でき、すべてのデバイスにフィットします.また、Web開発の初期には、キーワードメタタグは非常に重要でした、しかし、キーワードメタタグは現在それに関連しません、そして、Googleはそれでそれを使いませんsearch ranking .

あなたが使用したい別のメタタグはog: FacebookやTwitterのようなソーシャルメディアサイトを支援するメタタグは、他のプラットフォーム上で共有するためのプレビューカードを作成します.

<head>
    <meta
      property="og:title"
      content="Teri Eyenike - A Front-end Developer and Technical Writer"
    />
    <meta property="og:type" content="website" />
    <meta
      property="og:image"
      content="https://res.cloudinary.com/codeg0d/image/upload/v1609859185/3_skg4ne.jpg"
    />
    <meta property="og:url" content="https://www.terieyenike.github.io/v2" />
    <meta property="og:description" content="Project-based guide for web developers and devops engineers" />
  </head>

Other social media sites use the og meta tags to create posts.

最後にrobots メタタグは、検索エンジンをインデックスのドキュメント、内部の検索結果、重複ページから保つために使用すると、検索に表示する必要はありません.

<head>
    <meta name="robots" content="noindex nofollow" />
  </head>

3 . ALT属性

ALT属性は<img> 画像を代替テキストとして記述する要素です.Altの属性の主な機能は、それはあなたのウェブサイトのアクセシビリティを支援し、SEOのために、検索エンジンのインデックス画像を支援します.Alt属性を使用する際のThumbの規則は、短く短く記述することです.

<img src="https://res.cloudinary.com/codeg0d/image/upload/v1609859185/2_txw6yz.jpg" alt="Poster for baby driver movie" width="600" height="300" />

標準的なタグ

標準のタグは、特定のURLがマスターコピーを表し、複数のURLに表示される重複するコンテンツに起因する問題を防ぐのを助ける検索結果を示します.

<head>
    <link
      rel="canonical"
      href="https://devdojo.com/teri/5-html-seo-tips-to-rank-higher-in-google"
    />
  </head>

5 .意味タグ

セマンティックタグは、ブラウザにWebページの構造を通信するのに役立つHTMLタグです.などの要素<header> , <footer> , <article> それらがそれらの中に埋め込まれた内容を記述するので、すべては意味的であると考えられます.
適切に使用される場合、検索エンジンと補助技術は、アクセス可能性、特に視力障害を有するユーザーのためのスクリーンリーダに役立つドキュメントの内容を理解することができる.
他にもいくつかの意味要素があります.

<article>

<aside>

<details>

<figcaption>

<figure>

<footer>

<header>

<main>

<mark>

<nav>

<section>

<summary>

<time>

使用しないようにしてください<div> あなたのWebページの全体のドキュメント全体の要素.

結論

この記事では、次のWebプロジェクトで検索エンジンの結果ページ(SERP)で上位にランク付けするためのさまざまな戦略について学びました.さらに、あなたのウェブサイトの成長を監視するためのヒントを使用して起動をお勧めします.

更なる読書

Open Graph
Canonicalization
Semantics

Reference

この問題について(5 HTMLのSEOのヒントを上位にランク付けする), 我々は、より多くの情報をここで見つけました https://dev.to/terieyenike/5-html-seo-tips-to-rank-higher-in-google-3e4j

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

ダイナミックプログラミング

oracleページング問題解決策