SEO & Performance

SEO Showcase

Meta tags, Open Graph, JSON-LD, Sitemap e mais

Veja como este portfolio foi otimizado para mecanismos de busca usando as melhores práticas de SEO — com exemplos para Next.js e React puro (Vite). Cada técnica está rodando em produção.

Inspecionar ao vivo Docs do Next.js

O que foi implementado

Infraestrutura completa de SEO com exemplos para Next.js (APIs nativas) e React + Vite (bibliotecas da comunidade).

Metadata API

Title template, description, keywords, authors, robots e canonical URL configurados no layout raiz com herança automática para todas as páginas.

Open Graph & Twitter Cards

Imagem de 1200x630 gerada dinamicamente via ImageResponse com avatar, nome, skills e branding do site.

JSON-LD Structured Data

Schemas Person, WebSite, ProfilePage e BreadcrumbList com @id para referência cruzada — rich snippets no Google com nome, cargo, skills e navegação.

Sitemap Dinâmico

Gerado automaticamente a partir das rotas registradas em content.ts. Novas páginas entram no sitemap sem configuração manual.

Robots.txt

Configuração de crawling permitindo indexação total e apontando para o sitemap.xml.

PWA Manifest

Web App Manifest com nome, cores do tema, ícones e configuração standalone para instalação no mobile.

Metadata API

O layout raiz define metadata global com title template. Páginas filhas herdam e podem sobrescrever via buildPageMetadata().

src/app/layout.tsx

export const metadata: Metadata = {
  metadataBase: new URL(SITE_URL),
  title: {
    default: `${SITE_NAME} | ${PERSONAL.role}`,
    template: `%s | ${SITE_NAME}`,
  },
  description: `Portfolio de ${PERSONAL.fullName}...`,
  keywords: [
    "portfolio frontend", "React", "Next.js",
    "TypeScript", "React Native", "Tailwind CSS",
  ],
  authors: [{ name: SITE_AUTHOR, url: SITE_URL }],
  robots: { index: true, follow: true },
  alternates: { canonical: SITE_URL },
  openGraph: {
    title: `${SITE_NAME} — ${PERSONAL.role}`,
    url: SITE_URL,
    siteName: SITE_NAME,
    type: "website",
    locale: "pt_BR",
    alternateLocale: ["en_US", "es_ES", "de_DE"],
  },
  twitter: { card: "summary_large_image" },
  verification: { google: PERSONAL.googleVerification },
};

src/lib/seo.ts

export function buildPageMetadata(page: {
  title: string;
  description: string;
  path?: string;
}): Metadata {
  const url = `${SITE_URL}${page.path ?? ""}`;
 
  return {
    title: page.title,
    description: page.description,
    alternates: { canonical: url },
    openGraph: {
      title: page.title,
      description: page.description,
      url,
      siteName: SITE_NAME,
      type: "website",
      locale: "pt_BR",
    },
    twitter: {
      card: "summary_large_image",
      title: page.title,
      description: page.description,
    },
  };
}

Open Graph Image

Imagem gerada em tempo de build via next/og ImageResponse. Aparece quando o link é compartilhado no LinkedIn, Twitter, WhatsApp ou Slack.

src/app/opengraph-image.tsx

import { ImageResponse } from "next/og";
import { readFile } from "node:fs/promises";
 
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";
 
export default async function OGImage() {
  const avatar = await readFile(
    join(process.cwd(), "public", "avatar-desk.png"),
  );
  const src = `data:image/png;base64,${avatar.toString("base64")}`;
 
  return new ImageResponse(
    <div style={{ /* dark bg, avatar, name, skills */ }}>
      <img src={src} width={280} height={280} />
      <h1>Vinicius Bastazin</h1>
      <p>Desenvolvedor Frontend Senior</p>
      {skills.map(s => <span>{s}</span>)}
    </div>,
    { ...size },
  );
}

Abrir /opengraph-image

JSON-LD Structured Data

