리믹스 검색 엔진 최적화

TL;DR

리믹스 SEO 체크리스트는 다음과 같습니다.

High quality content

Title

Description

Image

Social media meta tags

Sitemap

Robots.txt

소개: 귀찮게 왜?

SEO는 유기적 검색 결과에서 웹 페이지의 모양과 위치를 개선하기 위해 고안된 일련의 관행인 검색 엔진 최적화를 의미합니다. 자연 검색은 사람들이 온라인 콘텐츠를 발견하고 액세스할 수 있는 가장 눈에 띄는 방법이기 때문에 좋은 SEO 전략은 웹사이트 트래픽의 양과 질을 개선하는 데 필수적입니다.

Remix는 훌륭한 프레임워크이지만 더 많은 사용자에게 다가가려면 수동으로 SEO를 구성해야 합니다. 이 블로그에서는 Remix 애플리케이션에서 SEO를 개선하는 방법에 대해 설명합니다.

Check this in case you are not familiar with Remix.

고품질 콘텐츠

This is not Remix specific, but just like in any website, the best way to improve your SEO is to have good content.

Now, let's continue on things we can control, as a developer, in our Remix application.

메타 태그 사용

메타 태그는 웹 페이지를 요약하는 텍스트 및 이미지 콘텐츠의 특정 스니펫입니다. 종종 누군가가 소셜 미디어, 메시징 또는 비즈니스 채팅 소프트웨어에서 링크를 공유할 때마다 메타 태그 데이터가 나타납니다.

경로에서 선언할 메타 태그를 렌더링하려면 먼저 Meta 파일의 head에 app/root 구성 요소를 추가해야 합니다.

// app/root.jsx
import { Meta} from "remix";

// ...
<html lang="en">
  <head>
    {/* other stuff */}

    {/* All meta exports on all routes will go here */}
    <Meta />
  </head>
  {/* body */}
</html>
// ...

위 코드의 샘플 사용법을 보려면 이 항목link을 확인하십시오.

You can technically add meta tags directly to the head of the html template. However, it is recommended to add "unique" information such as title and description on every route.

바닐라 자바스크립트 사용

// app/routes/[routeName].jsx
export const meta = () => {
  return {
    [property]: "value"
  }
}

TypeScript 사용

// app/routes/[routeName].tsx
import type { MetaFunction } from "remix";

export const meta: MetaFunction = () => {
  return {
    [property]: "value"
  }
}

Remix is smart enough to convert a meta property into the appropriate tag with the correct value as shown in the upcoming examples.

메타 태그가 있어야 합니다.

제목

A title tag is the second most important factor for on-page SEO, only trailing high-quality content.

export const meta = () => {
  return {
    title: "Page Title. Ideally length 60-70 characters",
  }
}

<head>
  <title>Page Title. Ideally length 60-70 characters</title>
</head>

설명

The meta description often serves as a pitch to people who find your website on Google or social media sites. While it's not required and Google can use text from you website instead of what you specifiy in the meta data, it's better to control the description text where you can.

export const meta = () => {
  return {
    //...
    description: "Page description. No longer than 155 characters."
  }
}

<head>
  <!--...-->
  <meta name="description" content="Page description. No longer than 155 characters.">
</head>

영상

With the visual nature of the web, your Meta Tag Image is the most valuable graphic content you can create to encourage users to click and visit your website.

export const meta = () => {
  return {
    //...
    "og:image": "https://codegino.com/assets/preview.png"
  }
}

<head>
  <!--...-->
  <meta property="og:image" content="https://codegino.com/assets/preview.png">
</head>

소셜 미디어 메타 태그

Although it is not required, with a good social media presence, you can attract more users which will organically increase your search ranking.

OG:정보

Open Graph 메타 태그는 소셜 미디어에서 공유할 때 URL이 표시되는 방식을 제어하는 코드 스니펫입니다.

Facebook의 Open Graph 프로토콜의 일부이며 LinkedIn 및 Twitter(Twitter 카드가 없는 경우)를 비롯한 다른 소셜 미디어 사이트에서도 사용됩니다.

