Every Elementor fix we catalog

Audit your XML sitemap and internal linking so that every product and category page is discoverable and crawlable by Google — not hidden behind JavaScript, pagination, or missing links.

On Elementor

1. Audit navigation menus built in Elementor: open any page using the Elementor editor, locate Nav Menu widgets or custom header templates (Templates → Theme Builder → Header), and confirm that every top-level category and key product page is linked via a standard <a href> anchor — not a button with a JavaScript onclick handler or a dynamically loaded menu that renders only after JS executes.
2. Check all 'loop' or archive templates in Theme Builder (Templates → Theme Builder → Archive/Product Archive): ensure Elementor's Dynamic Tags are used to generate product/category links (e.g., Dynamic Tag → Post URL on image or title widgets) so that each product card outputs a real crawlable <a> tag in the HTML source, not a JS-rendered link.
3. Identify any 'Load More' or infinite-scroll pagination widgets (Elementor Pro → Posts widget or Loop Grid widget → Pagination settings): switch the pagination type from 'Infinite Scroll' or 'Load More' to standard numbered pagination so that Google can follow page-2, page-3, etc. as discrete crawlable URLs.
4. Inspect Elementor-built landing pages or category showcase pages for product grids: select the Posts/Loop Grid widget → Content tab → verify 'Link To' is set to 'Post' (not 'None') and that the link wraps the card as an HTML anchor visible in the page source (right-click → View Page Source, search for product slugs).
5. For any Elementor popup or off-canvas drawer used as a mega-menu: go to Templates → Popups, open the popup template, and add a hidden sitemap-style <ul> list of category/product links using an HTML widget so those links exist in the DOM for crawlers even if the popup is visually hidden before interaction.
6. After applying changes, re-publish all affected Elementor templates and pages, then submit the updated XML sitemap to Google Search Console (Settings → Sitemaps) and use the URL Inspection tool to fetch and render key product and category pages — confirm 'Page is available to Google' and that all internal links appear in the 'Links' section of the crawl report.

<!-- CORRECT: Standard crawlable link -->
<a href="/products/blue-running-shoes">Blue Running Shoes</a>

<!-- WRONG: JavaScript-only — Googlebot cannot follow this -->
<span onclick="navigate('/products/blue-running-shoes')">Blue Running Shoes</span>

Eliminate unexpected layout shifts by reserving space for every image, video, embed, and dynamically injected element so nothing jumps when the page loads.

On Elementor

