SvelteKit FAQ 페이지 SEO: JSON-LD 모드 추가

🔑 SvelteKit의 SEO 메타데이터를 사용하여 FAQ 페이지 만들기

SvelteKit 흔한 문제 페이지 SEO에 대한 이 글에서 우리는 SvelteKit가 흔한 문제 페이지를 만드는 것이 얼마나 쉬운지 보았다.이 밖에 검색엔진에 최적화된 메타데이터도 생성합니다.이는 검색엔진 결과 페이지 사용자의 체험을 늘리는 것이기 때문에 구글의 사랑을 받는다는 의미로 당신의 페이지 순위가 더욱 높아질 것이다.
현재 문제의 빠른 해결 방안을 찾고 있으며, 대량의 문서를 읽어서 필요한 부분을 추출하지 않으려면 FAQ 페이지가 유용합니다.FAQ 페이지를 만드는 추가 절차로 구글 페이지의 문제와 답을 알려주는 메타데이터를 만들어야 한다.이것은 사용자 상호작용 (검색 결과 페이지에서) 이 중요한 순위 요소이기 때문에, 이것은 당신의 페이지가 검색 결과에서 더욱 높게 나타날 것이라는 것을 의미한다.이 문서에서는 SvelteKit에서 FAQ 페이지에 올바른 태그를 추가하는 방법을 소개합니다.나는 네가 이 코드가 매우 유용하다는 것을 발견하고 네가 진행하고 있는 적당한 항목에 대해 시도할 수 있기를 바란다.

🌟 우리의 목표: FAQ 주요 세션

페이지의 FAQ 메타데이터는 질문으로 검색어를 작성하는 사용자에게 특히 유용하다는 것을 증명할 것입니다.모바일 기기와 전자 개인 보조원(예를 들어 알렉사, 시리, 프렌즈)을 사용하는 검색이 보편화되면서 이런 유형의 검색을 지원하는 것이 점점 중요해지고 있다.예를 들어 위의 데스크톱 구글 검색 캡처에서 가장 중요한 결과는 특색 있는 부분이다.특색 있는 부분도'어떻게'의 형식을 채택할 수 있다.그것들은 보기에 매우 크다. 우선 결과이고, 가장 중요한 것은사용자는 그것들을 클릭하는 것을 좋아한다.

구글은 검색 결과를 조정하고 페이지를 맨 위에 놓을 것이다.만약 그것이 충분한 상호작용을 얻지 못한다면, 그것은 곧 이 가장 중요한 위치를 잃을 것이다.대부분의 사용자가 최초의 몇 가지 결과를 뛰어넘지 못한다는 것을 기억하는 것이 중요하다.따라서 상단 공간은 사용자가 사이트를 방문할 수 있도록 하는 데 매우 가치가 있다.
다음은 SvelteKit의 흔한 문제 페이지를 훑어보고 기능 세션에 필요한 메타데이터를 구축할 것입니다.

🧱 SvelteKit FAQ 페이지 SEO: 현재 구축 중인 항목

우리는 한 페이지의 응용 프로그램을 만들 것이다.이것은 이전의 SEO 강좌를 바탕으로 how to add basic SEO metadata for search engine optimisation in SvelteKit, sharing cards for social networks과 next level Schema.org SEO meta to delight search engine users을 보고 이를 귀하의 사이트에 올린 것입니다.

우리는 한 JSON 파일에서 우리의 문제 데이터를 얻을 것이다. 그러면 우리는 take advantage of SvelteKit JSON data imports을 얻을 수 있다.일단 우리가 이 사이트를 설립한다면, 우리는 당신이 구글의 검색 엔진 최적화 도구로 그것을 테스트하는 방법을 보게 될 것이다.

⚙️ SvelteKit FAQ 페이지 SEO: 항목 설정

시작하려면 skeleton SvelteKit 프로젝트를 시작합니다.

pnpm init svelte@next sveltekit-faq-page-seo && cd $_
pnpm install

TypeScript 프롬프트에 대해 아니오로 응답할 수 있지만 ESLint 및 prettier formatting을 선택합니다.그런 다음 이 프로젝트에 대해 몇 개의 추가 패키지만 제공하면 됩니다.

pnpm add -D @fontsource/dm-sans dotenv

그런 다음 프로젝트의 루트 디렉토리에 .env 파일을 만듭니다.

