Headless WordPress + Sapper SEO Ready (Part 5)

WordPress has several plugins and tools that help you with SEO since we have decoupled it, we will be can use certain parts of the API to achieve this.

#1 Meta tags

Metadata for all the pages can be done by placing appropriate <meta> tags that describes about that particular page. The default Sapper template has inbuilt example of <svelte:head> that houses the <title> of the document refer here. WordPress has excerpt feature that lets you specify a small teaser/summary of the post for Dos and Don'ts you can check web.dev.

https://YOUR-DOMAIN/wp-json/wp/v2/posts?_embed&slug=${params.slug} has 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
    },

The post endpoint returns this also it is necessary to strip the html tags and that trailing \n.

There is also keywords that can be populated using the tags feature on WordPress, since we no longer are going to use the WordPress frontend we can take advantage of this.

<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 Social Share

I am a fan of social sharing cards on twitter and facebook sharing debugger.

They have their own set of meta tags facebook has their rules here. and for twitter refer 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}

This should give you the general idea and this is what it looks if it is shared on twitter and facebook.

This concludes the base setup and migration of WordPress to Sapper only thing that remains is the security part and frontend of WordPress being accessed which will be covered in the next article.

Blog

Headless WordPress + Sapper SEO Ready (Part 5)

Shriji

#1 Meta tags

#2 Social Share

Join Our Newsletter. No Spam, Only the good stuff.

Related