Schema.org com @graph contendo Person, WebSite, ProfilePage e BreadcrumbList — todos linkados via @id. Isso permite que o Google entenda o autor, navegação do site e exiba rich snippets.

src/components/json-ld.tsx

const personSchema = {
  "@type": "Person",
  "@id": `${SITE_URL}/#person`,
  name: SITE_AUTHOR,
  url: SITE_URL,
  jobTitle: PERSONAL.role,
  sameAs: [PERSONAL.github, PERSONAL.linkedin],
  knowsAbout: [
    "React", "Next.js", "TypeScript",
    "React Native", "Tailwind CSS", "Node.js",
  ],
  image: `${SITE_URL}${PERSONAL.avatar}`,
  address: {
    "@type": "PostalAddress",
    addressLocality: "Presidente Prudente",
    addressRegion: "SP",
    addressCountry: "BR",
  },
};
 
const websiteSchema = {
  "@type": "WebSite",
  "@id": `${SITE_URL}/#website`,
  name: SITE_NAME,
  url: SITE_URL,
  author: { "@id": `${SITE_URL}/#person` },
  publisher: { "@id": `${SITE_URL}/#person` },
  inLanguage: ["pt-BR", "en", "es", "de"],
  potentialAction: {
    "@type": "SearchAction",
    target: `${SITE_URL}/?q={search_term_string}`,
  },
};
 
const profilePageSchema = {
  "@type": "ProfilePage",
  "@id": `${SITE_URL}/#profilepage`,
  url: SITE_URL,
  mainEntity: { "@id": `${SITE_URL}/#person` },
  isPartOf: { "@id": `${SITE_URL}/#website` },
};
 
const breadcrumbSchema = {
  "@type": "BreadcrumbList",
  itemListElement: [
    { "@type": "ListItem", position: 1,
      name: "Home", item: SITE_URL },
    { "@type": "ListItem", position: 2,
      name: "Implementações",
      item: `${SITE_URL}/implementacoes` },
    { "@type": "ListItem", position: 3,
      name: "Dicas & Guias",
      item: `${SITE_URL}/dicas` },
  ],
};
 
// Injetado no <head> via layout.tsx
<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{
    __html: JSON.stringify({
      "@context": "https://schema.org",
      "@graph": [
        personSchema, websiteSchema,
        profilePageSchema, breadcrumbSchema,
      ],
    }),
  }}
/>

Testar no Google Rich Results

Sitemap & Robots

O sitemap é gerado dinamicamente a partir do array CONTENT_ITEMS. Quando uma nova página é adicionada ao content.ts, ela automaticamente aparece no sitemap.xml.

src/app/sitemap.ts

import { CONTENT_ITEMS } from "@/data/content";
import { SITE_URL } from "@/lib/seo";
 
export default function sitemap(): MetadataRoute.Sitemap {
  const staticPages = [
    { url: SITE_URL, priority: 1 },
    { url: `${SITE_URL}/implementacoes`, priority: 0.8 },
    { url: `${SITE_URL}/dicas`, priority: 0.8 },
  ];
 
  const dynamicPages = CONTENT_ITEMS.map((item) => ({
    url: `${SITE_URL}/${prefix}/${item.slug}`,
    priority: 0.7,
  }));
 
  return [...staticPages, ...dynamicPages];
}

src/app/robots.ts

export default function robots(): MetadataRoute.Robots {
  return {
    rules: { userAgent: "*", allow: "/" },
    sitemap: `${SITE_URL}/sitemap.xml`,
  };
}

Abrir /sitemap.xml Abrir /robots.txt

Core Web Vitals

Métricas de performance que o Google usa como fator de ranking. Monitoradas neste portfolio via Vercel Speed Insights.

LCPLargest Contentful Paint

Tempo até o maior elemento visível carregar. Ideal: < 2.5s.

Bom< 2.5s

Precisa melhorar2.5s – 4s

Ruim> 4s