VITE_SITE_URL=https://example.com

사이트를 배치할 URL을 추가하거나 example.com을 잠시 보류합니다. 이것이 무엇인지 확인하지 못하면.마지막으로 dotenv 구성을 svelte.config.js에 추가

import 'dotenv/config';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    // hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte',
    vite: {
      define: {
        'process.env.VITE_BUILD_TIME': JSON.stringify(new Date().toISOString()),
      },
    },
  },
};

export default conig;

10 줄의 코드는 SEO원의 구축 시간을 얻었습니다.

⚙️ SvelteKit FAQ 페이지 SEO: 문제

문제가 없으면 흔한 문제 페이지가 아닙니다. 따라서 src/lib/data 폴더를 만들고 faqs.json 파일을 놓겠습니다.우리는 직접 데이터를 날씬한 표시줄에 가져올 것이다.learn more about how this works, there is a tutorial which cover s a couple of different data shapes을 원하신다면어쨌든 이러한 문제를 붙여넣거나 자신의 문제를 추가하여 구조를 그대로 유지합니다.

[
  {
    "question": "What is the deal with SvelteKit?",
    "answer": "SvelteKit is an awesome tool for building fast websites and web apps.  Its secret powers lie in the compiler at Svelte's heart.  This lets Svelte generate pure JavaScript which is interpreted by the user browser.  This is contrast to other frameworks where an additional step of generating JavaScript in the browser is required.  SvelteKit is to Svelte what Next is to React, it is a tool for creating Svelte apps."
  },
  {
    "question": "Is SvelteKit ready for production?",
    "answer": "SvelteKit is already used in a number of production website globally."
  },
  {
    "question": "Does SvelteKit use vite?",
    "answer": "Yes. vite, like snowpack is a next generation bundler, building on advances earlier made by more established tools like WebPack.  Among the advantages are faster hot module reloading and better tree shaking.  These benefits come from using ES Modules."
  },
  {
    "question": "Is SvelteKit still in beta?",
    "answer": "Yes, SvelteKit is still in beta. Despite that it is already used in a number of production websites."
  },
  {
    "question": "How do you deploy SvelteKit?",
    "answer": "You can deploy SvelteKit apps as static sites or Server Side Rendered apps.  Leading hosting services like Cloudflare, Netlify, Render and Vercel all support SvelteKit."
  }
]

구글은 이 페이지를 유효한 FAQ 페이지로 보기 위해 최소 세 가지 문제가 필요하다.

🏠 SvelteKit FAQ 페이지 SEO: 홈 페이지

가벼운 태그가 매우 가벼워지는 것을 볼 수 있습니다. 이로써 코드를 쉽게 벗기고 구성 요소나 페이지로 프로젝트에 삽입할 수 있습니다.이 때문에 SEO의 FAQ 측은 전면 가동·테스트 중이지만, SEO의 나머지 부분은 아직 완전히 충실하지 않은 상태다.src/routes/index.svelte의 코드를 바꿉니다.

<script>
  import Question from '$lib/components/Question.svelte';
  import SEO from '$lib/components/SEO.svelte';
  import website from '$lib/configuration/website';
  import faqs from '$lib/data/faqs.json';
  import '@fontsource/dm-sans';

  const { siteUrl } = website;
  const title = 'SvelteKit FAQ Page with SEO';
  const url = `${siteUrl}/`;
</script>

<SEO
  {url}
  {title}
  {faqCount}
  seoMetaDescription="Demo site for FAQ page using SvelteKit with SchemaOrg FAQ metadata"
