どのように私は私のニーズに合わせてSEOを自動化

17592 ワード
webdev astro seo テキストリンク
私がプログラミングと関連に関する記事と記事を書き始めた時から、しばらくありました.スタート以来、私はいつもSEOで時間を投資しました.これが私がどうしたか説明です.
以下は実際のコードサンプルではなく理論的な説明です.それはそれらを含みます、しかし、あなたはプロジェクトで使用しているフレームワークまたは言語に従い異なることができます.

メタタグ
メタタグはクローラのすべての始まりです.だから私は私のブログ記事を書くために使用するマークダウンページに“frontmatter”を実装しました.フロントエンドにはいくつかのものがあります.
--------
title: 🔍 How I automated SEO to work for me
createdAt: 12/11/2021 18:27
author: "Elian Van Cutsem"
tags:
  - SEO
  - Astro
  - Webdevelopment
description: How I automated SEO to work for me
imgUrl: http://marketingupdate.nl/wp-content/uploads/2020/05/SEO-Pillar-Post-Art-.png
longDescription: It's been some time since I started writing posts and articles about programming and related. Since the start, I always invested time in SEO, I integrated a system that now works for me. This is an explanation how I did that.
layout: '../../layouts/BlogPost.astro'
permalink: '12-06-21-how-i-automated-seo-to-work-for-me'
--------
はい、これはこの非常にページの正確なフロントです!
ここでは、フロントエンドの正確なプロパティを使用するためのガイドを次に示します.
  • title :<title> HTML出力とRSSフィードの要素
  • createdat :ブログの概要とRSSフィードの順序を修正するために使用されます
  • 著者:RSSフィードで使用されるだけでなく、私が引用したり、私のブログを使用して他の作家を招待したい場合に便利
  • タグ:関連タグのリスト、HTML出力のメタに入れ、RSSフィードに追加
  • と同じですtitle しかし、絵文字なしで
  • IMGurl:私の記事が共有されるか、RSSリーダーでプレビューされるとき、社会的イメージとして使われます
  • Longdescription :記事の関連する短い記述
  • レイアウト:ブログ投稿が使用する(アストロ)レイアウトを定義するので、必要に応じて変更できます
  • Permalink :記事への役に立つ(時々より短い)リンクを修正して、作成するのに用いられます
    • これらをビルド時にHTMLに変換すると<head> 要素は以下のようになります:
    <!-- Primary Meta Tags -->
<title>🔍 How I automated SEO to work for me</title>
<meta name="title" content="🔍 How I automated SEO to work for me" />
<meta name="description" content="It's been some time since I started writing posts and articles about programming and related. Since the start, I always invested time in SEO, I integrated a system that now works for me. This is an explanation how I did that." />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.elian.codes/blog/12-06-21-how-i-automated-seo-to-work-for-me" />
<meta property="og:title" content="🔍 How I automated SEO to work for me" />
<meta property="og:description" content="It's been some time since I started writing posts and articles about programming and related. Since the start, I always invested time in SEO, I integrated a system that now works for me. This is an explanation how I did that." />

<!-- Twitter -->
<meta property="twitter:url" content="https://www.elian.codes/blog/12-06-21-how-i-automated-seo-to-work-for-me" />
<meta property="twitter:title" content="🔍 How I automated SEO to work for me" />
<meta property="twitter:description" content="It's been some time since I started writing posts and articles about programming and related. Since the start, I always invested time in SEO, I integrated a system that now works for me. This is an explanation how I did that." />

    RSS
    RSSフィードは、いくつかのために時代遅れの技術のように見えるかもしれませんが、私はそれがないことを教えてみましょう.それはまだ一般的に別のブログを追跡するために使用され、あなたのブラウザで20のブックマークを持っている方法よりも手遅れです!
    RSSジェネレータを使用して、これを達成する最も簡単な方法ですが、ほとんどすべてのフレームワークで利用可能ないくつかのRSSジェネレータがあるので、あなたは面倒なことにこれを実現することができるはずです.
    RSSジェネレータとフィードは、あなたのポストまたはページを取り出して、ジェネレータによってRSS読み込み可能な内容に生の内容を移すことに分解されることができます.
    RSSフィードの例を次に示します.
    <rss version="2.0">
  <channel>
    <title>
      <![CDATA[ Elian Van Cutsem ]]>
    </title>
    <description>
      <![CDATA[ Programming and Frontend related articles ]]>
    </description>
    <link>https://www.elian.codes/blog.xml</link>
    <language>en-us</language>
    <item>
      <title>
        <![CDATA[ 💄 Use TailwindCSS with Sveltekit (2021) ]]>
      </title>
      <link>https://www.elian.codes/blog/12-05-21-use-tailwindcss-with-sveltekit-2021/</link>
      <description>
        <![CDATA[ Earlier this week, Sveltekit beta got released, ofcourse I wanted to fiddle with it. ]]>
      </description>
      <pubDate>Sun, 05 Dec 2021 22:45:00 GMT</pubDate>
    </item>
    <item>
      <title>
        <![CDATA[ 🔧 Set your NodeJS version in Netlify ]]>
      </title>
      <link>https://www.elian.codes/blog/12-03-21-set-your-node-version-in-netlify/</link>
      <description>
        <![CDATA[ A couple of times I needed to fix the NodeJS version on a Netlify site, I found myself googling it a couple of times, so this little how-to is basically a note-to-self. ]]>
      </description>
      <pubDate>Fri, 03 Dec 2021 08:25:00 GMT</pubDate>
    </item>
  </channel>