1. Open the Elementor editor for the affected page. For every Image widget, click the widget → go to the 'Style' tab → set explicit 'Width' and 'Height' values (in px or %) so the browser reserves exact space before the image loads. Avoid leaving both dimensions set to 'Auto'.
2. For Video widgets, select the widget → 'Style' tab → enable 'Aspect Ratio' (e.g. 16:9) under the widget's settings. Then in the 'Advanced' tab add a CSS class (e.g. 'video-wrapper') and add custom CSS in Elementor → Site Settings → Custom CSS: `.video-wrapper { aspect-ratio: 16/9; width: 100%; }` to lock in reserved space.
3. For any widget that loads dynamic content (Posts, Portfolio, WooCommerce Products grid, etc.), go to the widget's 'Layout' tab and set fixed 'Min Height' values for cards/items so the container does not collapse before content renders.
4. Eliminate font-swap layout shifts: navigate to Elementor → Site Settings → Typography, and for each Global Font set the 'Font Display' property to 'Swap' and, where possible, preload the primary font by adding a `<link rel='preload'>` tag via Elementor → Site Settings → Custom Code (Head).
5. Go to Elementor → Site Settings → Performance (or the active theme's settings if using Hello Elementor) and enable 'Optimized DOM Output'. This reduces extra wrapper `<div>`s that can shift surrounding content unexpectedly.
6. Use Elementor's Responsive Mode (the device icons in the bottom editor bar) to verify that every breakpoint (Desktop, Tablet, Mobile) also has explicit dimensions set — CLS often spikes on mobile where sizes are left 'Auto'. Adjust width/height or aspect-ratio CSS per breakpoint as needed, then click 'Update' to publish.

<!-- CORRECT: explicit width and height prevent layout shift -->
<img
  src="/images/product-red-sneaker.jpg"
  alt="Red canvas sneaker, side view"
  width="800"
  height="800"
  loading="lazy"
>

Reduce Interaction to Next Paint (INP) to under 200 ms by breaking up long JavaScript tasks, deferring non-critical third-party scripts, and lightening event handlers so the page feels fast and responsive after every tap or click.

On Elementor

1. In the WordPress dashboard, go to Elementor → Settings → Performance tab. Enable the 'Improved Asset Loading' (formerly Improved CSS Loading) option and set 'Load Elementor CSS Print Method' to 'Internal Embedding' to reduce render-blocking requests that contribute to long main-thread tasks on interaction.
2. Still in Elementor → Settings → Performance, enable 'Lazy Load Background Images' and turn OFF any Elementor features you are not using (e.g. Motions Effects, Floating Effects, Scroll Snap) under the 'Features' tab — each unused feature removes a JavaScript module that competes for the main thread during user interactions.
3. Go to Elementor → Settings → Experiments and disable any experimental or beta widgets/features that are inactive on your site (e.g. Nested Elements, Container Grid) — experimental code runs JavaScript listeners on every interaction and can inflate INP.
4. Install or configure a WordPress performance plugin (e.g. WP Rocket, LiteSpeed Cache, or Perfmatters) and enable 'Delay JavaScript Execution' (sometimes called 'defer JS on user interaction'). Add Elementor's non-critical scripts (e.g. elementor-frontend.js animations, motion effects) to the delay list so they do not block the main thread before the first user interaction is processed.
5. In your performance plugin's exclusion list, ensure that any Elementor widget scripts tied to interactive elements (forms, accordions, tabs, sliders) are NOT delayed — only delay purely visual/animation scripts. This prevents INP regressions on click/tap targets.
6. After saving all settings, clear all caches (Elementor → Tools → Regenerate Files & Data, then your caching plugin's cache), then re-test INP in Chrome DevTools (Performance panel → Interactions track) or PageSpeed Insights to confirm all interaction delays are under 200 ms.

Reduce Largest Contentful Paint (LCP) to under 2.5 seconds by serving the hero image in a next-gen format (WebP/AVIF), preloading it, and eliminating render-blocking resources.

On Elementor

1. Convert your hero image to WebP (or AVIF) before uploading: use Squoosh (squoosh.app) or ShortPixel to export the image as WebP at 80–85% quality, keeping the same dimensions as the original. Upload this WebP file to your WordPress Media Library.
2. Set the hero image as the LCP element in Elementor: open the page in Elementor Editor, click the Section or Widget containing the hero image, go to Advanced → Motion Effects and ensure no lazy-load or entrance animation is applied to it (animations delay LCP paint). If it is an Image widget, confirm 'Loading' is set to 'Eager' under Content → Image → Advanced Attributes.
3. Enable Elementor's built-in image optimization: in WordPress Admin go to Elementor → Settings → Performance, enable 'Optimize Images' and set the format to WebP. This makes Elementor serve WebP automatically to supporting browsers via its srcset generation.
4. Add a preload hint for the hero image to eliminate discovery delay: go to Elementor → Custom Code (or use a plugin like 'Head, Footer and Post Injections'), add a <link rel='preload' as='image' href='/wp-content/uploads/YOUR-HERO.webp' fetchpriority='high'> tag in the <head> section so the browser fetches it before parsing render-blocking resources.
5. Reduce render-blocking CSS/JS generated by Elementor: in Elementor → Settings → Performance, enable 'Improved Asset Loading' (loads only the CSS/JS needed per page), enable 'Inline CSS for Critical Elements', and turn on 'Remove Unused CSS'. Then enable 'Defer Non-Critical CSS' to prevent stylesheets from blocking the initial render.
6. Test the result: clear all caches (Elementor → Tools → Regenerate CSS & Data, then your hosting/CDN cache), then run a PageSpeed Insights test on the page. Confirm LCP is under 2.5 s, the LCP element is the hero image, and the WebP format is confirmed in the 'Largest Contentful Paint element' diagnostic.

<!-- Step 1: Preload the LCP hero image -->
<link
  rel="preload"
  as="image"
  href="/images/hero-banner.webp"
  imagesrcset="/images/hero-banner-400.webp 400w,
               /images/hero-banner-800.webp 800w,
               /images/hero-banner-1500.webp 1500w"
  imagesizes="100vw"
  fetchpriority="high"
>

<!-- Step 2: Hero <img> tag — eager, high priority, no lazy-load -->
<img
  src="/images/hero-banner-1500.webp"
  srcset="/images/hero-banner-400.webp 400w,
          /images/hero-banner-800.webp 800w,
          /images/hero-banner-1500.webp 1500w"
  sizes="100vw"
  alt="[Descriptive alt text for your hero image]"
  width="1500"
  height="600"
  loading="eager"
  fetchpriority="high"
>

Write a unique, page-specific meta description for every page on your store so Google can display a compelling, accurate snippet for each one in search results.

On Elementor

1. Open the Elementor editor for the page you want to fix by going to your WordPress dashboard → Pages (or Posts) → hover over the page → click 'Edit with Elementor'.
2. In the Elementor editor, click the hamburger menu (☰) in the top-left corner, then select 'Page Settings' (the gear/cog icon at the bottom of the left panel) to open the page-level settings panel.
3. Scroll down in the Page Settings panel to find the 'SEO' or meta section. If you have a dedicated SEO plugin (Yoast SEO or Rank Math) installed alongside Elementor, look for that plugin's meta box below the WordPress block editor — switch to the WordPress editor view (Dashboard → Pages → Edit) and locate the Yoast SEO or Rank Math panel at the bottom of the page.
4. In the Yoast SEO panel click the 'Google Preview' snippet editor or in Rank Math open the 'Edit Snippet' section, then click into the 'Meta Description' field and delete any duplicated or auto-generated text.
5. Write a unique, page-specific meta description (150–160 characters) that accurately summarises this page's content and includes a relevant keyword and a compelling reason to click. Confirm no other page on the site uses the same description.
6. Save the page: click 'Update' in Elementor or 'Update'/'Publish' in the WordPress editor, then re-crawl the page using Google Search Console (URL Inspection → Request Indexing) to push the new description to Google.

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Shop women's running shoes at Acme Store — lightweight, cushioned designs for road and trail. Free shipping on orders over $50.">
  <title>Women's Running Shoes | Acme Store</title>
</head>

Give every page a unique, descriptive title tag that accurately reflects that page's specific content.

On Elementor

1. In your WordPress dashboard, go to Pages (or Posts) and identify every page built with Elementor that shares a duplicate title tag. You can spot these quickly by running a crawl with a plugin like Yoast SEO or by checking the SEO audit that flagged the issue.
2. Open the first offending page in the Elementor editor by clicking 'Edit with Elementor'. Then click the hamburger menu (☰) in the top-left corner of the editor panel and select 'Page Settings' (the gear icon at the bottom of the left panel).
3. In the Page Settings panel, scroll to the 'SEO' tab (if you have an SEO plugin such as Yoast SEO or Rank Math active, their meta boxes appear below the Elementor canvas in the WordPress block editor instead — switch to the WordPress editor sidebar for those fields).
4. If using Yoast SEO or Rank Math: close the Elementor editor, go to the standard WordPress page editor for that page, and locate the Yoast/Rank Math meta box. Click 'Edit snippet' (Yoast) or expand the 'Title' field (Rank Math). Enter a unique, descriptive title that clearly reflects that specific page's content — include the primary keyword naturally and keep it under 60 characters.
5. If you are controlling titles through Elementor's Theme Builder (i.e., a custom Header or single-page template): go to Elementor → Theme Builder → find the relevant template → open it in the editor → locate any Title or Heading widget used as the SEO/HTML title, or use Elementor's Dynamic Tags on the site title widget to map it to each page's individual post title rather than a static string.
6. Repeat for every page with a duplicate title, then verify the fixes by revisiting your SEO plugin's audit or by inspecting each page's <title> tag in browser DevTools (right-click → View Page Source → search for '<title>').

<head>
  <title>Merino Wool Running Socks – Free UK Shipping | BrandName</title>
</head>

Add descriptive alt text to every product and content image so search engines and screen readers can understand what the image shows.

On Elementor

1. Open the Elementor editor for the page containing the image: in your WordPress dashboard go to Pages (or Posts / Products), hover over the entry, and click 'Edit with Elementor'.
2. Click directly on the Image widget (or any widget that contains an image, such as Image Box, Image Carousel, or WooCommerce Product Images) that is missing alt text. The left-hand panel will show its settings.
3. In the left panel, locate the 'Image' field and click the thumbnail to open the WordPress Media Library. If the image is already selected, click the pencil/edit icon on the thumbnail instead.
4. In the Media Library modal, select the image. On the right-hand side, find the 'Alt Text' field (under 'Attachment Details') and type a concise, descriptive phrase that explains what the image shows — include a relevant keyword naturally, e.g. 'Red leather handbag with gold clasp – front view'.
5. Click 'Select' (or 'Insert Media') to confirm, then verify the alt text is reflected in the widget settings panel. For Image Box or other composite widgets, also check whether a separate 'Alt' or 'Image Alt' field exists directly in the widget's Content tab and fill it in there.
6. Click 'Update' (or 'Publish') in the Elementor top bar to save the page, then repeat for every other image widget on the page and across all pages flagged in the audit.

<!-- BEFORE (missing alt — bad) -->
<img src="/images/red-leather-bag.jpg">

<!-- AFTER (descriptive alt — correct) -->
<img src="/images/red-leather-bag.jpg" alt="Red leather crossbody bag with gold buckle clasp">

<!-- Decorative image (intentionally empty alt — correct) -->
<img src="/images/divider-line.png" alt="">

Improve your Lighthouse/PageSpeed performance score by reducing page weight, eliminating render-blocking resources, optimising images, and addressing Core Web Vitals so Google ranks your store higher in search results.

On Elementor

1. In your WordPress admin, go to Elementor → Settings → Performance tab. Enable 'Optimized Asset Loading' (Improved Asset Loading) to load only the CSS/JS required for each page instead of site-wide, then save changes.
2. Still in Elementor → Settings → Performance, enable 'Improved CSS Loading' to inline critical CSS and defer non-critical stylesheets, and turn on 'Lazy Load Background Images' so off-screen background images set via Elementor widgets are deferred.
3. Go to Elementor → Settings → Experiments and activate 'Optimized DOM Output' — this reduces the number of wrapper divs Elementor renders, cutting HTML payload and improving rendering performance.
4. For every image widget in Elementor editor, open the Content tab of the Image or Section/Column background, set the Image Size to the smallest adequate preset (e.g. 'Large' instead of 'Full'), and in the Advanced tab enable the native 'Lazy Load' attribute so images below the fold are not fetched on initial load.
5. Install a WordPress caching + minification plugin compatible with Elementor (e.g. LiteSpeed Cache or WP Rocket), configure it to minify & combine CSS/JS, enable browser caching, and in its 'Excluded JS/CSS' list whitelist Elementor's core files (elementor/assets/js/frontend.min.js) to avoid breaking interactions.
6. After applying all changes, go to Elementor → Tools → Regenerate CSS & Data to flush Elementor's stylesheet cache, then verify scores in Google PageSpeed Insights or Lighthouse to confirm Core Web Vitals (LCP, CLS, FID/INP) have improved on both mobile and desktop.

<!-- In <head>: preconnect to critical third-party origins to reduce connection latency -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Preload your Largest Contentful Paint image (hero/banner) so it loads earlier -->
<link rel="preload" as="image" href="/images/hero.webp" fetchpriority="high">

<!-- Hero image: eager load, explicit dimensions to prevent CLS -->
<img
  src="/images/hero.webp"
  alt="Descriptive alt text for your hero image"
  width="1200"
  height="600"
  fetchpriority="high"
  decoding="async"
>

<!-- All other images: lazy load, explicit dimensions to prevent CLS -->
<img
  src="/images/product-shot.webp"
  alt="Descriptive product alt text"
  width="800"
  height="800"
  loading="lazy"
  decoding="async"
>

<!-- Defer non-critical third-party scripts (analytics, chat, pixels) -->
<script src="https://example-analytics.com/tracker.js" defer></script>

<!-- Load non-critical CSS asynchronously to unblock render -->
<link rel="preload" href="/css/non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/non-critical.css"></noscript>

Shorten your meta description to 150–160 characters so Google displays it in full instead of cutting it off with "…" in search results.

On Elementor

1. In your WordPress dashboard, open the page or post with the too-long meta description in the Elementor editor (Edit with Elementor), then scroll down below the canvas to the document settings panel — or use the Yoast SEO / Rank Math / SEO Framework metabox that appears beneath the Elementor editor on the page edit screen in WP Admin.
2. Click the 'SEO' tab (Yoast: the 'Google Preview' section under the SEO metabox; Rank Math: the 'Edit Snippet' button; All in One SEO: the 'Meta Description' field in the AIOSEO Settings box) to reveal the meta description field for this specific page.
3. Read the current meta description and note its character count — the field's live counter will show it is over 160 characters.
4. Rewrite the meta description so it is between 150 and 160 characters: lead with the primary keyword, summarise the page's unique value, and end with a subtle call to action. Remove filler words, redundant phrases, or repeated brand names to trim the length.
5. Confirm the character counter in the snippet preview turns green (Yoast) or shows 'Good' (Rank Math / AIOSEO) — indicating the description is within the 150–160 character target.
6. Click 'Update' (or 'Publish') in the Elementor top bar or the WP Admin sidebar to save the change, then use Google Search Console's URL Inspection tool to request re-indexing of the page so Google picks up the new, correctly-lengthed description.

<meta name="description" content="Award-winning Bang & Olufsen headphones, speakers and TVs. Visit our Malaysia showroom at The Gardens Mall, Level 2. Free shipping on orders over RM500.">

Expand your meta description to 120–160 characters so Google displays a compelling, complete snippet in search results that drives more clicks to your store.

On Elementor

1. In your WordPress dashboard, open the page or post you want to fix with Elementor by clicking 'Edit with Elementor' to launch the Elementor editor.
2. In the Elementor editor, click the hamburger menu (☰) in the top-left corner, then select 'Page Settings' (the gear/cog icon at the bottom of the left panel) — or, if you are using Yoast SEO or Rank Math alongside Elementor, scroll to the SEO plugin's meta box below the editor in the WordPress block panel.
3. Locate the 'Meta Description' field: in Yoast SEO click the 'SEO' tab → 'Edit snippet' and find the 'Meta description' input; in Rank Math click the Rank Math icon in the Elementor top bar → 'Edit Snippet' → 'Description'; if using Elementor's native settings, find it under Page Settings → 'Advanced' → 'Meta Description'.
4. Type or rewrite your meta description directly in that field, aiming for 120–160 characters. Use the character counter shown beneath the field to confirm you are within range — the indicator should turn green (Yoast/Rank Math) or display a count at or below 160.
5. Include your primary keyword naturally near the beginning of the description and add a clear call-to-action (e.g., 'Shop now', 'Free shipping', 'Explore the collection') to maximise click-through rate.
6. Click 'Update' (or 'Publish') in the Elementor top bar to save your changes, then use Google's Rich Results Test or a SERP preview tool to verify the description renders correctly at the intended length.

<meta name="description" content="Shop the official Nike national team jerseys — advanced Dri-FIT heat tech meets bold heritage design. Free shipping on orders over $75. Explore the full collection now.">

Add a self-referencing canonical tag to every page so Google knows which URL is the definitive version of that content.

On Elementor

1. Install and activate a dedicated SEO plugin that integrates with Elementor — Yoast SEO or Rank Math are the most widely supported. Both inject canonical tags into the <head> without requiring manual template edits.
2. In your WordPress dashboard, go to the SEO plugin's global settings (Yoast: SEO → Search Appearance → General; Rank Math: Rank Math → General Settings → Links) and confirm that 'Canonical URL' output is enabled (it is on by default in both plugins).
3. Open any page in the Elementor editor, then click the hamburger menu (☰) → 'Page Settings' (Yoast) or the Rank Math icon in the WordPress post editor sidebar. Verify that the 'Advanced' tab shows no override in the canonical field — leave it blank so the plugin auto-generates the self-referencing canonical.
4. For pages built entirely in Elementor's full-site-editing canvas (Theme Builder → Single templates), open each template in the Elementor editor, click Settings (⚙) → 'Page Layout', and confirm the template does not suppress the <head> or use a blank canvas layout that strips WordPress hooks — switch to 'Elementor Canvas' only for true landing pages, otherwise use 'Default' or your theme's layout so the SEO plugin's wp_head hooks fire correctly.
5. After publishing, use 'View Page' to load the live URL, right-click → View Page Source, and search for '<link rel="canonical"' to confirm the tag is present and matches the page's own URL exactly (no trailing-slash mismatch, no www/non-www mismatch).
6. If any page still lacks the tag, check Elementor's Custom Code feature (Elementor → Custom Code) as a fallback: create a new snippet scoped to that page's condition, paste '<link rel="canonical" href="https://yourdomain.com/your-page-slug/" />', set its location to 'Head', and publish — this ensures the canonical is output even if a plugin conflict exists.

<link rel="canonical" href="https://www.yourstore.com/your-page/" />

Add a single, descriptive H1 tag to every page that currently lacks one, clearly stating the page's main topic.

On Elementor

1. Open the affected page in Elementor by navigating to Pages (or Products/Posts) in the WordPress dashboard, hovering over the page, and clicking 'Edit with Elementor'.
2. In the Elementor editor, scan the existing layout for any Heading widget that is already set to H1: click each Heading widget and check the 'HTML Tag' dropdown in the Content tab (left panel). If one exists, update its text to be a clear, descriptive statement of the page's main topic and skip to step 5.
3. If no H1 exists, drag a new 'Heading' widget from the Elements panel (search 'Heading') into the topmost content section of the page — place it above all other content widgets so it is the first meaningful heading in the DOM.
4. With the new Heading widget selected, go to the Content tab in the left panel: set the 'HTML Tag' dropdown to 'H1', then type a single, descriptive title that clearly states the page's main topic (e.g. 'Women's Running Shoes' for a category page).
5. Switch to the Style tab for the Heading widget and adjust typography/color to match the site's visual design — ensure the H1 is visually prominent, but do not use CSS to hide it (avoid display:none or visibility:hidden, which can cause SEO penalties).
6. Click the green 'Update' button (bottom of the left panel) to publish the change, then verify by viewing the live page and using browser DevTools (Ctrl+U / Cmd+U → search '<h1') or an SEO audit tool to confirm exactly one H1 tag is present.

<h1>Women's Running Shoes</h1>

Write and add a unique meta description (120–160 characters) to every page that is missing one, so Google can display an accurate, compelling snippet in search results.

On Elementor

1. In your WordPress dashboard, confirm that an SEO plugin (e.g. Yoast SEO or Rank Math) is installed and active — Elementor relies on these plugins to manage meta descriptions, as it has no native meta-description field of its own.
2. Open the page missing a meta description: go to Pages (or Posts) → find the page → click 'Edit with Elementor' to open the Elementor editor.
3. Scroll down below the Elementor canvas to the SEO plugin's meta box (e.g. the Yoast SEO box or Rank Math box that appears in the WordPress block editor panel). If you are in full-screen Elementor mode, click the hamburger menu (≡) in the top-left → 'Exit to Dashboard' or use the 'Page Settings' gear icon → switch to the WordPress editor tab to access the SEO meta box.
4. In the SEO plugin's box, click the 'Edit snippet' button (Yoast) or expand the 'General' tab (Rank Math), then click into the 'Meta description' field and type a unique description of 120–160 characters that accurately summarises the page's content and includes its primary keyword.
5. Check the live character-count indicator inside the SEO plugin box — ensure the bar turns green (Yoast) or the count falls within the recommended range (Rank Math) to confirm the length is correct.
6. Click 'Update' (WordPress editor) or the green 'Publish/Update' button in the Elementor editor to save the change, then verify the meta description is live by inspecting the page source (Ctrl+U) and searching for '<meta name="description"'.

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Shop our full range of handmade leather wallets. Free shipping on orders over $50. Slim, durable & personalised — order yours today.">
  <title>Handmade Leather Wallets | YourStoreName</title>
</head>

Add an og:description meta tag to every page so that social media platforms display a compelling, accurate preview when your pages are shared.

On Elementor

1. In your WordPress dashboard, go to Templates → Theme Builder (or Pages, if editing a standalone page) and open the page/template you want to fix in the Elementor editor.
2. Click the hamburger menu (☰) in the top-left corner of the Elementor editor panel, then select 'Page Settings' (the gear/cog icon at the bottom of the left panel).
3. In the Page Settings panel, click the 'Social' tab. Locate the 'Description' field under the Open Graph section and type a compelling, accurate summary of the page (aim for 120–160 characters).
4. If the Social tab or Open Graph fields are not visible, ensure you have an SEO plugin installed (e.g. Yoast SEO or Rank Math) — Elementor surfaces OG fields through these plugins. Open the plugin's meta box (below the editor or in its sidebar panel), navigate to its 'Social' or 'Facebook/Open Graph' tab, and enter the og:description there.
5. For site-wide coverage via a Theme Builder template (e.g. Single Post or Page template), use a dynamic tag in the og:description field: click the dynamic icon (the ⚡ symbol next to the Description field) and select 'Post Excerpt' or 'Post Custom Field' to auto-populate the tag for every page using that template.
6. Click 'Update' (or 'Publish') to save your changes, then validate the tag is present by pasting the page URL into the Facebook Sharing Debugger (https://developers.facebook.com/tools/debug/) and confirming that 'og:description' appears in the scraped tags.

<head>
  <!-- Open Graph / Social Sharing -->
  <meta property="og:type"        content="website" />
  <meta property="og:url"         content="https://www.example.com/page-url/" />
  <meta property="og:title"       content="Page Title – Brand Name" />
  <meta property="og:description" content="A concise, compelling summary of this page in 100–160 characters that encourages clicks." />
  <meta property="og:image"       content="https://www.example.com/images/social-preview.jpg" />
</head>

Add an og:image meta tag to every page so that social media platforms and messaging apps display a rich, branded image preview whenever someone shares your store's link.

On Elementor

1. In your WordPress dashboard, go to Elementor → Settings and confirm that you have an active SEO plugin (e.g. Yoast SEO, Rank Math, or All in One SEO) installed alongside Elementor, since Elementor itself does not output og:image tags — the og:image meta must be added via an SEO plugin or your theme's head settings.
2. Install or open your SEO plugin (e.g. Yoast SEO). Navigate to SEO → Social → Facebook (in Yoast) or the equivalent 'Social Meta' section in your chosen plugin, enable Open Graph meta tags globally, and upload a default fallback og:image (minimum 1200×630 px, under 8 MB) that will apply to any page that lacks a custom image.
3. For each key page built with Elementor, open the page in the Elementor editor, then click the hamburger menu (☰) → Site Settings → or close the editor and use the WordPress block editor sidebar. In the SEO plugin's meta box (visible below or beside the editor), locate the 'Social' or 'Facebook' tab and upload a page-specific og:image to override the sitewide default.
4. To set an og:image for Elementor Pro Theme Builder templates (headers, footers, single-post templates), go to Elementor → Theme Builder, open the relevant template, and use the SEO plugin's meta box within that template's edit screen to assign a representative og:image for the content type it renders.
5. After saving, verify the og:image tag is present by opening your page URL in the Facebook Sharing Debugger (https://developers.facebook.com/tools/debug/) or by viewing the page source and searching for 'og:image'. Confirm the image URL resolves, the dimensions meet the 1200×630 px minimum, and no 'missing image' warning appears.
6. If you are using the Hello Elementor theme without an SEO plugin, add the og:image tag manually by going to Appearance → Theme File Editor → header.php (or a child theme's functions.php) and outputting the tag via a wp_head action hook, ensuring you conditionally load the correct image per page using WordPress conditional tags such as is_front_page(), is_singular(), etc.

Add an og:title meta tag to every page so your store's title appears correctly when shared on social media platforms like Facebook, LinkedIn, and Pinterest.

On Elementor

1. In your WordPress dashboard, ensure you have an SEO plugin installed that Elementor integrates with — Yoast SEO or Rank Math are the most common choices. If neither is installed, install and activate one now (Plugins → Add New).
2. Open the page you want to fix in the Elementor editor (Pages → All Pages → Edit with Elementor), then click the hamburger menu (☰) in the top-left corner and select 'Page Settings' (the gear/cog icon at the bottom of the panel) — or, if using Yoast/Rank Math, look for their meta box below the WordPress block editor when NOT in Elementor's canvas.
3. For Yoast SEO: scroll down to the Yoast SEO meta box below the Elementor canvas (switch to WordPress editor view if needed), click the 'Social' tab (Facebook icon), and enter your desired title in the 'Facebook title' field — this directly sets og:title for that page.
4. For Rank Math: open the Rank Math sidebar in the WordPress editor (or via the Rank Math icon in Elementor's top bar if the integration is active), navigate to the 'Social' tab, enable 'Facebook / Open Graph', and type your title in the 'Title' field under the Facebook section.
5. To set a global og:title fallback for all pages, go to your SEO plugin's global settings: in Yoast, navigate to SEO → Search Appearance → Content Types and set the title template; in Rank Math, go to Rank Math → Titles & Meta → Global Meta and configure the 'Open Graph Title' format using variables like %title% and %sitename%.
6. Save the individual page in Elementor (click 'Update'), then validate the og:title tag is present by pasting the page URL into the Facebook Sharing Debugger (developers.facebook.com/tools/debug/) and confirming the 'og:title' property appears with the correct value.

<head>
  <!-- Other head tags -->
  <meta property="og:title" content="Amazing Product Name | Your Store Name" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://www.yourstore.com/page-url" />
  <meta property="og:description" content="Short description of this page for social sharing." />
  <!-- Other head tags -->
</head>

Add a unique, descriptive title tag (30–60 characters) to every page that is missing one.

On Elementor

1. In your WordPress dashboard, identify every page built with Elementor that is missing a title tag: navigate to Pages → All Pages and look for pages with no SEO title set (use an SEO plugin such as Yoast SEO or Rank Math alongside Elementor, as Elementor itself delegates title-tag output to these plugins or the theme).
2. Open the target page in the Elementor editor by clicking 'Edit with Elementor', then locate the SEO panel: in Yoast SEO, scroll down below the editor to the Yoast SEO meta box and click the 'SEO' tab; in Rank Math, click the Rank Math icon in the Elementor top bar or use the WordPress meta box below the editor.
3. In the SEO plugin's meta box, click into the 'SEO Title' field (labelled 'Title' in Yoast or 'Title' under the General tab in Rank Math) and type a unique, descriptive title that accurately reflects the page's content and is between 30 and 60 characters long — use the character-count indicator in the plugin to stay within the green zone.
4. Avoid duplicating titles across pages: incorporate the primary keyword for that page near the beginning of the title, and optionally append a short brand separator (e.g. ' | Brand Name') only if it keeps the total under 60 characters.
5. Click 'Update' or 'Publish' in the Elementor top bar to save the page, then verify the rendered title tag by viewing the live page and inspecting the `<title>` element in your browser's developer tools (Elements tab → `<head>`).
6. Repeat for every page flagged as missing a title tag, then re-crawl the site (e.g. via Google Search Console → URL Inspection or your SEO audit tool) to confirm the titles are now detected.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Slim Bifold Leather Wallet | BrandName</title>
</head>
<body>
  <!-- page content -->
</body>
</html>

Remove all but one H1 tag from each page so every page has exactly one clear, descriptive primary heading.

On Elementor

1. Open Elementor Editor for the affected page: in your WordPress dashboard go to Pages (or Posts) → find the page → click 'Edit with Elementor'.
2. Audit all H1 tags on the page: click the navigator icon (the stacked-layers icon in the bottom toolbar) to open the Navigator panel, then click through every Heading widget and check its 'HTML Tag' setting (found under Content → HTML Tag). Also inspect any theme-injected H1 (e.g. a page-title section at the top of the template) by switching to Theme Builder if the page uses a custom template.
3. Identify the single most descriptive heading that should remain as H1 (typically the main page/product/category title). Leave its HTML Tag set to 'H1'.
4. For every other Heading widget whose HTML Tag is currently set to 'H1', click that widget, go to Content → HTML Tag, and change it to the appropriate semantic level — usually 'H2' for section headings or 'H3' for sub-sections — based on the page's content hierarchy.
5. Check for H1s hidden inside Global Widgets or saved Template sections: in the Navigator, look for any 'Template' blocks, click 'Edit Template', repeat the same audit inside that template's Heading widgets, and update their HTML Tags accordingly.
6. Click 'Update' (green button, bottom-left) to publish the changes, then verify by right-clicking the live page → 'View Page Source' and searching (Ctrl+F) for '<h1' to confirm exactly one H1 tag appears in the page HTML.

<!-- CORRECT: One H1 per page -->
<h1>Blue Running Shoes – Men's Lightweight Trainers</h1>

<!-- Major sections use H2 -->
<h2>Product Details</h2>
<p>Breathable mesh upper, responsive foam midsole...</p>

<h2>Customer Reviews</h2>
<!-- Sub-sections within a major section use H3 -->
<h3>Top Review: 5 Stars</h3>
<p>Best shoes I've ever bought!</p>

<!-- WRONG: Multiple H1 tags — do NOT do this -->
<!--
<h1>Blue Running Shoes</h1>
<h1>Product Details</h1>
<h1>Customer Reviews</h1>
-->

Remove or replace the noindex directive on any page you want to appear in Google search results.

On Elementor

1. Open the WordPress dashboard and navigate to the page or post where noindex is detected. Click 'Edit with Elementor' to open the Elementor editor.
2. In the Elementor editor, click the hamburger menu (☰) in the top-left corner, then select 'Page Settings' (or click the gear icon at the bottom of the left panel) to open the document settings panel.
3. Look for an 'Advanced' tab or a 'SEO' section within Page Settings. If you have Yoast SEO, Rank Math, or All in One SEO installed (which integrate directly into Elementor's sidebar), locate the SEO plugin's panel — find the 'Advanced' tab inside it and check the 'Robots Meta' or 'Robots Index' setting. Ensure it is set to 'Index' (not 'noindex').
4. If no SEO plugin panel is visible, exit the Elementor editor and go to the WordPress page/post edit screen (classic editor or block editor). Scroll down to your SEO plugin's meta box (e.g. Yoast SEO, Rank Math), open its 'Advanced' tab, and confirm the 'Allow search engines to show this page in search results' (Yoast) or 'Robots Meta' (Rank Math) field is set to 'Yes / Index' — remove any 'noindex' value.
5. Also check the global SEO settings: in Yoast SEO go to SEO → Search Appearance → Content Types and ensure the relevant post type is set to 'Yes' for indexing. In Rank Math go to Rank Math → Titles & Meta → the relevant post type and confirm 'robots' does not include noindex.
6. Once the noindex directive is removed, click 'Update' or 'Publish' in Elementor (the green button, bottom of left panel) to save the page, then use Google Search Console's URL Inspection tool to request re-indexing of the page.

<meta name="robots" content="index,follow">

Audit every page whose canonical tag points to a different URL, then either correct it to self-reference or confirm the cross-reference is intentional and correct.

On Elementor

1. In your WordPress dashboard, go to Elementor → Settings → Advanced and check the 'Custom Code' (or 'Custom Head Code') section. If a global canonical <link rel='canonical'> tag has been inserted here, review it immediately — a single misconfigured global canonical here will override every page on the site.
2. For per-page canonicals, open each flagged page in the Elementor editor, then click the hamburger menu (☰) → Site Settings → or use the Page Settings panel (the gear icon at the bottom-left). Navigate to the 'Advanced' tab and look for any 'Custom Head Code' field where a <link rel='canonical'> may have been manually hardcoded. Update the URL to exactly match the page's own published URL (self-referencing), or remove the tag entirely to let your SEO plugin manage it.
3. If you use an SEO plugin alongside Elementor (e.g. Yoast SEO, Rank Math, or All in One SEO), check that plugin's canonical field for each flagged page under WordPress Admin → Pages → Edit (Classic/Block editor) → SEO meta box → Advanced → Canonical URL. A blank field means the plugin auto-generates a correct self-referencing canonical; only enter a value if a cross-reference is intentional (e.g. a paginated series or syndicated content).
4. Audit Elementor Theme Builder templates (Elementor → Templates → Theme Builder) — Header, Single Post, and Page templates can inject custom code into the <head>. Open each active template, go to its 'Custom Code' or 'Custom CSS/JS' area, and search for any hardcoded canonical tags that may be applying a single URL across multiple pages. Parameterise these with Elementor dynamic tags (e.g. {page_url}) or remove them.
5. After saving corrections, use Elementor's built-in 'Regenerate CSS & Data' tool (Elementor → Tools → General → Regenerate Files & Data) to flush cached output, then re-crawl the corrected pages with a tool like Screaming Frog or Google Search Console's URL Inspection tool to confirm each page now returns a canonical tag pointing to its own URL.
6. For any cross-page canonical that is intentional (e.g. a filtered/faceted URL canonicalising to a master category page), document the decision in Elementor's page notes or your SEO plugin's canonical field with a comment, and verify the target canonical URL returns a 200 status and is itself self-referencing — a canonical chain (A→B→B is fine; A→B→C is not).

<link rel="canonical" href="https://www.example.com/your-page-url/">

Reduce your page load time to under 1.5 seconds by optimizing images, eliminating render-blocking resources, and enabling caching and compression.

On Elementor

1. In your WordPress dashboard, go to Elementor → Settings → Performance. Enable 'Improved Asset Loading' (loads only the CSS/JS required for each page) and set 'CSS Print Method' to 'External File' so stylesheets are cached by the browser rather than inlined on every request.
2. Still in Elementor → Settings → Performance, enable 'Lazy Load Background Images' and turn on 'Optimized DOM Output' to reduce the number of wrapper divs Elementor renders, shrinking HTML payload and speeding up rendering.
3. Go to Elementor → Settings → Experiments and enable 'Flexbox Container' (replaces legacy nested divs with a leaner flex layout) and 'Optimized CSS Loading' if available — both reduce render-blocking CSS delivered per page.
4. For every image widget in your Elementor pages, open the widget settings, set the Image Size to the smallest display-appropriate size (e.g. 'Large' instead of 'Full'), and enable the native 'Lazy Load' attribute under Advanced → Additional Options so off-screen images are deferred.
5. Install a caching and minification plugin compatible with Elementor (e.g. LiteSpeed Cache, WP Rocket, or W3 Total Cache). In that plugin: enable Page Caching, enable GZIP/Brotli compression, and minify + combine CSS/JS files — then go to Elementor → Tools → Regenerate CSS & Data after saving, to ensure Elementor's generated stylesheets are refreshed under the new caching rules.
6. After all changes, go to Elementor → Tools → Regenerate CSS & Data and click 'Regenerate Files'. Then test your page speed in a tool such as Google PageSpeed Insights or WebPageTest to confirm load time is under 1.5 seconds; revisit any remaining Elementor widgets that load unused third-party scripts (e.g. Google Maps, Video) and switch them to a 'facade' or lazy-load approach where possible.

Write a 100–200 word description for every category page explaining what products it contains and who they are for, so Google can rank it for category-level keywords.

On Elementor

1. In your WordPress dashboard, go to Templates → Theme Builder. Locate (or create) the Archive template that controls your WooCommerce category pages — it is typically labeled 'Product Archive' or 'WooCommerce Archive'.
2. Open the Archive template in the Elementor editor. Identify where the category header section sits (usually near the top, containing the category title). If no description widget exists yet, click the '+' icon to add a new widget in that section.
3. Drag a 'Text Editor' widget (or an 'Archive Description' widget if your theme/Elementor Pro exposes it) into the category header section, placed directly below the category title widget.
4. If using the 'Archive Description' widget, it will automatically pull the description you save in WooCommerce. If using a plain 'Text Editor' widget, switch to using the Archive Description widget instead so the text is dynamic and unique per category.
5. Save the template, then go to WooCommerce → Products → Categories. Edit each category one by one, and in the 'Description' field write a 100–200 word paragraph explaining what products the category contains, the key use cases, and who they are for — incorporating the target category-level keyword naturally.
6. Update each category and verify the description renders correctly on the live category page. Use a browser SEO tool (e.g., the 'SEO Meta in 1 Click' browser extension) to confirm the description text is present in the page's crawlable HTML and not hidden inside a collapsed/accordion element.

<section class="category-description">
  <h1>Women's Waterproof Hiking Boots</h1>
  <p>
    Our women's waterproof hiking boots are built for trail runners, weekend
    trekkers, and serious mountaineers who refuse to let wet weather slow them
    down. Every pair in this collection features a fully sealed waterproof
    membrane, aggressive rubber outsoles for grip on loose or muddy terrain,
    and reinforced ankle support to protect against sprains on uneven ground.
    Whether you're day-hiking a local forest trail or taking on a multi-day
    alpine route, you'll find boots here rated for every conditions and
    experience level. Lightweight options keep pack weight low on fast-and-light
    adventures, while insulated models keep feet warm below freezing. Browse the
    full range below to find your perfect fit.
  </p>
</section>

Either populate the empty category with products, or add a noindex tag and remove it from your navigation so Google does not waste crawl budget on a page with no content.

On Elementor

1. In your WordPress admin, go to Appearance → Menus (or Elementor → Theme Builder if your navigation is built with Elementor). Locate the empty category link in your menu structure and either remove it entirely or unlink it so it is no longer crawlable from your navigation.
2. If you choose to noindex the empty category instead of removing it, install or open your SEO plugin (e.g. Yoast SEO or Rank Math). Navigate to the category's edit screen (Posts → Categories → Edit), scroll to the SEO plugin meta box, open the 'Advanced' tab, and set 'Allow search engines to show this page in results' (Yoast) or 'Robots Meta' (Rank Math) to 'No Index'.
3. If the empty category has a dedicated Elementor template (Theme Builder → Single/Archive), open that template in the Elementor editor. Add a visible notice or redirect logic using an Elementor widget (e.g. a Text widget saying 'No products found') as a temporary measure, OR delete the custom template so the category falls back to your theme's default — making it easier to manage noindex via the SEO plugin.
4. To populate the category instead: go to WooCommerce → Products, open each relevant product, scroll to 'Product Categories' in the right-hand panel, check the empty category, and click 'Update'. Repeat until the category has at least one published product.
5. After making your changes, open Elementor → Tools → Regenerate CSS & Data, then flush any page/server cache (e.g. via your caching plugin or hosting panel) so the updated category page or removed menu link is served immediately.
6. Verify the fix by visiting the category URL and inspecting the page source for a <meta name='robots' content='noindex'> tag (if noindexing), or confirm the URL returns a 404/redirect and no longer appears in your site's navigation.

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

Write and publish a 200–400 word product description covering what the product is, its key specs, who it's for, and how to use it.

On Elementor

1. In your WordPress admin, go to Products → All Products and open the product that is missing a description. Confirm the native WooCommerce 'Product description' field (the main long-description editor below the product title) is empty or too short — this is the field Elementor reads for SEO.
2. In the same product edit screen, type your 200–400 word description directly into the main WordPress block editor / classic editor field (not the 'Short description' excerpt box). Cover: what the product is, key specs (size, material, compatibility, etc.), who it is for, and step-by-step usage instructions.
3. If you are using Elementor to build the product page layout, open the page in Elementor Editor (Edit with Elementor). Locate the WooCommerce widget named 'Product Data Tabs' or 'Product Description' in the widget panel (under WooCommerce category) and drag it onto the canvas if it is not already present — this widget dynamically renders the description you saved in step 2.
4. Alternatively, if you have built a custom product template via Elementor Theme Builder (Templates → Theme Builder → Single Product), open that template, find the 'Product Description' widget in the layout, and verify it is placed prominently above the fold or within the first content section. If missing, add it from the WooCommerce widgets panel.
5. Click 'Update' (or 'Publish') on the Elementor canvas to save the template, then return to the product and click 'Update' to save the product data. Preview the live product page and confirm the full description is visible in the rendered page body — not hidden inside a collapsed tab — so search engines can crawl it without JavaScript rendering issues.
6. Optionally, use Elementor's custom CSS or widget settings to ensure the description text is wrapped in a standard <div> with no 'display:none' or lazy-load attributes, keeping it immediately accessible to crawlers.

<section class="product-description">
  <h2>About This Product</h2>
  <p>
    The <strong>Trailblazer 500 Waterproof Hiking Boot</strong> is a lightweight,
    full-grain leather boot built for all-day comfort on rugged mountain trails.
    Its Gore-Tex membrane keeps feet dry in rain and creek crossings while the
    Vibram outsole delivers confident grip on wet rock and loose scree.
  </p>
  <p>
    Designed for day hikers and weekend backpackers who want reliable protection
    without the weight of a mountaineering boot, the Trailblazer 500 strikes the
    ideal balance between support and agility. The padded collar and gusseted
    tongue prevent trail debris from entering the boot, and the cushioned EVA
    midsole absorbs impact mile after mile.
  </p>
  <h3>Key Specifications</h3>
  <ul>
    <li><strong>Upper:</strong> Full-grain leather with Gore-Tex waterproof lining</li>
    <li><strong>Outsole:</strong> Vibram Megagrip rubber</li>
    <li><strong>Weight:</strong> 680 g / pair (size UK 9)</li>
    <li><strong>Shaft height:</strong> Mid (ankle) cut</li>
    <li><strong>Available widths:</strong> Standard and Wide</li>
  </ul>
  <h3>How to Use</h3>
  <p>
    Lace firmly for ankle support on uneven terrain. Break the boot in over two
    or three shorter walks before a full-day hike. Apply a water-repellent spray
    to the leather upper every 20–30 hours of trail use to maintain waterproofing.
  </p>
</section>

Add a visible stock availability label and an `availability` property to your Product structured data so Google can display rich results and shoppers know immediately whether a product is in stock.

On Elementor

1. Open Elementor Editor for your product page template: go to WordPress Admin → Templates → Theme Builder (or 'My Templates'), locate your Single Product template, and click Edit with Elementor.
2. Add a visible stock status label: click the '+' to add a widget in the product content area, search for the 'Text Editor' or 'Shortcode' widget, drag it below your product price, and enter a dynamic stock label. Use Elementor's Dynamic Tags (the database icon in the widget content field) → WooCommerce → Product Stock Status to pull in the live in-stock/out-of-stock value. Style it with a green/red colour via the widget's Style tab so shoppers see it immediately.
3. Inject the `availability` property into your Product structured data: in Elementor Pro go to the template's Page Settings (gear icon, bottom-left) → Advanced → Custom Code (or use WordPress Admin → Elementor → Custom Code → Add New), set Location to 'Head' or 'Body – End', and add a JSON-LD `<script>` block that includes `"availability": "https://schema.org/InStock"` (or `OutOfStock`) inside the `@type: Product` object. Use a PHP/WooCommerce conditional such as `$product->is_in_stock() ? 'InStock' : 'OutOfStock'` wrapped in `wp_enqueue_scripts` if adding via a child-theme functions.php, OR use Elementor's Custom Code shortcode with dynamic output.
4. If your theme/plugin already outputs Product schema (e.g. WooCommerce's default JSON-LD), avoid duplicating it: instead, filter and modify the existing schema by adding this snippet to your child theme's `functions.php`: `add_filter('woocommerce_structured_data_product', function($markup, $product){ $markup['offers']['availability'] = 'https://schema.org/' . ($product->is_in_stock() ? 'InStock' : 'OutOfStock'); return $markup; }, 10, 2);` — this ensures the `availability` field is always present.
5. Save and publish the Elementor template, then visit a live product page and use Google's Rich Results Test (https://search.google.com/test/rich-results) to paste the URL and confirm the Product schema now includes a valid `availability` property with no errors.
6. Repeat for any other Single Product templates in Elementor Theme Builder (e.g. sale items, pre-order products) and update the availability value accordingly (e.g. `PreOrder`, `OutOfStock`).

<!-- Product structured data with availability -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Your Product Name",
  "description": "A short description of your product.",
  "sku": "YOUR-SKU-123",
  "image": "https://www.example.com/images/product.jpg",
  "brand": {
    "@type": "Brand",
    "name": "Your Brand Name"
  },
  "offers": {
    "@type": "Offer",
    "url": "https://www.example.com/products/your-product",
    "priceCurrency": "USD",
    "price": "29.99",
    "availability": "https://schema.org/InStock",
    "itemCondition": "https://schema.org/NewCondition"
  }
}
</script>

<!-- Visible stock label near Add-to-Cart button -->
<p class="stock-status" style="font-weight:bold; color:#2a7a2a;">&#10003; In Stock</p>

Add a structured specifications table or list to every product page so shoppers, search engines, and AI tools can instantly find and use key product details.

On Elementor

1. In your WordPress dashboard, go to Templates → Theme Builder (or Single → Add New if using Elementor Pro), and open or create the Single Product template that controls your WooCommerce product pages.
2. Click 'Edit with Elementor' to open the product template in the Elementor canvas, then locate the section where product content is displayed (typically below the product gallery and short description).
3. Drag a new 'Section' or 'Inner Section' widget below the product description area to house the specifications table. Set its layout to a clean single-column or two-column structure as needed.
4. Inside the new section, add a 'Heading' widget and label it 'Specifications' (or 'Technical Details'), then below it add a 'Table' widget (available natively in Elementor Pro) — configure it with two columns ('Attribute' and 'Value') and add one row per specification (e.g., Material, Dimensions, Weight, Color, SKU). If you do not have the Pro Table widget, use an 'HTML' widget and write a semantic <table> with <th> headers and <td> data cells directly in the HTML editor.
5. For dynamic product data, use Elementor Pro's Dynamic Tags: click the dynamic icon (database symbol) on each table cell's content field and map it to the corresponding WooCommerce product attribute or custom field (e.g., pa_material, pa_dimensions) so each product auto-populates its own specs without manual editing.
6. Click 'Update' to save the template, then verify on a live product page that the specifications table renders correctly, uses visible semantic markup (inspect with browser DevTools to confirm <table>, <th>, and <td> tags are present), and is not hidden behind a tab or accordion that would prevent crawlers and AI tools from indexing it.

Rewrite every product page title tag to include the specific product name plus at least one differentiating attribute (variant, material, brand, or model) so Google and shoppers can instantly tell what the page is about.

On Elementor

1. In your WordPress admin, open the product page in Elementor by going to Products → find the product → click 'Edit with Elementor'.
2. With the Elementor editor open, click the hamburger menu (☰) in the top-left corner and select 'Site Settings', OR look for the 'SEO' panel in the page settings sidebar (bottom-left gear icon → 'SEO' tab) if you have Yoast SEO or Rank Math installed alongside Elementor.
3. In the SEO panel (Yoast: 'SEO title' field; Rank Math: 'Title' field under the 'General' tab), clear the current generic title and type a specific title following this pattern: [Exact Product Name] – [Differentiating Attribute, e.g. Material/Brand/Model/Variant] | [Store Name]. For example: 'Merino Wool Crew-Neck Sweater – Navy Blue | BrandName'.
4. If you are using Elementor's native dynamic tags instead of a separate SEO plugin, click on the page title text widget, then in the Content panel click the dynamic tag icon (⚡) next to the Title field and select 'Post Title', then hard-code any additional differentiating attributes as a suffix using the 'Before' / 'After' fields in the dynamic tag settings.
5. Click 'Update' (green button, top-right) to save the page, then use the 'Preview' button to confirm the browser tab and page <title> reflect the new, specific title.
6. Repeat for every product page with a generic title, or use Elementor's Theme Builder (Templates → Theme Builder → Single Product) to update the title template globally with dynamic tags such as {Product Name} + a static differentiating suffix, so future products inherit the improved pattern automatically.

<head>
  <title>Magnetic Card Holder Phone Mount – MagSafe Compatible – BrandName</title>
  <meta name="description" content="Attach your cards securely to any MagSafe-compatible iPhone with BrandName's slim magnetic card holder mount. Holds 1–3 cards. Available in black and white.">
</head>

Reduce your page load time to under 3 seconds by compressing images, eliminating render-blocking scripts and styles, and improving server response speed.

On Elementor

1. In your WordPress dashboard, go to Elementor → Settings → Performance. Enable 'Optimized Asset Loading' (Improved Asset Loading) to prevent Elementor from enqueuing CSS/JS on pages that don't use Elementor widgets, reducing render-blocking resources site-wide.
2. Still in Elementor → Settings → Performance, enable 'Improved CSS Loading' (Critical CSS) so Elementor generates and inlines only the critical CSS needed for above-the-fold content, deferring the rest — this directly eliminates render-blocking stylesheets.
3. Enable Elementor's built-in image lazy loading: go to Elementor → Settings → Performance and turn on 'Lazy Load Background Images'. For all Image widgets inside Elementor, open each widget's Advanced tab → ensure 'Lazy Load' is set to 'Yes' so off-screen images are deferred.
4. Compress and convert images at the source: in Elementor's image widgets, replace any uploaded PNG/JPG images with WebP versions (upload via Media Library with a plugin such as ShortPixel or Imagify, then re-select the optimized image inside each Elementor widget). Target file sizes under 150 KB per hero image.
5. Eliminate remaining render-blocking scripts: go to Elementor → Settings → Performance and enable 'Defer JavaScript Execution'. This adds the `defer` attribute to Elementor's own JS bundles, preventing them from blocking the browser's HTML parser.
6. Improve server response speed for Elementor-built pages: install a full-page caching plugin compatible with Elementor (e.g. LiteSpeed Cache or WP Rocket), then in that plugin's settings enable page caching, enable GZIP/Brotli compression, and activate a CDN integration so Elementor's static assets (elementor/assets/) are served from edge nodes closer to shoppers.

<img
  src="product-image.webp"
  alt="Descriptive product alt text"
  width="800"
  height="600"
  loading="lazy"
  decoding="async"
>

Add meaningful, original written content to pages that contain fewer than 300 words so Google has enough substance to rank and display them confidently.

On Elementor

1. In your WordPress dashboard, go to Pages (or Posts), identify the thin page, hover over it, and click 'Edit with Elementor' to open it in the Elementor visual editor.
2. Audit existing text by clicking each Text Editor or Heading widget — check the word count in the widget's content panel. Note how far short of 300 words the page currently falls.
3. Add a new Text Editor widget (drag it from the Elements panel on the left) to a logical section of the page — e.g. below the hero, above the CTA, or inside an existing column — then write or paste original, keyword-rich body copy (product benefits, how-to context, FAQs, use cases) until the total page word count exceeds 300 words.
4. If the layout has no suitable free column, add a new Section (click the '+' icon between sections) with a single or two-column structure, then drop a Text Editor widget inside it and populate it with substantive content relevant to the page topic.
5. Use Heading widgets (H2/H3) to break up the new content into scannable subsections — this improves both readability and on-page SEO signals. Set heading levels in the widget's 'HTML Tag' dropdown under the Content tab.
6. Click 'Update' (bottom of the Elementor left panel) to publish the changes, then re-crawl or re-inspect the page URL in Google Search Console (URL Inspection → 'Request Indexing') to prompt Google to re-evaluate the enriched page.

<section class="product-description">
  <h2>About This Product</h2>
  <p>
    The Merino Wool Crew-Neck Sweater is crafted from 100% ethically sourced
    Grade-A Merino wool, making it naturally temperature-regulating, moisture-
    wicking, and soft enough to wear directly against the skin. Perfect for
    layering in autumn and winter, or as a standalone piece during mild spring
    evenings.
  </p>

  <h3>Key Features</h3>
  <ul>
    <li>100% Merino wool — no synthetic blends</li>
    <li>Available in sizes XS–3XL with a relaxed, unisex fit</li>
    <li>12 colours, each piece individually yarn-dyed for depth</li>
    <li>Ribbed cuffs and hem for a tailored finish</li>
    <li>Machine washable on a gentle 30°C wool cycle</li>
    <li>Certified by the Responsible Wool Standard (RWS)</li>
  </ul>

  <h3>Sizing &amp; Fit</h3>
  <p>
    This sweater is cut with a relaxed, slightly oversized silhouette. If you
    prefer a closer fit, we recommend sizing down. See our full <a href="/size-guide">size guide</a>
    for chest, waist, and sleeve measurements.
  </p>

  <h3>Care Instructions</h3>
  <p>
    Machine wash cold on a gentle/wool cycle. Lay flat to dry — do not tumble
    dry, iron at high heat, or dry-clean. With proper care, Merino wool retains
    its shape and softness for years.
  </p>

  <h3>Frequently Asked Questions</h3>
  <dl>
    <dt>Is Merino wool itchy?</dt>
    <dd>
      No. Merino fibres are finer than standard wool (under 19.5 microns),
      which means they bend against the skin rather than prick it, making this
      sweater comfortable even for people who normally find wool irritating.
    </dd>
    <dt>How does Merino wool compare to cashmere?</dt>
    <dd>
      Merino is more durable and easier to care for than cashmere, while still
      offering exceptional softness. It's an ideal everyday choice for those
      who want luxury without high maintenance.
    </dd>
    <dt>Can I return or exchange this item?</dt>
    <dd>
      Yes. We accept returns and exchanges within 30 days of delivery, provided
      the item is unworn and in its original packaging. See our
      <a href="/returns">returns policy</a> for full details.
    </dd>
  </dl>
</section>

Shorten your page title tag to 60 characters or fewer so it displays fully — without truncation — in Google search results.

On Elementor

1. In your WordPress dashboard, open the page with the too-long title in the Elementor editor (Pages / Posts → Edit with Elementor).
2. Scroll down below the Elementor canvas to the document settings panel. If you have Yoast SEO or Rank Math installed, locate the SEO meta box (labeled 'Yoast SEO' or 'Rank Math SEO') directly beneath the editor — do NOT edit the WordPress 'Title' field, as that may differ from the SEO title tag.
3. In the SEO meta box, click the 'Edit snippet' button (Yoast) or expand the 'General' tab (Rank Math) to reveal the SEO Title field.
4. Rewrite the SEO Title so it is 60 characters or fewer (use the character counter shown in the meta box — Yoast shows a green bar when the length is optimal; Rank Math displays a live character count).
5. Keep the most important keyword near the beginning of the title, and remove filler words, redundant brand repetition, or overly verbose descriptors to reach the target length.
6. Click 'Update' (Yoast / Rank Math snippet editor) and then publish/update the page in Elementor to save all changes. Verify the truncation is resolved by pasting the new title into a SERP snippet preview tool.

<head>
  <meta charset="UTF-8">
  <title>Running Shoes for Men | YourBrand</title>
</head>

Expand your page title to between 30 and 60 characters so Google displays it fully in search results and shoppers can immediately understand what the page is about.

On Elementor

1. In your WordPress dashboard, open the page with the short title in Elementor by going to Pages (or Posts) → find the page → click 'Edit with Elementor'.
2. Once inside the Elementor editor, click the hamburger menu (☰) in the top-left corner and select 'Page Settings' (the gear/cog icon at the bottom of the left panel) to open the page's settings panel.
3. Scroll down within the Page Settings panel to locate the 'SEO' section — if you have Yoast SEO or Rank Math installed, a dedicated SEO meta box will appear below the Elementor canvas in the WordPress editor view (switch to 'WordPress Editor' mode via the hamburger menu → 'Exit to Dashboard' and then edit the page normally to access it).
4. In the SEO plugin's meta box (Yoast SEO: 'SEO title' field under the 'SEO' tab; Rank Math: 'Title' field under the 'General' tab), clear the existing title and type a new one that is between 30 and 60 characters — include your primary keyword and a clear description of the page (e.g., 'Handmade Soy Candles – Free Shipping Over $50').
5. Check the character counter or snippet preview within the SEO plugin to confirm the title falls within the 30–60 character range and looks correct in the simulated Google result.
6. Click 'Update' (or 'Publish') to save the page, then re-open it in Elementor to verify the displayed page heading still aligns with your new SEO title.

<head>
  <meta charset="UTF-8">
  <title>Men's Merino Wool Beanies – BrandName</title>
</head>

Restructure page content to lead with a direct, concise answer, use question-format headings, and add FAQ structured data so search engines and AI assistants can surface your answers prominently.

On Elementor

1. Open the Elementor editor for the target page: in your WordPress/WooCommerce dashboard go to Pages (or Posts), hover the page, and click 'Edit with Elementor'.
2. Identify the first content section below the hero/banner. Add a new Text Editor or Heading widget as the very first element in that section. Type a single, direct 2–3 sentence answer to the page's primary question (e.g., 'What is [Product/Topic]?') — this becomes your 'answer-first' lede. Use the Heading widget set to H2 or H3 for the question, and a Text widget immediately beneath it for the answer.
3. Scroll down and convert any existing plain-text FAQs or accordion sections to Elementor's native Toggle or Accordion widget. Set each Toggle/Accordion item's Title field as a full question (e.g., 'How long does shipping take?') and the Content field as the concise answer. This creates the semantic question/answer structure that AI assistants parse.
4. Add FAQ structured data (JSON-LD) to the page: install and activate the 'Rank Math SEO' or 'Yoast SEO' plugin if not already present. In Rank Math, open the page's Rank Math sidebar → Schema tab → Add Schema → FAQ. Map each question/answer to the Toggle/Accordion items you created. In Yoast, use the 'FAQ block' in the Yoast SEO sidebar and paste in your Q&A pairs. Save and publish.
5. If you prefer manual JSON-LD without a plugin, go to Elementor → the page's settings (gear icon, bottom-left) → Custom Code (or use Elementor Pro's Custom Code feature under Tools → Custom Code), add a new snippet scoped to 'Head', paste a valid FAQPage JSON-LD block containing all your question/answer pairs, and save.
6. Preview the page in Elementor, confirm the direct answer appears as the first visible text block below any hero image, and validate the FAQ structured data using Google's Rich Results Test (https://search.google.com/test/rich-results) before publishing.

<!-- Answer-first page structure template -->

<!-- 1. Direct-answer summary (≤160 characters) -->
<p class="answer-summary">
  [Product Name] does [core benefit] by [key mechanism] — ideal for [target customer].
</p>

<!-- 2. Question-format H2 subheading -->
<h2>What does [Product Name] do?</h2>
<p>Direct 1–2 sentence answer here. Then expand with supporting detail below.</p>

<!-- 3. Another question-format heading -->
<h2>Who is [Product Name] designed for?</h2>
<p>Direct answer. Then elaborate.</p>

<!-- 4. FAQ section (visible on page — required for FAQPage schema) -->
<section id="faq">
  <h2>Frequently Asked Questions</h2>

  <h3>How long does shipping take?</h3>
  <p>Standard shipping takes 3–5 business days. Express options are available at checkout.</p>

  <h3>What is your return policy?</h3>
  <p>We accept returns within 30 days of delivery on unused items in original packaging.</p>

  <h3>Is [Product Name] compatible with [common concern]?</h3>
  <p>Yes. [One-sentence direct answer with any important caveats.]</p>
</section>

<!-- 5. FAQPage JSON-LD (copy the JSON-LD snippet above and paste here or in <head>) -->

Add BreadcrumbList structured data (JSON-LD) to every page so Google can display your site's navigation path directly in search results.

On Elementor

1. In your WordPress dashboard, go to Elementor → Custom Code (requires Elementor Pro). Click '+ Add New' to create a new custom code snippet.
2. Give the snippet a descriptive name (e.g. 'BreadcrumbList Schema – JSON-LD'), set the Location to 'Head', and set it to load on the specific page types that need breadcrumbs (e.g. All Pages, or target by condition such as Posts, Product Pages, etc.).
3. In the code editor, paste a JSON-LD BreadcrumbList block. For example: <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ {"@type": "ListItem", "position": 1, "name": "Home", "item": "https://yourdomain.com/"}, {"@type": "ListItem", "position": 2, "name": "Category", "item": "https://yourdomain.com/category/"}, {"@type": "ListItem", "position": 3, "name": "Page Title", "item": "https://yourdomain.com/category/page/"} ] } </script> Replace the name and item values to match each page's actual navigation path.
4. Use Elementor's Display Conditions to scope each breadcrumb snippet to the correct page or template: click 'Add Condition', choose 'Include', then select the matching page, post type, or taxonomy. Create separate Custom Code entries for each unique breadcrumb path (e.g. one for the homepage, one per category, one for product pages).
5. For sites with many dynamic pages (e.g. WooCommerce products), install a dedicated SEO plugin such as Yoast SEO or Rank Math alongside Elementor — these plugins auto-generate dynamic BreadcrumbList schema based on the page hierarchy, eliminating the need for per-page manual snippets.
6. After publishing the snippet(s), open Google's Rich Results Test (https://search.google.com/test/rich-results) and paste each page's URL to confirm the BreadcrumbList structured data is detected and error-free.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://www.example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Women's Clothing",
      "item": "https://www.example.com/womens-clothing/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Dresses",
      "item": "https://www.example.com/womens-clothing/dresses/"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "Blue Wrap Dress",
      "item": "https://www.example.com/womens-clothing/dresses/blue-wrap-dress/"
    }
  ]
}
</script>

