Meta Title, Meta Description, Image Alt text

Not sure if this has been addressed, but the documentation doesn’t have details: SEO | RapidWeaver Elements Docs

Does anyone know how to edit the meta title, description, and image alt text?

Thank you!

Ivan

Good questions!

Page title can be set in the page inspector.

We haven’t added meta description yet, but it will be available in the page inspector soon.
If you really need this feature now, you can add it manually via the Page Settings in the “Head End” code area.

<meta name="description" content="Build stunning, fast, and responsive websites effortlessly with Elements – the ultimate macOS web design tool." />

Image alt text can be entered under the image drop zone in the inspector.

Hope that helps!

2 Likes

@dan
just to clarify the question here again

the meta-tag section will be back in the final version?

thx

Yes, we’ll be adding support back in very soon (before the final version) :blush:

2 Likes

Thanks Dan!

Looking forward to seeing meta description in the main interface.

@Pegasus @maplecommerce

We’ll be working on this shortly. Just to confirm is this the list of things required:

  • Page Title
  • Meta Description
  • Meta Keywords
  • Open Graph: Title
  • Open Graph: Description
  • Open Graph: Image
  • Open Graph: URL
  • Open Graph: Type

Are we missing anything?

@dan nice that you ask!

should definitely be included
rel=“canonical”

as an option
Robots Meta: index, noindex, nofollow, no archive, no snippet, no image index

1 Like

re: @dan

1 Like

I’m not expecting an in-house solution, but how would I add schema data?

@dan

If we don’t specify twitter:card , Twitter will default to a small image card instead of a large image preview.

<meta name="twitter:card" content="summary_large_image">

@dan What I use.

<head>
    <!-- Required Meta Tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="robots" content="index, follow"> <!-- Allows search engines to index & follow links -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Ensures proper rendering in old IE versions -->

    <!-- SEO Meta Tags -->
    <title>Your Page Title</title>
    <meta name="description" content="A short, compelling page description (max 160 characters) for SEO and social media previews.">
    <meta name="keywords" content="your, keywords, separated, by, commas"> <!-- Optional but useful -->
    <link rel="canonical" href="https://example.com/"> <!-- Prevents duplicate content issues -->

    <!-- Open Graph (OG) Tags for Social Media (Facebook, LinkedIn, WhatsApp, etc.) -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="Your Page Title">
    <meta property="og:description" content="Your page description that appears in link previews.">
    <meta property="og:image" content="https://example.com/image.jpg">
    <meta property="og:url" content="https://example.com/">
    <meta property="og:site_name" content="Your Website Name">
    
    <!-- Twitter/X Card Tags (Ensures Proper Display on Twitter) -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Your Page Title">
    <meta name="twitter:description" content="Your page description for Twitter.">
    <meta name="twitter:image" content="https://example.com/image.jpg">
    <meta name="twitter:url" content="https://example.com/">
    
    <!-- Favicon & Apple Touch Icons -->
    <link rel="icon" href="https://example.com/favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon" sizes="180x180" href="https://example.com/apple-touch-icon.png">
    
    <!-- Structured Data (JSON-LD for SEO, Enhances Search Results) -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "WebSite",
        "name": "Your Website Name",
        "url": "https://example.com/"
    }
    </script>

    <!-- Styles -->
    <link rel="stylesheet" href="styles.css">

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=YourFont&display=swap">

    <!-- Performance & Security -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' https:; script-src 'self' 'unsafe-inline' https://trusted-scripts.com;">
    <meta name="referrer" content="no-referrer-when-downgrade"> <!-- Controls referrer behavior for security -->

    <!-- Additional Optional Meta Tags -->
    <meta name="theme-color" content="#ffffff"> <!-- Browser theme color -->
    <meta name="author" content="Your Name">
    <meta name="copyright" content="© 2025 Your Company Name">
</head>
2 Likes

We’re not going to support Twitter (or X as it’s now known). You’ll need to add that manually via a code snippet.

3 Likes

Interesting decision.

1 Like

No doubt, there is some political reason for this. I question the logic of ignoring 600+ million monthly active users. I’m going to be real here—this gives me pause about my continued support of RM and Elements. I just want an app that builds websites, not one that makes a statement.

A reply is obviously not required. I will make my business decisions based on the facts as I see them. Either RM provides what I need, or I will look elsewhere. Web design is a massive—arguably saturated—market, and there are plenty of options.

1 Like

i think the decision to use only the “Open Graph Tags” is perfectly fine.

just because you can’t find a ready-made solution in rw-elements doesn’t mean that a twitter connection isn’t possible.

by the way, twitter understands the standart open-graph-tags and why should realmacsoftware cook an extra soup for twitter or google+?

@Pegasus is right here, there are no political reasons behind this.

It’s simply a case of trying to build a platform that can easily integrate with open standards rather than specific companies.

1 Like

Twitter will default to a small image card instead of a large image preview.

These are simple marketing decisions.

i understand. i know the problem.

but it’s not realmacsoftware’s fault that some social networks also use their own tags for channel-specific features.

if you want to use these channel-specific features, you can always add this code snippet manually …

@Flash Yes I see, I think there’s a simple solution here. We currently generate the open graph meta tags and insert them where {{page.opengraph}} appears in the site template, so there’s not a lot of control over it.

If we added the individual social properties like title, description, image, etc you could easily add support for twitter or any other platform.

Just as a rough mock up, would something like this work?

    <!-- Open Graph (OG) Tags for Social Media (Facebook, LinkedIn, WhatsApp, etc.) -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="{{page.title}}">
    <meta property="og:description" content="{{page.social.description}}">
    <meta property="og:image" content="{{page.social.image}}">
    
    <!-- Twitter/X Card Tags (Ensures Proper Display on Twitter) -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{page.title}}">
    <meta name="twitter:description" content="{{page.social.description}}">
    <meta name="twitter:image" content="{{page.social.image}}">
2 Likes

Hi @tpbradley

I mean the main issue is how to generate all those images in the first place since they all have different sizes. Thats what I never liked in the first place. I normally use an api that generates me those images dynamically. There are also all those bookmark links for google, android and so on. Not sure how many it is in total. But I think I stopped counting at arround 20 different images if you want to support all those.

What would be cool if I can have this on “per page” but a fallback based on the site, if I would not provide a specific image for a page.