export const meta = () => {
  return {
    //...
    "og:type": "website",
    "og:url": "https://codegino.com",
    "og:title": "Page Title. Ideally length 60-70 characters",
    "og:description": "Page description. No longer than 155 characters.",
    "og:image": "https://codegino.com/assets/preview.png",
  }
}

<head>
  <!--...-->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://codegino.com">
  <meta property="og:title" content="Page Title. Ideally length 60-70 characters">
  <meta property="og:description" content="Page description. No longer than 155 characters.">
  <meta property="og:image" content="https://codegino.com/assets/preview.png">
</head>

twitter:info 추가

이는 Twitter에서 웹사이트에 대한 정보를 표시하는 데 사용됩니다.

Twitter가 일부og 메타 태그를 재사용하므로 이들 모두를 정의하지 않습니다.
겹치는 경우( og:description 및 twitter:description ) Twitter는 Twitter 관련 정보를 선택합니다.

export const meta = () => {
  return {
    //...
    "twitter:card": "summary_large_image", // summary, summary_large_image, app, player
    "twitter:creator": "@code_gino",
    "twitter:url": "https://codegino.com",
    "twitter:title": "Page Title. Ideally length 60-70 characters",
    "twitter:description": "Page description. No longer than 155 characters.",
    "twitter:image": "https://codegino.com/assets/preview.png",
  }
}

<head>
  <!--...-->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:creator" content="@code_gino">
  <meta name="twitter:url" content="https://codegino.com">
  <meta name="twitter:title" content="Page Title. Ideally length 60-70 characters">
  <meta name="twitter:description" content="Page description. No longer than 155 characters.">
  <meta name="twitter:image" content="https://codegino.com/assets/preview.png">
</head>

모든 메타 태그를 합치기

export const meta = () => {
  return {
    title: "Page Title. Ideally length 60-70 characters",
    description: "Page description. No longer than 155 characters.",
    "og:type": "website",
    "og:url": "https://codegino.com",
    "og:title": "Page Title. Ideally length 60-70 characters",
    "og:description": "Page description. No longer than 155 characters.",
    "og:image": "https://codegino.com/assets/preview.png",
    "twitter:card": "summary_large_image",
    "twitter:creator": "@code_gino",
    "twitter:url": "https://codegino.com",
    "twitter:title": "Page Title. Ideally length 60-70 characters",
    "twitter:description": "Page description. No longer than 155 characters.",
    "twitter:image": "https://codegino.com/assets/preview.png",
  }
}

검증자

다음은 메타 태그를 테스트하는 데 사용할 수 있는 몇 가지 검사기입니다.

원스톱 상점 검사기: https://metatags.io/

페이스북: https://developers.facebook.com/tools/debug

트위터:

링크드인:

핀터레스트: https://developers.pinterest.com/tools/url-debugger/

구조화된 데이터: https://developers.google.com/search/docs/advanced/structured-data

사이트맵.xml

A sitemap is a file where you provide information about the pages, videos, and other files on your site and their relationships. Search engines like Google read this file to crawl your site more efficiently. A sitemap tells Google which pages and files you think are important in your site and provides valuable information about these files. For example, when the page was last updated and any alternate language versions. Learn more

만들기 sitemap.xml inside the public directory

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <url>
        <loc>https://codegino.vercel.app</loc>
    </url>
    <url>
        <loc>https://codegino.vercel.app/words</loc>
    <lastmod>2022-03-20T20:58:44.110Z</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.7</priority>
    </url>
</urlset>

If you have a lot of dynamic pages, you can create a sitemap generator.

로봇.txt

A robots.txt file tells search engine crawlers which URLs the crawler can access on your site. This is used mainly to avoid overloading your site with requests; it is not a mechanism for keeping a web page out of Google. Learn more

만들기 robots.txt inside the public directory

User-agent: *
Allow: /

고려해야 할 추가 사항

Reference

이 문제에 관하여(리믹스 검색 엔진 최적화), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/codegino/remix-search-engine-optimization-5fcf

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)