Add FAQPage schema markup to any page that contains a Frequently Asked Questions section so Google can display your answers as rich results directly in search.

On Elementor

1. In your WordPress dashboard, go to Pages (or Posts) and open the page built with Elementor that contains your FAQ section. Click 'Edit with Elementor' to launch the Elementor editor.
2. In the Elementor left panel, click the hamburger menu (☰) in the top-left corner, then go to Site Settings → Custom Code (Elementor Pro required). Alternatively, if you do not have Elementor Pro, install a lightweight plugin such as 'Insert Headers and Footers' to inject the schema — then skip to step 4.
3. In Custom Code, click '+ Add New' and give the snippet a descriptive name such as 'FAQPage Schema – [Page Name]'. Set the 'Location' to 'In Page Head' and the 'Priority' to 10. Scope it to the specific page using the 'Include On' condition (e.g., 'Page → [Your FAQ Page]').
4. Paste the following JSON-LD block into the code editor, replacing each Question/Answer pair with your actual FAQ content: <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [ { "@type": "Question", "name": "Your first question here?", "acceptedAnswer": { "@type": "Answer", "text": "Your first answer here." } }, { "@type": "Question", "name": "Your second question here?", "acceptedAnswer": { "@type": "Answer", "text": "Your second answer here." } } ] } </script> Add or remove Question/Answer objects to match every FAQ item visible on the page.
5. Click 'Apply' to save the Custom Code snippet, then click 'Publish' (or 'Update') in the Elementor editor to push the change live.
6. Validate the output by copying the page URL and pasting it into Google's Rich Results Test (https://search.google.com/test/rich-results). Confirm it detects a valid 'FAQ' rich result with no errors before requesting indexing in Google Search Console.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Frequently Asked Questions | Your Store</title>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
      {
        "@type": "Question",
        "name": "What is your return policy?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "We accept returns within 30 days of purchase. Items must be unused and in their original packaging."
        }
      },
      {
        "@type": "Question",
        "name": "How long does shipping take?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Standard shipping takes 5–7 business days. Expedited options are available at checkout."
        }
      }
    ]
  }
  </script>
