Headless WordPress + Sapper SEO Ready (Part 5)
Tags: svelte, javascript, sapper, wordpress
Published: 2020-08-23 13:38:12

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](https://sapper.svelte.dev/docs#Pages). WordPress has [excerpt](https://wordpress.org/support/article/excerpt/) feature that lets you specify a small teaser/summary of the post for Dos and Don'ts you can check [web.dev](https://web.dev/meta-description/).

`https://YOUR-DOMAIN/wp-json/wp/v2/posts?_embed&slug=${params.slug}` has `excerpt`

```json
	"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.

```html
<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>
```
![SSR tags](https://dev-to-uploads.s3.amazonaws.com/i/uw94tvyjfott844nwonv.png)



#### #2 Social Share

I am a fan of social sharing [cards on twitter](https://cards-dev.twitter.com/validator) and facebook [sharing debugger](https://developers.facebook.com/tools/debug/).

They have their own set of `meta` tags facebook has their rules [here](https://developers.facebook.com/docs/sharing/webmasters/). and for twitter refer [here](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image)


```html
	
	{#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.

![Sapper SEO Cards](https://dev-to-uploads.s3.amazonaws.com/i/i2fl74m8cgtb2u69oxbl.png)

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.