@Moose_Said

@MooseSaeed

Cairo, Egypt

- Full Time Instructor @VueSchool

- Masterclass Lead Instructor

- Full Stack developer

M

ostafa

uxt

ESSENTIALS

What is

Stands for "Search Engine Optimization".

What is

Stands for "Search Engine Optimization".

Search engines are one of your site's users.

What is

Stands for "Search Engine Optimization".

They aim to improve your site's presence on the internet.

Search engines are one of your site's users.

What is

Stands for "Search Engine Optimization".

They aim to improve your site's presence on the internet.

Search engines are one of your site's users.

SEO refers to the actions you take to help search engines show your site to more users.

What is

HAPPY

earch

ngines

HIGH TRAFFIC

How do

earch

ngines

visit a website?

earch

ngine

Crawlers

earch

ngine

Crawlers

Crawlers follow specific algorithm to determine the crawl frequency and crawling speed.

earch

ngine

Crawlers

Crawlers visit your site and render the page similarly to how a real user would.

Crawlers follow specific algorithm to determine the crawl frequency and crawling speed.

earch

ngine

Crawlers

🌐

Server

Request

fetch('https://vueschool.io/')

earch

ngine

Crawlers

🌐

Server

Request

Response

<!DOCTYPE html>
<html>
  <head> .. </head>

  <body> .. </body>
</html>

HTML

fetch('https://vueschool.io/')

earch

ngine

Crawlers

🌐

Server

Request

Response

<!DOCTYPE html>
<html>
  <head> .. </head>

  <body> .. </body>
</html>

HTML

🔎

The returned HTML contains the actual content when rendered server side

<!DOCTYPE html>
<html>
  <head> .. </head>

  <body>
  	<main> Actual content .. </main>
  </body>
</html>

HTML

🔎

fetch('https://vueschool.io/')

earch

ngine

Crawlers

🌐

Server

Request

Response

<!DOCTYPE html>
<html>
  <head> .. </head>

  <body> .. </body>
</html>

HTML

🔎

Or, referencing the needed JavaScript files to render the content in the browser

<!DOCTYPE html>
<html>
  <head> .. </head>

  <body>
  	<div id='app'></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

HTML

🔎

fetch('https://vueschool.io/')

earch

ngine

Crawlers

🌐

Server

Request

Response

<!DOCTYPE html>
<html>
  <head> .. </head>

  <body> .. </body>
</html>

HTML

🔎

Or, referencing the needed JavaScript files to render the content in the browser

<!DOCTYPE html>
<html>
  <head> .. </head>

  <body>
  	<div id='app'></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

HTML

🔎

Watch out!

fetch('https://vueschool.io/')

earch

ngine

Crawlers

🌐

Server

Request

Response

<!DOCTYPE html>
<html>
  <head> .. </head>

  <body> .. </body>
</html>

HTML

🔎

<!DOCTYPE html>
<html>
  <head> .. </head>

  <body>
  	<div id='app'></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Watch out!

fetch('https://vueschool.io/')

✅ Yes! SEO is possible for client-side apps.

earch

ngine

Crawlers

🌐

Server

Request

Response

<!DOCTYPE html>
<html>
  <head> .. </head>

  <body> .. </body>
</html>

HTML

🔎

<!DOCTYPE html>
<html>
  <head> .. </head>

  <body>
  	<div id='app'></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Watch out!

fetch('https://vueschool.io/')

⛔️ No! It's not as quick or efficient as SSR.

https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics

earch

ngine

Crawlers

🌐

Server

Request

Response

<!DOCTYPE html>
<html>
  <head> .. </head>

  <body> .. </body>
</html>

HTML

Visually Rendered Page

https://vueschoo.io

fetch('https://vueschool.io/')

earch

ngine

Crawlers

🌐

Server

Request

Response

<!DOCTYPE html>
<html>
  <head> .. </head>

  <body> .. </body>
</html>

HTML

fetch('https://vueschool.io/')

https://vueschoo.io

Visually Rendered Page

Scan and Index the Content

earch

ngine

Crawlers

Our goal

earch

ngine

Crawlers

Our goal

are able to

crawl your site by default

Crawlers

3 main things to ensure

Crawlers

can explore your site

Make sure you're not blocking bots.

Page is publicly accessible

