헤드리스 WordPress + Sapper SEO 준비(파트 5)

WordPress에는 SEO를 분리했기 때문에 SEO에 도움이 되는 여러 플러그인과 도구가 있으며 이를 달성하기 위해 API의 특정 부분을 사용할 수 있습니다.

#1 메타 태그

모든 페이지에 대한 메타데이터는 특정 페이지에 대해 설명하는 적절한 태그<meta>를 배치하여 수행할 수 있습니다. 기본 Sapper 템플릿에는 문서 참조here의 <svelte:head>를 포함하는 <title>의 내장 예제가 있습니다. WordPress에는 해야 할 일과 하지 말아야 할 일에 대한 게시물의 작은 티저/요약을 지정할 수 있는 기능excerpt이 있습니다web.dev.
https://YOUR-DOMAIN/wp-json/wp/v2/posts?_embed&slug=${params.slug} 있다 excerpt

    "excerpt": {
        "rendered": "<p>Lorem ut dolore est mollit ipsum adipisicing aliqua elit.Minim veniam et nulla nisi elit laboris dolore fugiat nulla amet et excepteur adipisicing.<\/p>\n",
        "protected": false
    },

게시물 끝점은 이것을 반환하며 html 태그와 그 후행\n을 제거해야 합니다.

WordPress의 keywords 기능을 사용하여 채울 수 있는 tags도 있습니다. 더 이상 WordPress 프런트엔드를 사용하지 않을 것이므로 이를 활용할 수 있습니다.

<svelte:head>
    <title>{post.title.rendered}</title>
    <meta name="Description" content={post.excerpt.rendered.replace(/(<p>|<\/p>|\n)/g, '')}>
<meta name="Keywords" content="{post._embedded["wp:term"][1].map(e=>e.slug)}">
</svelte:head>

#2 소셜 공유

저는 소셜 공유와 페이스북sharing debugger의 팬입니다.

그들은 고유한 meta 태그 세트를 가지고 있습니다. 페이스북에는 자체 규칙here이 있습니다. 그리고 트위터 참고

    {#if post._embedded["wp:term"][1].length != 0}
    <meta name="Keywords" content="{post._embedded["wp:term"][1].map(e=>e.slug)}">
    {:else}
    <meta name="Keywords" content="tech,blog">

    {/if}

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:creator" content="@shriji" />
    <meta name="twitter:url" content="{process.env.SAPPER_APP_SITE}/{post.slug}">
    <meta name="twitter:title" content="{post.title.rendered}">
    <meta name="twitter:description" content="{post.excerpt.rendered.replace(/(<p>|<\/p>|\n)/g, "")}">
    {#if post._embedded["wp:featuredmedia"]}
    <meta name="twitter:image" content="{post._embedded["wp:featuredmedia"][0].source_url}">
    {/if}

    <meta property="og:url" content="{process.env.SAPPER_APP_SITE}/{post.slug}" />
    <meta property="og:type" content="article" />
    <meta property="og:title" content="{post.title.rendered}" />
    <meta property="og:description" content="{post.excerpt.rendered.replace(/(<p>|<\/p>|\n)/g, "")}" />
    {#if post._embedded["wp:featuredmedia"]}
    <meta property="og:image" content="{post._embedded["wp:featuredmedia"][0].source_url}" />
    {/if}

이것은 당신에게 일반적인 아이디어를 제공해야 하며 이것이 트위터와 페이스북에서 공유되는 경우의 모습입니다.



이것으로 WordPress의 기본 설정 및 Sapper로의 마이그레이션이 완료됩니다. 남은 것은 다음 기사에서 다룰 WordPress의 보안 부분과 프런트엔드입니다.