Features

SEO

SEO

SEO

Optimizing Your Website for SEO with UI Now

UI Now makes it simple to set up essential SEO tags and create pages that rank well on Google. By leveraging pre-built tools and helpers, you can ensure your SaaS application is optimized for search engines while maintaining flexibility for custom tags and features.

Tutorial


Step 1: Add Default SEO Tags

To set default SEO tags for your app, follow these steps:

  1. Open the config.js file.

  2. Add values for the following properties:

    • appName: The name of your application.

    • appDescription: A concise description of your app.

    • domainName: Your app’s primary domain (e.g., yourdomain.com).

These values will be used by the /libs/seo.js helper to apply default tags across all pages, ensuring consistency in your SEO strategy.

Step 2: Customize SEO Tags for Individual Pages

If you need to override the default SEO tags for specific pages, you can use the getSEOTags function. For example, here’s how to set custom tags for a Terms and Conditions page:

File: /app/terms/page.js

import { getSEOTags } from "@/libs/seo";

export const metadata = getSEOTags({
  title: "Terms and Conditions | UI Now",
  canonicalUrlRelative: "/tos",
});

export default async function TermsAndConditions() {
  return (
    <main>
      <h1>Terms and Conditions</h1>
      <p>Welcome to UI Now’s Terms and Conditions page.</p>
    </main>

  • Recommendation: Set title and canonicalUrlRelative for every page to ensure accurate metadata and improved search visibility.

Step 3: Add Structured Data for Rich Snippets

Use the renderSchemaTags function from /libs/seo.js to implement structured data, helping Google better understand your site and potentially generate rich snippets.

Example: Adding Schema Tags

  • Why It Matters: Structured data helps search engines interpret your content, leading to better indexing and enhanced search result presentation.

Step 4: Generate Sitemaps Automatically

To ensure your pages are indexed correctly:

  1. Open the next-sitemap.config.js file in the root folder.

  2. Set the siteUrl value to your root URL (e.g., https://yourdomain.com).

UI Now will automatically generate sitemap.xml and robots.txt files during the build process.

Step 5: Claim Your Domain on Google Search Console

Claiming your domain ownership on Google Search Console helps improve indexing and ensures your pages appear in search results faster. Follow Google’s verification process to link your domain.

Step 6: Create a Blog in Minutes

UI Now makes it easy to add a blog to your site for content marketing and SEO:

  1. Navigate to the /app/blog/_assets/content.js file.

  2. Add your blog posts, authors, and categories in the file.

  3. Customize the blog style and layout as needed.

Once complete, UI Now will automatically generate a professional blog for your site. For more details, check the Blog section in the documentation.

Why Optimize with UI Now?

  • Save Time: Built-in SEO helpers eliminate repetitive tasks.

  • Boost Visibility: Default and custom tags ensure your site ranks well on Google.

  • Simplify Content Management: Effortlessly create blogs and enhance your content marketing strategy.

With UI Now, creating a search-engine-friendly website is simple, efficient, and effective. Ready to boost your SEO? Start optimizing today! 🚀


Essential Meta Tags for SEO

  1. Title Tag

    • Defines the title of your page, crucial for both search engines and users.

    • Keep it under 60 characters for best results.

    <title>Your Page Title | Brand Name</title>

  2. Meta Description

    • A concise summary of the page content.

    • Keep it under 160 characters.

    <meta name="description" content="A brief, compelling description of your page that encourages clicks.">

  3. Viewport Meta Tag

    • Ensures proper rendering on mobile devices.

    <meta name="viewport" content="width=device-width, initial-scale=1">

  4. Canonical Tag

    • Prevents duplicate content issues by specifying the preferred URL.

    <link rel="canonical" href="https://yourdomain.com/current-page-url">

Essential Open Graph Tags

Open Graph (OG) tags are critical for social sharing, ensuring your content appears correctly when shared on platforms like Facebook, LinkedIn, or Twitter.

  1. Basic Open Graph Tags

    • OG Title: Matches your page title, optimized for sharing.

    • OG Description: Concise summary for social platforms.

    • OG URL: The canonical URL of the page.

    • OG Image: A visually compelling image for sharing (recommended 1200x630px).

    <meta property="og:title" content="Your Page Title | Brand Name">
<meta property="og:description" content="A brief, enticing description optimized for social sharing.">
<meta property="og:url" content="https://yourdomain.com/current-page-url">
<meta property="og:image" content="https://yourdomain.com/path-to-image.jpg">
<meta property="og:type" content="website">

  2. Optional but Recommended Open Graph Tags

    • OG Locale: Specifies the language and locale.

    • OG Site Name: The name of your website.



    <meta property="og:locale" content="en_US">
<meta property="og:site_name" content="Your Website Name">

Twitter Cards

Twitter-specific meta tags enhance how your content appears on Twitter.

  1. Summary Card with Large Image

    <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title | Brand Name">
<meta name="twitter:description" content="A brief, compelling description optimized for Twitter.">
<meta name="twitter:image" content="https://yourdomain.com/path-to-image.jpg">
<meta name="twitter:site" content="@YourTwitterHandle">


Example Implementation

Here’s a full example combining the essential SEO meta tags, Open Graph tags, and Twitter cards:

<html lang="en">
<head>
  <!-- SEO Meta Tags -->
  <title>Your Page Title | Brand Name</title>
  <meta name="description" content="A brief, compelling description of your page that encourages clicks.">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="canonical" href="https://yourdomain.com/current-page-url">

  <!-- Open Graph Tags -->
  <meta property="og:title" content="Your Page Title | Brand Name">
  <meta property="og:description" content="A brief, enticing description optimized for social sharing.">
  <meta property="og:url" content="https://yourdomain.com/current-page-url">
  <meta property="og:image" content="https://yourdomain.com/path-to-image.jpg">
  <meta property="og:type" content="website">
  <meta property="og:locale" content="en_US">
  <meta property="og:site_name" content="Your Website Name">

  <!-- Twitter Cards -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Your Page Title | Brand Name">
  <meta name="twitter:description" content="A brief, compelling description optimized for Twitter.">
  <meta name="twitter:image" content="https://yourdomain.com/path-to-image.jpg">
  <meta name="twitter:site" content="@YourTwitterHandle">
</head>
<body>
  <!-- Page Content -->
</body>
</html>

Best Practices for SEO and Social Sharing

  1. Image Optimization: Use high-quality images for og:image and twitter:image. Ensure they are under 5MB for fast loading.

  2. Consistency: The og:title and twitter:title should match the page <title> for clarity.

  3. Testing: Use tools like Facebook's Sharing Debugger and Twitter's Card Validator to verify how your meta tags display.

By implementing these meta tags and Open Graph tags, you can significantly improve your website’s search visibility and social sharing performance.