No blocking meta tags, headers or Robots.txt

3 main things to ensure

Crawlers

can explore your site

<meta name="robots" content="noindex">

HTTP/1.1 200 OK
(...)
X-Robots-Tag: noindex
(...)

User-agent: *
Disallow: /

Page is working and returning 200 response.

3 main things to ensure

Crawlers

can explore your site

Make sure you're not blocking bots.

Page is publicly accessible

No blocking meta tags, headers or Robots.txt

Content is indexable.

Page is working and returning 200 response.

Indexable file type

3 main things to ensure

Crawlers

can explore your site

Make sure you're not blocking bots.

Page is publicly accessible

No blocking meta tags, headers or Robots.txt

Not Spammy

HTML
JPEG | WebP | PNG.
XML
MP4 | WMV | AVI

https://developers.google.com/search/docs/crawling-indexing/indexable-file-types

But we can do more..

We can help search engines discover our pages

Optimize Links

Search engines discover new pages via anchor tags.

Optimize Links

Search engines discover new pages via anchor tags.

Avoid linking important pages with JavaScript and Click Event Listeners.

Optimize Links

Search engines discover new pages via anchor tags.

Avoid linking important pages with JavaScript and Click Event Listeners.

Preferably, ALL pagination links should be present in the DOM. You can either make them

Optimize Links

Fully visible

Hidden with CSS

<NuxtLink :to="{ name: 'posts', params: { id: 1 } }">
  Post 123
</NuxtLink>

<RouterLink :to="{ name: 'posts', params: { id: 1 } }">
  Post 123
</RouterLink>

Optimize Links

Use RouterLink when using Vue with VueRouter.

Use NuxtLink when using Nuxt.

Sitemaps

Sitemaps are a big page with many links and details about the page's content.

Sitemaps

export default defineNuxtConfig({
  sitemap: {
    sources: [
      '/api/__sitemap__/urls',
    ]
  }
})

npx nuxi@latest module add sitemap

Sitemaps

https://nuxt.com/modules/sitemap

We can provide more details about our content

Meta Tags

Meta tags provide metadata about the web page.

Meta Tags

Meta tags provide metadata about the web page.

The Vue-Meta package enables easy management of meta tags in Vue.js and Nuxt.js applications.

https://github.com/nuxt/vue-meta/tree/next

Meta Tags

Meta tags provide metadata about the web page.

The Vue-Meta package enables easy management of meta tags in Vue.js and Nuxt.js applications.

https://github.com/nuxt/vue-meta/tree/next

<script setup>
import { useMeta } from 'vue-meta'
useMeta({
  title: 'Vue School',
  htmlAttrs: {
    lang: 'en',
  }
})
</script>

npm install vue-meta@next --save

Meta Tags

Vue-meta is integrated automatically if using Nuxt.

Meta Tags

Vue-meta is integrated automatically if using Nuxt.

Nuxt provides a set of helpful tools for defining optimizing meta tags:

useHead() Composable.
useSeoMeta() Composable.
definePageMeta() Composable.
SEO components (Title, Meta, Link, Head..etc).

https://nuxt.com/docs/getting-started/seo-meta

Canonicalization

A web page url can have many variants.

Canonicalization

vueschool.io/courses?sortBy=Desc

vueschool.io/courses

Canonicalization

Canonical links is your way to tell the search engine which page has the primary content.

<head>
  <link rel="canonical" href="https://vueschool.com/courses">
</head>

A web page url can have many variants.

http or https?

www or without?

Trailing slash?

Query strings?

vueschool.io/courses?sortBy=Desc

vueschool.io/courses

Structured Data Markup

Structured data helps Google better understand your page's content and how it's structured.

Structured Data Markup

It's a <script> tag of a type JSON-LD (https://json-ld.org).

Structured data helps Google better understand your page's content and how it's structured.

Structured Data Markup

It's a <script> tag of a type JSON-LD (https://json-ld.org).

<script type="application/ld+json">
  {
    "@context": "https://schema.org/",
    "@type": "Recipe",
    "name": "Party Coffee Cake",
    "author": {
      "@type": "Person",
      "name": "Mary Stone"
    },
    "datePublished": "2018-03-10",
    "description": "This coffee cake is awesome and perfect for parties.",
    "prepTime": "PT20M"
  }