</head>
<body>
  <h1>Frequently Asked Questions</h1>
  <h2>What is your return policy?</h2>
  <p>We accept returns within 30 days of purchase. Items must be unused and in their original packaging.</p>
  <h2>How long does shipping take?</h2>
  <p>Standard shipping takes 5–7 business days. Expedited options are available at checkout.</p>
</body>
</html>

Add HowTo structured data (JSON-LD) to any page that walks customers through a multi-step process, so Google can display your instructions as rich results in search.

On Elementor

1. In the WordPress dashboard, navigate to Elementor → Custom Code (requires Elementor Pro). Click '+ Add New' to create a new custom code snippet.
2. Name the snippet (e.g. 'HowTo Schema – [Page Name]'), set the Location to 'Head', and set the Page Condition to target only the specific page(s) that contain the multi-step process (e.g. a tutorial, assembly guide, or how-to article page).
3. In the code editor, paste a valid JSON-LD HowTo block, for example: <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "HowTo", "name": "How To [Task Name]", "description": "A brief description of what this guide accomplishes.", "step": [ {"@type": "HowToStep", "name": "Step 1 Title", "text": "Detailed instructions for step 1."}, {"@type": "HowToStep", "name": "Step 2 Title", "text": "Detailed instructions for step 2."}, {"@type": "HowToStep", "name": "Step 3 Title", "text": "Detailed instructions for step 3."} ] } </script> Replace all placeholder values with the real step names and descriptions that match the page content exactly.
4. Click 'Publish' to activate the snippet. Then open the target page in Elementor's editor, confirm the visible on-page step content matches the schema data, and save/update the page.
5. Validate the markup by visiting Google's Rich Results Test (https://search.google.com/test/rich-results), entering the page URL, and confirming it detects a valid HowTo result with no errors or warnings.
6. If the page is new or recently updated, submit its URL in Google Search Console under URL Inspection → Request Indexing so Google can crawl and index the HowTo schema promptly.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>How to Complete Your Task | Your Store</title>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "HowTo",
    "name": "How to Complete Your Task",
    "description": "Follow these steps to complete your task easily.",
    "totalTime": "PT10M",
    "step": [
      {
        "@type": "HowToStep",
        "position": 1,
        "name": "Prepare your materials",
        "text": "Gather everything you need before you start: list materials here."
      },
      {
        "@type": "HowToStep",
        "position": 2,
        "name": "Complete the main action",
        "text": "Describe exactly what the user should do in this core step."
      },
      {
        "@type": "HowToStep",
        "position": 3,
        "name": "Verify the result",
        "text": "Explain how the user confirms the task was completed successfully."
      }
    ]
  }
  </script>