Dica: Otimize imagens com next/image, use fontes com display: swap e priorize o conteúdo above-the-fold.

INPInteraction to Next Paint

Tempo de resposta a interações do usuário. Ideal: < 200ms.

Bom< 200ms

Precisa melhorar200 – 500ms

Ruim> 500ms

Dica: Evite tarefas longas no main thread, use React.memo, useCallback e code splitting com dynamic imports.

CLSCumulative Layout Shift

Quanto o layout se move inesperadamente. Ideal: < 0.1.

Bom< 0.1

Precisa melhorar0.1 – 0.25

Ruim> 0.25

Dica: Defina width/height em imagens, use font-display: swap e reserve espaço para conteúdo dinâmico.

FCPFirst Contentful Paint

Tempo até o primeiro conteúdo aparecer na tela. Ideal: < 1.8s.

Bom< 1.8s

Precisa melhorar1.8s – 3s

Ruim> 3s

Dica: Use SSR/SSG, minimize CSS crítico, evite bloqueio de renderização com scripts e inline critical CSS.

TTFBTime to First Byte

Tempo até o servidor responder. Ideal: < 800ms.

Bom< 800ms

Precisa melhorar800ms – 1.8s

Ruim> 1.8s

Dica: Use CDN (Vercel Edge), cache de páginas estáticas, otimize queries do servidor e use ISR quando possível.

Dica: use Vercel Speed Insights ou Google PageSpeed Insights para monitorar em produção.

Next.js vs React + Vite

SEO funciona diferente em apps SSR/SSG (Next.js) e SPAs (React + Vite). Veja como resolver cada item nos dois cenários.

Next.js (SSR/SSG)

Metadata API nativa — export const metadata no layout/page

Next.js

export const metadata: Metadata = {
  title: 'Meu Site',
  description: '...',
};

React + Vite (SPA)

react-helmet-async — <Helmet> em cada rota

React + Vite

import { Helmet } from 'react-helmet-async';
 
<Helmet>
  <title>Meu Site</title>
  <meta name="description" content="..." />
</Helmet>

Checklist SEO

Status de cada item de SEO implementado neste portfolio.

Title template com herança

Meta description em todas as páginas

Keywords estratégicas no layout

Canonical URL por página

Open Graph image 1200x630

Twitter Card por página (summary_large_image)

JSON-LD Person + WebSite + ProfilePage

JSON-LD BreadcrumbList

JSON-LD @id para referência cruzada

Sitemap.xml dinâmico

Robots.txt

Favicon + Apple Touch Icon

PWA Manifest

Google Search Console verificado

Viewport otimizado (zoom acessível)

Multi-idioma com alternateLocale

Quer aplicar no seu projeto?

Todo o código de SEO deste portfolio é open source. Clone, adapte e use.

Voltar às Implementações

Ver no GitHub

Conteúdo relacionado

i18n Showcase — Internacionalização com Next.jsImplementação real de internacionalização (i18n) com next-intl e DeepL. Demo ao vivo com 4 idiomas, traduções tipadas, formatação de datas e moedas.

AI Chatbot com OpenAI e Vercel AI SDKComo criar um chatbot IA com streaming usando OpenAI, Vercel AI SDK e Next.js App Router. System prompt, pricing e arquitetura completa.

Analytics com Upstash Redis — Métricas ao vivoComo implementar contagem de page views e visitantes únicos com Upstash Redis, HyperLogLog, rate limiting e filtro de bots. Passo a passo para o dev.

12 min de leitura

