How to Integrate Lovable with Yoast SEO for WordPress

Before writing any Edge Function code, confirm that your WordPress installation's REST API includes Yoast SEO metadata in post responses. This requires Yoast SEO Free version 14.0 or later to be installed and activated. To verify, open your browser and visit: https://yoursite.com/wp-json/wp/v2/posts?per_page=1 The response JSON should include a 'yoast_head' field containing the full HTML meta tag block (as a string) and a 'yoast_head_json' field containing the parsed metadata as a JSON object. The 'yoast_head_json' object should contain keys like: title, description, robots, og_locale, og_type, og_title, og_description, og_url, og_site_name, og_image, twitter_card, twitter_creator, schema. If you do not see these fields, verify: 1. Yoast SEO plugin is activated in WordPress admin → Plugins 2. Yoast SEO version is 14.0 or newer (SEO → General → Features shows the version) 3. The REST API is accessible (try /wp-json/ root to confirm the API responds) 4. No security plugin is blocking the API endpoint For the Edge Function, you can reuse the WordPress proxy Edge Function from the WordPress integration (or the code in that tutorial) — no separate Edge Function is needed purely for Yoast. The yoast_head_json field is included in standard post and page responses automatically.

The SEO proxy Edge Function fetches a WordPress post or page by slug and returns both the content fields and the yoast_head_json metadata. This is an extension of the general WordPress proxy pattern — if you have already built the wordpress-proxy Edge Function from the WordPress integration guide, you can either extend it or create a dedicated seo-focused function. For SEO-specific needs, it is useful to have a dedicated endpoint that always returns _embed=1 (for featured image), includes=yoast_head_json in the fields (which it does by default), and normalizes the Yoast data into a cleaner structure for React Helmet consumption. The normalization step extracts the most commonly needed SEO fields into a flat object rather than requiring the frontend to navigate the yoast_head_json tree. The Edge Function below fetches a post by slug and returns both the content and a normalized seoMeta object ready for React Helmet:

1// supabase/functions/wordpress-seo/index.ts
2const corsHeaders = {
3  'Access-Control-Allow-Origin': '*',
4  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
5};
6
7interface YoastHeadJson {
8  title?: string;
9  description?: string;
10  canonical?: string;
11  og_title?: string;
12  og_description?: string;
13  og_image?: { url: string; width?: number; height?: number }[];
14  twitter_title?: string;
15  twitter_description?: string;
16  twitter_image?: string;
17  robots?: { index?: string; follow?: string };
18  schema?: { '@graph'?: unknown[] };
19}
20
21function normalizeYoastMeta(yoast: YoastHeadJson | null, fallbackTitle: string, fallbackUrl: string) {
22  if (!yoast) return { metaTitle: fallbackTitle, canonicalUrl: fallbackUrl };
23  return {
24    metaTitle: yoast.title || fallbackTitle,
25    metaDescription: yoast.description || '',
26    canonicalUrl: yoast.canonical || fallbackUrl,
27    ogTitle: yoast.og_title || yoast.title || fallbackTitle,
28    ogDescription: yoast.og_description || yoast.description || '',
29    ogImageUrl: yoast.og_image?.[0]?.url || '',
30    twitterTitle: yoast.twitter_title || yoast.og_title || yoast.title || fallbackTitle,
31    twitterDescription: yoast.twitter_description || yoast.og_description || yoast.description || '',
32    twitterImageUrl: yoast.twitter_image || yoast.og_image?.[0]?.url || '',
33    noIndex: yoast.robots?.index === 'noindex',
34    schema: yoast.schema ? JSON.stringify(yoast.schema) : null,
35  };
36}
37
38Deno.serve(async (req) => {
39  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders });
40
41  try {
42    const { type = 'posts', slug } = await req.json() as { type?: string; slug: string };
43
44    if (!slug) {
45      return new Response(JSON.stringify({ error: 'slug is required' }), {
46        status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
47      });
48    }
49
50    const siteUrl = Deno.env.get('WP_SITE_URL')!.replace(/\/$/, '');
51    const url = `${siteUrl}/wp-json/wp/v2/${type}?slug=${encodeURIComponent(slug)}&_embed=1`;
52
53    const wpResponse = await fetch(url);
54    if (!wpResponse.ok) {
55      return new Response(JSON.stringify({ error: `WordPress API returned ${wpResponse.status}` }), {
56        status: wpResponse.status, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
57      });
58    }
59
60    const posts = await wpResponse.json();
61    if (!Array.isArray(posts) || posts.length === 0) {
62      return new Response(JSON.stringify({ error: 'Post not found', slug }), {
63        status: 404, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
64      });
65    }
66
67    const post = posts[0];
68    const canonicalUrl = post.link || `${siteUrl}/${slug}/`;
69    const seoMeta = normalizeYoastMeta(post.yoast_head_json || null, post.title?.rendered || slug, canonicalUrl);
70
71    return new Response(JSON.stringify({ post, seoMeta }), {
72      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
73    });
74  } catch (error) {
75    console.error('wordpress-seo error:', error);
76    return new Response(JSON.stringify({ error: String(error) }), {
77      status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
78    });
79  }
80});

With the SEO metadata available from the Edge Function, apply it to each page's head tags in your Lovable React app. React Helmet (or react-helmet-async for SSR compatibility) allows setting title, meta, link, and script tags from within React components dynamically. Install react-helmet-async via Lovable chat: ask Lovable to 'install react-helmet-async and set up the HelmetProvider at the root App component level'. Then create a SEO component that accepts the seoMeta object and renders the appropriate head tags. For JSON-LD schema (structured data), render it as a script tag with type='application/ld+json'. This is critical for rich results in Google Search — Yoast generates Article, BreadcrumbList, WebPage, and Organization schemas that help Google understand your content structure. Use the seoMeta.noIndex flag to conditionally add noindex/nofollow meta tags for pages Yoast has configured to be excluded from search engines (draft previews, paginated archives, tag pages). For a complete headless WordPress SEO implementation that matches what Yoast would produce on a traditionally rendered WordPress site, also set the canonical link tag (rel=canonical) to prevent duplicate content penalties.