</head>
<body>
  <!-- Your how-to page content -->
</body>
</html>

Add an Organization schema markup block to your store's homepage (and/or sitewide template) so search engines and AI assistants can definitively identify your brand.

On Elementor

1. In your WordPress dashboard, go to *Elementor → Custom Code* (requires Elementor Pro). Click *+ Add New* and name it 'Organization Schema Markup'.
2. In the code editor, select *JSON-LD* as the code type, set the *Location* to *Head*, and set *Display Conditions* to 'Entire Site' (or at minimum 'Front Page') so the schema loads sitewide.
3. Paste the following Organization schema into the editor, filling in your real brand values: ```json <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Organization", "name": "Your Brand Name", "url": "https://www.yourstore.com", "logo": "https://www.yourstore.com/logo.png", "sameAs": [ "https://www.facebook.com/yourbrand", "https://www.instagram.com/yourbrand", "https://twitter.com/yourbrand" ], "contactPoint": { "@type": "ContactPoint", "contactType": "customer service", "email": "support@yourstore.com" } } </script> ```
4. Click *Publish* to activate the Custom Code snippet. Elementor will inject it into the `<head>` on every page matching your display conditions.
5. Verify the schema is live by visiting your homepage, right-clicking → *View Page Source*, and searching for `application/ld+json` to confirm the Organization block appears in the HTML.
6. Paste your homepage URL into *Google's Rich Results Test* (search.google.com/test/rich-results) and confirm the Organization entity is detected without errors or warnings.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Acme Store",
  "url": "https://www.acmestore.com",
  "logo": {
    "@type": "ImageObject",
    "url": "https://www.acmestore.com/images/logo.png",
    "width": 250,
    "height": 250
  },
  "sameAs": [
    "https://www.facebook.com/acmestore",
    "https://www.instagram.com/acmestore",
    "https://twitter.com/acmestore",
    "https://www.linkedin.com/company/acmestore",
    "https://www.youtube.com/c/acmestore"
  ],
  "contactPoint": {
    "@type": "ContactPoint",
    "contactType": "customer service",
    "email": "hello@acmestore.com"
  }
}
</script>