export const metadata: Metadata = {

metadataBase: new URL(SITE_URL),

title: {

default: `${SITE_NAME} | ${PERSONAL.role}`,

description: `Portfolio de ${PERSONAL.fullName}...`,

keywords: [

"portfolio frontend", "React", "Next.js",

"TypeScript", "React Native", "Tailwind CSS",

authors: [{ name: SITE_AUTHOR, url: SITE_URL }],

robots: { index: true, follow: true },

alternates: { canonical: SITE_URL },

openGraph: {

title: `${SITE_NAME} — ${PERSONAL.role}`,

url: SITE_URL,

siteName: SITE_NAME,

type: "website",

locale: "pt_BR",

alternateLocale: ["en_US", "es_ES", "de_DE"],

twitter: { card: "summary_large_image" },

verification: { google: PERSONAL.googleVerification },

};

export function buildPageMetadata(page: {

title: string;

description: string;

path?: string;

}): Metadata {

const url = `${SITE_URL}${page.path ?? ""}`;

return {

title: page.title,

description: page.description,

alternates: { canonical: url },

openGraph: {

title: page.title,

description: page.description,

url,

siteName: SITE_NAME,

type: "website",

locale: "pt_BR",

twitter: {

card: "summary_large_image",

title: page.title,

description: page.description,

};

}

import { ImageResponse } from "next/og";

import { readFile } from "node:fs/promises";

export const size = { width: 1200, height: 630 };

export const contentType = "image/png";

export default async function OGImage() {

const avatar = await readFile(

join(process.cwd(), "public", "avatar-desk.png"),

);

const src = `data:image/png;base64,${avatar.toString("base64")}`;

return new ImageResponse(

<h1>Vinicius Bastazin</h1>

<p>Desenvolvedor Frontend Senior</p>

{skills.map(s => <span>{s}</span>)}

</div>,

{ ...size },

);

}

const personSchema = {

"@type": "Person",

"@id": `${SITE_URL}/#person`,

url: SITE_URL,

jobTitle: PERSONAL.role,

sameAs: [PERSONAL.github, PERSONAL.linkedin],

knowsAbout: [

"React", "Next.js", "TypeScript",

"React Native", "Tailwind CSS", "Node.js",

image: `${SITE_URL}${PERSONAL.avatar}`,

address: {

"@type": "PostalAddress",

addressLocality: "Presidente Prudente",

addressRegion: "SP",

addressCountry: "BR",

};

const websiteSchema = {

"@type": "WebSite",

"@id": `${SITE_URL}/#website`,

url: SITE_URL,

author: { "@id": `${SITE_URL}/#person` },

publisher: { "@id": `${SITE_URL}/#person` },

inLanguage: ["pt-BR", "en", "es", "de"],

potentialAction: {

"@type": "SearchAction",

target: `${SITE_URL}/?q={search_term_string}`,

};

const profilePageSchema = {

"@type": "ProfilePage",

"@id": `${SITE_URL}/#profilepage`,

url: SITE_URL,

mainEntity: { "@id": `${SITE_URL}/#person` },

isPartOf: { "@id": `${SITE_URL}/#website` },

};

const breadcrumbSchema = {

"@type": "BreadcrumbList",

itemListElement: [

{ "@type": "ListItem", position: 1,

{ "@type": "ListItem", position: 2,

item: `${SITE_URL}/implementacoes` },

{ "@type": "ListItem", position: 3,

item: `${SITE_URL}/dicas` },

};

// Injetado no <head> via layout.tsx

<script

type="application/ld+json"

dangerouslySetInnerHTML={{

__html: JSON.stringify({

"@context": "https://schema.org",

"@graph": [

personSchema, websiteSchema,

profilePageSchema, breadcrumbSchema,

}),

}}

import { CONTENT_ITEMS } from "@/data/content";

import { SITE_URL } from "@/lib/seo";

export default function sitemap(): MetadataRoute.Sitemap {

const staticPages = [

{ url: SITE_URL, priority: 1 },

{ url: `${SITE_URL}/implementacoes`, priority: 0.8 },

{ url: `${SITE_URL}/dicas`, priority: 0.8 },

];

const dynamicPages = CONTENT_ITEMS.map((item) => ({

url: `${SITE_URL}/${prefix}/${item.slug}`,

priority: 0.7,

}));

return [...staticPages, ...dynamicPages];

}