/>
<main class="container">
  <div class="content">
    <h1>SvelteKit FAQs</h1>
    <section role="feed">
      {#each faqs as { question, answer }, index}
        <article aria-posinset={index + 1} aria-setsize={faqCount}>
          <Question id={`question-${index + 1}`} {question} {answer} position={index + 1} {url} />
        </article>
      {/each}
    </section>
  </div>
</main>

만약 이 강좌들이 초보가 아니라면 다음 단계로 넘어갈 수 있습니다.Vite에서는 JSON 파일을 가져오고 JavaScript 코드에서 사용할 수 있습니다.JSON 파일이 맨 위에 있는 그룹을 알 수 있습니다. 따라서 5 줄에서 가져오면 faqs이 그룹을 저장합니다.JavaScript의 다른 배열과 마찬가지로 다룰 수 있습니다.23–27 줄에서 우리는 수조의 원소를 교체하여 모든 원소에 문제를 생성한다.React에 대해 더 잘 알고 있다면, Svelte에서 모든 요소에 키를 추가할 필요가 없지만, array.map()과 비슷한 방법으로 볼 수 있습니다.각 구역의 첫 줄을 보여 주세요.다시 생각해 보면 수조의 모든 요소는 question과 answer 필드를 가진 대상이다.우리는 모든 요소에서 이 필드를 분해할 수 있고, 23 줄의 간단명료한 기호로 색인에 접근할 수 있다.
이 코드는 아직 작동하지 않습니다. 다음에 우리는 부족한 SEO과 Question 구성 요소를 정의할 것입니다.그 전에 같은 파일의 아래쪽에 선택 가능한 스타일을 붙여넣을 수 있습니다.

<style>
  :global(html) {
    background-image: linear-gradient(
      to bottom right,
      hsl(var(--colour-dark-hue) var(--colour-dark-saturation) var(--colour-dark-luminance)),
      hsl(
        var(--colour-dark-hue) var(--colour-dark-saturation)
          calc(var(--colour-dark-luminance) * 0.8)
      )
    );
    color: hsl(
      var(--colour-light-hue) var(--colour-light-saturation) var(--colour-light-luminance)
    );

    font-family: DM Sans;
  }

  :global(h1) {
    font-size: var(--font-size-7);
    margin-top: var(--spacing-0);
    margin-bottom: var(--spacing-2);
  }

  :global(:root) {
    /* paradise pink */
    --colour-brand-hue: 345;
    --colour-brand-saturation: 76%;
    --colour-brand-luminance: 58%;

    /* coral */
    --colour-alt-hue: 14;
    --colour-alt-saturation: 100%;
    --colour-alt-luminance: 70%;

    /* charleston green */
    --colour-dark-hue: 120;
    --colour-dark-saturation: 1%;
    --colour-dark-luminance: 17%;

    /* nickel */
    --colour-mid-hue: 44;
    --colour-mid-saturation: 7%;
    --colour-mid-luminance: 41%;

    /* eggshell */
    --colour-light-hue: 49;
    --colour-light-saturation: 60%;
    --colour-light-luminance: 93%;

    --spacing-px: 0.0625rem;
    --spacing-px-2: 0.125rem;
    --spacing-0: 0;
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-4: 1rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-12: 3rem;
    --spacing-20: 5rem;

    --font-size-1: 1rem;
    --font-size-2: 1.25rem;
    --font-size-7: 3.815rem;
    --mobile-font-size-2: 1.125rem;

    --font-weight-medium: 500;

    --line-height-relaxed: 1.75;
  }

  .container {
    display: flex;
    min-height: 100vh;
    width: 100%;
  }

  .content {
    display: flex;
    flex-direction: column;
    margin: var(--spacing-4) var(--spacing-4) var(--spacing-8);
    width: 100%;
  }

  @media (min-width: 768px) {
    :global(h1) {
      font-size: var(--font-size-7);
    }

    .content {
      margin: var(--spacing-8) var(--spacing-20) var(--spacing-12);
    }
  }
</style>

😕 SvelteKit FAQ 페이지 SEO: 문제 구성 요소

Svelte (예: Astro) 는 HTML 헤드 부분에 요소를 직접 추가할 수 있으며, React 헬멧 같은 것이 필요하지 않습니다.코드가 최종적으로 매우 경량급인 것을 다시 보실 수 있습니다.src/lib/components 폴더를 만들고 다음을 포함하는 Question.svelte 파일을 추가합니다.

<script>
  export let question;
  export let answer;
  export let position;
  export let id;
  export let url;
  export let language = 'en-GB';

  const schemaOrgQuestionObject = {
    '@context': 'https://schema.org',
    '@type': 'Question',
    '@id': `${url}#${id}`,
    position,
    url: `${url}#${id}`,
    name: question,
    answerCount: 1,
    acceptedAnswer: {
      '@type': 'Answer',
      text: answer,
      inLanguage: language,
    },
    inLanguage: language,
  };
  let jsonLdString = JSON.stringify(schemaOrgQuestionObject);
  let jsonLdScript = `
        <script type="application/ld+json">
            ${jsonLdString}
        ${'<'}/script>
    `;
</script>

<svelte:head>
  {@html jsonLdScript}
</svelte:head>

<section class="container">
  <details {id} class="question">
    <summary class="summary">{question}</summary>
    <div class="answer">
      <p>
        {answer}
      </p>
    </div>
  </details>
</section>

9-29 줄에서 우리는 JSON-LD 메타데이터 대상을 구축했다.이것은 우리의 문제와 답안을 구글과 다른 검색엔진이 쉽게 해석할 수 있는 형식으로 바꿀 것이다.그것은 Schema.org Question 구조화된 데이터 모델을 따른다.우리는 JSON 대상을 구축한 다음에 script-26 줄의 28 표시에 넣는다.28 줄의 코드는 하나의 해결 방안일 뿐 스크립트 표시가 예상대로 생성될 수 있도록 확보할 수 있다.
Svelte에서 HTML 제목 부분에 내용을 추가하기 위해서 우리는 그것을 svelte:head 표시에 포장하기만 하면 된다.이 기능은 32 – 34 줄에서 확인할 수 있습니다.기존 HTML이 있으므로 @html 명령을 사용합니다.간단한 제목 원본을 순수한 텍스트로 추가하면 필요하지 않습니다.다음 그림은 개발 도구에서 완성된 원의 외관을 보여 줍니다.

질문 구성 요소에 메타 태그를 추가했지만, 모든 SEO 태그가 페이지의 단일 스크립트 태그에 포함되도록 재구성해야 할 수도 있습니다.이것은 사이트의 규모와 복잡성에 달려 있다.서로 다른 용례의 이상적인 구조에 대한 당신의 이념을 듣고 싶습니다.
페이지를 더 예쁘게 보이게 하려면 다음과 같은 옵션 스타일을 추가합니다.

<style>
  .container {
    display: flex;
    background-image: linear-gradient(
      to top left,
      hsl(var(--colour-brand-hue) var(--colour-brand-saturation) var(--colour-brand-luminance)),
      hsl(
        var(--colour-brand-hue) var(--colour-brand-saturation)
          calc(var(--colour-brand-luminance) * 0.95)
      )
    );
    border-radius: var(--spacing-1);
    margin: var(--spacing-6) auto;
    width: 100%;
  }

  .summary {
    padding: var(--spacing-4);
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    font-size: var(--mobile-font-size-2);
  }

  .question {
    display: flex;
    width: 100%;
  }

  .answer {
    background-image: linear-gradient(
      to bottom right,
      hsl(var(--colour-mid-hue) var(--colour-mid-saturation) var(--colour-mid-luminance)),
      hsl(
        var(--colour-mid-hue) var(--colour-mid-saturation) calc(var(--colour-mid-luminance) * 0.8)
      )
    );
    border: solid var(--spacing-px)
      hsl(var(--colour-alt-hue) var(--colour-alt-saturation) var(--colour-alt-luminance));
    border-radius: var(--spacing-px-2);
    margin: var(--spacing-0) var(--spacing-4) var(--spacing-6);
    padding: var(--spacing-0) var(--spacing-4);
    line-height: var(--line-height-relaxed);
  }

  @media (min-width: 768px) {
    .summary {
      font-size: var(--font-size-2);
    }
  }
</style>

🧩 SvelteKit FAQ 페이지 SEO: SEO 구성 요소

<script>
  export let datePublished = process.env.VITE_BUILD_TIME;
  export let dateModified = process.env.VITE_BUILD_TIME;
  export let seoMetaDescription;
  export let url;
  export let language = 'en-GB';
  export let faqCount;
  export let title;

  const schemaOrgWebPage = {
    '@type': ['WebPage', ...(faqCount > 0 ? ['FAQPage'] : [])],
    '@id': `${url}#webpage`,
    url,
    name: title,
    isPartOf: {
      '@id': `${url}/#website`,
    },
    primaryImageOfPage: {
      '@id': `${url}#primaryimage`,
    },
    ...(faqCount > 0
      ? {
          mainEntity: Array.from({ length: faqCount }, (_, index) => index + 1).map((element) => ({
            '@id': `${url}#question-${element}`,
          })),
        }
      : {}),
    datePublished,
    dateModified,
    description: seoMetaDescription,
    inLanguage: language,
    potentialAction: [
      {
        '@type': 'ReadAction',
        target: [url],
      },
    ],
  };
  const schemaOrgArray = [schemaOrgWebPage];
  const schemaOrgObject = {
    '@context': 'https://schema.org',
    '@graph': schemaOrgArray,
  };
  let jsonLdString = JSON.stringify(schemaOrgObject);
  let jsonLdScript = `
        <script type="application/ld+json">
            ${jsonLdString}
        ${'<'}/script>
    `;
</script>

<svelte:head>
  <title>{title}</title>
  <html lang="en-GB" />
  <meta name="description" content={seoMetaDescription} />
  {@html jsonLdScript}
</svelte:head>

여기에 FAQPage 유형(제11 줄)을 입력하는 것은 구글이 이를 흔히 볼 수 있는 문제 페이지로 식별하는 데 매우 중요하다.21 – 27 줄의 코드도 이 점에 매우 중요하다.우리는 rest에 대해 상세하게 토론하지 않기 때문에 댓글이 그리 길지 않을 것이다.앞서 언급한 다른 SEO 댓글을 열어 더 많은 세부 사항과 저희의 설명을 알아보세요.
이것은 우리가 추가해야 할 마지막 구성 요소입니다.다음은 테스트를 해보겠습니다.

💯 SvelteKit FAQ 페이지 SEO: 테스트

이제 다 정상일 거야.브라우저 개발 도구를 열고 Inspector로 이동한 다음 head 섹션을 확장하면 문제의 JSON LD 태그를 볼 수 있습니다.데이터를 더 잘 보려면 스크립트 태그 (응용 프로그램/ld + json 포함) 를 오른쪽 단추로 클릭하고 Copy/Inner HTML을 선택하십시오.이것은 JSON만 복사해야 하기 때문에 코드 편집기에 붙여넣고 읽을 수 있도록 포맷할 수 있습니다.
다음은 테스트 사이트를 당신이 가장 좋아하는 위탁 관리 서비스에 배치한 다음에 crack open Google's Rich Results Test에 배치합니다.당신의 사이트의 링크를 붙여서 구글이 FAQ 달러를 발견했는지 확인하세요.문제가 있다면 구글은 이런 특정 모델에 대해 상당히 진부할 수도 있다.조직 유형입니다. 따라서 질문과 SEO 구성 요소에 추가된 메타 코드가 일치하는지 한 줄 한 줄 검사합니다.

🙌🏽 SvelteKit FAQ 페이지 SEO: 우리가 무엇을 배웠는지

이 게시물에서 우리는 다음과 같은 것을 보았다.

아키텍처를 추가해야 하는 이유FAQ 데이터를 FAQ 페이지로 구성,

FAQ 페이지의 얇은 코드가 얼마나 간단한지,

추가 및 테스트 모드SvelteKit FAQ 페이지로 FAQ 데이터를 구성합니다.

나는 정말 네가 이 코드를 삭제하고 그것을 네 프로젝트에 이식할 수 있기를 바란다.SvelteKit FAQ Page SEO Demo Page at sveltekit-faq-page-seo.rodneylab.com/이 있습니다.이 밖에도 the full completed code for this tutorial on the Rodney Lab Git Hub repo을 볼 수 있습니다.

🙏🏽 SvelteKit FAQ 페이지 SEO: 피드백

너는 이 댓글이 유용하다고 생각하니?다른 주제의 댓글을 더 보고 싶으세요?새 게시물에 연락할 생각.그 밖에 만약에 제 작문 스타일을 좋아하신다면 저에게 연락을 주십시오. 만약에 제가 상담을 바탕으로 귀사 사이트를 위해 댓글을 쓸 수 있다면.계속 읽고 연락할 방법을 찾으세요. 자세한 것은 아래 문장을 보십시오.유사한 게시물을 지원하고 달러, 유로화, 파운드를 절약할 수 있다면 consider supporting me through Buy me a Coffee을 클릭하십시오.
마지막으로, 당신의 소셜 미디어 계정에 이 글을 마음대로 공유해서, 당신의 모든 관심자들이 이 글을 매우 유용하게 생각하도록 하세요.아래에 댓글을 남기는 것 외에 트위터를 통해 askRodney on Telegram과 연락할 수 있다.further ways to get in touch with Rodney Lab도 참조하십시오.나는 SvelteKit 및 기타 주제에 자주 글을 올린다.그리고 subscribe to the newsletter to keep up-to-date과 우리의 최신 프로젝트.