</rss>
    RSSは主にXMLにありますが、JSONまたはAtom

    イメージとアイコン

    アイコン
    認識可能なFaviconは、ウェブサイトを構築するか、設計するとき、重要なステップです.最近では、ほとんどのブラウザが自動的に検索/favicon.ico Faviconとして設定するには、別のフォーマットも可能です(PNG、SVG、...).これらを設定するには、主に次のテンプレートを使用する傾向があります.
    <!-- icon Metadata -->
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="57x57" href="/icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/icons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/icons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">

<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<meta name="theme-color" content="#6ee7b7">
    右の形式で指定されたアイコンを出力する便利なアイコンジェネレータの多くがあります.

    イメージ
    イメージは目に良いです、あなたのポストに合うイメージを選んで、あなたのポストが共有されるとき、至る所に現れるでしょう、しかし、本当に重要です!人々は常にあなたのリンクをクリックすると、彼らは(CFRは:Twitter)画像として表示される誘惑されます!これを行うにはmeta あなたのタグ<head> ページの要素.
    <!-- Open Graph / Facebook -->
<meta property="og:url" content="https://www.elian.codes/blog/12-06-21-how-i-automated-seo-to-work-for-me" />
<meta property="og:image" content="https://www.elian.codes/assets/img/social.jpg" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content="https://www.elian.codes/assets/img/social.jpg" />
    現在私は/HTMLのページタイトルなどに基づいて、タイトルと色を動的に調整するためにGOで私自身の社会的イメージジェネレータを作成/書き込みしています!一旦それが終わって、発表されるならば、私はそれがどのように働くかに関するポストを共有します!
    これは次のようになります.


    Google検索コンソールとサイトマップ
    もちろん、あなたのサイトパフォーマンスの分析と洞察は非常に役に立ちます.それらを追跡するために、私は主にSEOツールのGoogle生態系を使用します.

    サイトマップ
    実装する最も簡単なことの一つはサイトマップです.サイトマップは、Googleと他の検索エンジンにあなたのウェブサイトがあるページを見ることができます.サイトマップが更新されると、Google(または別の検索エンジン)がインデックスを試みて、新しいページをクロールしようとしますrobots.txt ).
    (ああはい、あなたのRSSフィードは、サイトマップとして余分に機能することができます(しかし、1を置き換える必要はありません!)

    検索コンソール
    Google検索コンソールは、あなたのウェブサイトがどのように実行するかについてより良い理解を得ることができる非常に便利なツールです.だけでなく、それはGoogle Analyticsと一緒に非常によく動作しますが、また、誰があなたのウェブサイトのページが自分の検索結果に表示されたときにどの用語を検索するに洞察力を与える.
    Googleの検索コンソールでは、また、“リンク”と呼ばれるツールにアクセスすることができますが、ここでは、インターネット上のページがあなたにリンクが含まれて表示されます.これは非常にあなたのコンテンツに興味を持って追跡したり、それを参照に役立つ.

    そんなに前に、彼らはまた、新しいコンテンツをフォローアップするコンテンツクリエイターのために設計されたツールです“検索コンソール洞察”と呼ばれる新しいツールを立ち上げた.洞察力のUIでは、どのように多くのトラフィックが表示されますどこから、彼らは、トイレの訪問中にあなたの記事に簡単にフォローアップに最適ですから来た.
    robots.txtエーrobots.txt ファイルは、検索エンジンまたはクローラがインデックスに許容されるページの単純な表現です.
    その特定のまたはすべての検索エンジンから特定のディレクトリやページを停止する非常に小さくシンプルな表現.また、すべてのクローラは、それを見つけるにはエンを探すために知っているので、あなたのホスト名とサイトマップを含めることができます.
    ここではrobots.txt of elian.codes 
    User-agent: *
Disallow: 
Host: https://www.elian.codes/
Sitemap: https://www.elian.codes/sitemap.xml
    私が最初にこのウェブサイトの記事を書き始めたので、私は常にSEOに投資しました.
    過去3ヶ月で、私のウェブサイトトラフィックの
    tomcat 7自動導入後のmysqlメモリ漏洩の解決
    Numpy (tile,repeat ...)