</script>

It follows https://schema.org schema and properties.

Structured data helps Google better understand your page's content and how it's structured.

Structured Data Markup

nuxt-jsonld is a reliable community module for managing JSON-LD in Vue components.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-jsonld'],
});

npm install nuxt-jsonld

https://nuxt.com/modules/nuxt-jsonld

Your page experience matters

HTTP/HTTPS?

Mobile friendly?

Interfering Ads?

Valuable content?

Core Web Vitals

Source: https://web.dev/articles/vitals#core-web-vitals

Test Page Performance: https://pagespeed.web.dev/

How fast does it take the browser to show the final, stable visual version of the main content in the page?

Core Web Vitals

Search engines loves speed

Core Web Vitals

Reduce JS Bundle Size

<script setup lang="ts">
	import { ref, defineAsyncComponent } from 'vue'

	const show = ref(false)
    const BigListComponent = defineAsyncComponent(() => {
    	import('@/components/BigListComponent.vue')
    })
</script>

<template>
	<BigListComponent v-if="show" />
</template>

Reduce JS Bundle Size

Use defineAsyncComponent to split chunks from the final bundle in Vue.

<script setup lang="ts">
	import { ref, defineAsyncComponent } from 'vue'

	const show = ref(false)
    const BigListComponent = defineAsyncComponent(() => {
    	import('@/components/BigListComponent.vue')
    })
</script>

<template>
	<BigListComponent v-if="show" />
</template>

Reduce JS Bundle Size

<script setup lang="ts">
	const show = ref(false)
</script>

<template>    
	<LazyHeavyComponent v-if="show" />
</template>

Reduce JS Bundle Size

In Nuxt, prefix the component with 'Lazy' to achieve the same effect.

<script setup lang="ts">
	const show = ref(false)
</script>

<template>    
	<LazyHeavyComponent v-if="show" />
</template>

Reduce JS Bundle Size

Reduce Unused CSS

Unused CSS contributes to the overall file size of CSS files.

Reduce Unused CSS

Unused CSS contributes to the overall file size of CSS files.

Nuxt.js uses cssnano by default in the build step to minimize CSS.

Reduce Unused CSS

Unused CSS contributes to the overall file size of CSS files.

Nuxt.js uses cssnano by default in the build step to minimize CSS.

We can enable Nuxt PurgeCSS module to remove unused CSS.

https://github.com/Developmint/nuxt-purgecss

Optimize Images

<NuxtImg
  src="/images/hero.png"
  alt="Vue School landing ..."
  sizes="400px md:1280px"
  width="1280"
  height="720"
  provider="ipx"
/>

Images have a huge impact on page loading speed.

Optimize Images

<img
  src="/_ipx/s_2560x1440/images/hero.png"
  alt="Vue School Logo"
  width="1280"
  height="720"
  sizes="(max-width: 768px) 400px, 1280px"
  srcset="
    /_ipx/s_400x225/images/hero.png    400w,
    /_ipx/s_800x450/images/hero.png    800w,
    /_ipx/s_1280x720/images/hero.png  1280w,
    /_ipx/s_2560x1440/images/hero.png 2560w
  "
/>

HTML

<NuxtImg
  src="/images/hero.png"
  alt="Vue School landing ..."
  sizes="400px md:1280px"
  width="1280"
  height="720"
  provider="ipx"
  format="webp"
/>
// or AVIF

Use modern image format.

Optimize Images

<NuxtImg
  src="/images/hero.png"
  alt="Vue School landing ..."
  sizes="400px md:1280px"
  width="1280"
  height="720"
  provider="ipx"
  format="webp"
  loading="lazy"
  placeholder
/>

All images below the fold SHOULD be lazily loaded.

Optimize Images

<NuxtImg
  src="/images/hero.png"
  alt="Vue School landing ..."
  sizes="400px md:1280px"
  width="1280"
  height="720"
  provider="ipx"
  format="webp"
  loading="eager"
  preload
/>

Above the fold images SHOULD be eagerly loaded and preferably preloaded.

Optimize Images

So much more we can do!

Vue.js Masterclass 2024 Edition

https://vueschool.io/the-vuejs-3-master-class

@Moose_Said

I'll tweet (or "X" ?) out the slides after this