Add WebPage schema markup to every page so search engines and AI answer engines can precisely understand and describe your content.

On Elementor

1. Install and activate the Yoast SEO plugin (or RankMath) alongside Elementor — these plugins are the recommended way to inject WebPage schema on Elementor-built pages, since Elementor's native settings do not output schema markup by default.
2. In the WordPress dashboard, go to Yoast SEO → Search Appearance → Content Types. For each post type (Pages, Posts, Products, etc.), ensure the 'Schema' tab is visible and set 'Page type' to the appropriate WebPage subtype (e.g., WebPage, AboutPage, ContactPage, FAQPage) so the correct schema is emitted site-wide by default.
3. For individual pages built with Elementor, open the page in the Elementor editor, then click the Yoast SEO metabox at the bottom of the WordPress editor (outside the Elementor canvas) or use the Yoast sidebar panel. Navigate to its 'Schema' tab and override the 'Page type' dropdown to the most precise WebPage subtype for that specific page.
4. To add or extend WebPage schema with custom properties not covered by Yoast/RankMath, use an Elementor Custom Code snippet: go to Elementor → Custom Code → Add New, set the location to 'Head', and paste a JSON-LD <script> block containing your full WebPage schema object (include @context, @type, name, url, description, and breadcrumb where relevant).
5. Validate the output by opening any Elementor-built page URL in Google's Rich Results Test (https://search.google.com/test/rich-results) and the Schema Markup Validator (https://validator.schema.org). Confirm that a WebPage (or subtype) entity appears with no critical errors.
6. If your site uses Elementor Pro's Theme Builder, open the header/footer templates via Elementor → Theme Builder and verify no conflicting or duplicate schema blocks are injected there; remove any manual JSON-LD snippets that conflict with the plugin-generated WebPage schema.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "name": "About Us | Acme Store",
  "description": "Learn about Acme Store, our mission, and the team behind our products.",
  "url": "https://www.example.com/about/",
  "inLanguage": "en-US",
  "datePublished": "2022-01-15",
  "dateModified": "2024-06-01",
  "isPartOf": {
    "@type": "WebSite",
    "name": "Acme Store",
    "url": "https://www.example.com/"
  },
  "breadcrumb": {
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "Home",
        "item": "https://www.example.com/"
      },
      {
        "@type": "ListItem",
        "position": 2,
        "name": "About Us",
        "item": "https://www.example.com/about/"
      }
    ]
  }
}
</script>