Framer web setup tutorial

In my previous article, Types of Pages in Framer, we took a deep dive into the various types of web pages you can create in Framer and their respective use cases. In this article, we’ll continue exploring another key aspect of building with Framer — Page Settings.

Framer Page Settings offer far more than just basic metadata like titles and descriptions. They also include essential options tied closely to SEO, such as search engine indexing toggles, Open Graph images for social media sharing, and the ability to embed custom code at the page level. These features, which once required manual coding, are now seamlessly integrated into an intuitive visual interface — significantly lowering the barrier to professional web customization.

This article will walk you through each setting from top to bottom in the Page Settings panel, explaining their practical roles in content sharing, search optimization, and frontend control — helping you fully leverage Framer no-code capabilities.

Framer Page Settings

At the top of Framer Page Settings interface lies the Page Settings section — the most fundamental and essential part of configuring any page. This panel allows you to manage core settings such as the page title, URL path, description, and key SEO-related options like whether to allow search engines to index the page. In the following sections, we’ll go through each setting in detail and explain its function and practical use case.

1 Basic Page Information Settings

1). Title (Page Title)

This is the input field for the <title> tag of the page. It directly determines the title displayed in the browser tab, search engine results pages (SERPs), and social media share cards. It’s recommended to use a concise, keyword-relevant title to improve search visibility and increase click-through rates.

2). URL (Page Path)

Located to the right of the Title is the input field for the page URL. Framer automatically generates the corresponding path (slug) based on your input, which becomes part of the final access address. You can customize this to create a clear and semantic site structure that reflects the page content.

Tip: The URL directly impacts SEO, so avoid meaningless characters. It’s recommended to use lowercase English words connected by hyphens.

3). Page Description

This text input field is used to set the content of the <meta name="description"> tag, which serves as the main summary information crawled by search engines and social platforms. The description should be concise and clear, kept within 150 characters, highlighting the core value of the page to help improve click-through performance.

2 Search Index Settings

In the Search section below the Page Settings block, Framer offers two checkboxes that control the page’s visibility in search engines and on-site search.

1). Show page in search engines

Enabling this option (checked by default) allows search engine crawlers to access and index the page. If you want a page to be excluded from public indexing—such as a promotional landing page, a test page, or member-exclusive content—you can manually uncheck this box. This will generate a noindex meta tag for that page.

2). Show page in Site Search

Enabling this option allows the page content to be indexed by Framer’s built-in site search, making it easier for users to find the page within the website. If you want to exclude certain pages—such as 404 error pages or technical redirect pages—from being searchable on the site, you can disable this setting.

3 Preview (Metadata Preview)

At the very bottom is the Preview section. Although it’s not an interactive setting, it provides a real-time simulation of how your entered title, description, and URL path will appear in search engine results. This preview feature is very useful for quickly proofreading the content’s completeness and visual presentation before publishing.

With these settings, Framer separates the basic page structure and SEO controls from code logic and transforms them into a clear, visual interface, greatly simplifying the web building process. Mastering these settings not only helps optimize your page’s performance in search engines but also improves the overall site structure and maintainability.

Framer Page Images Settings

In Framer Page Settings interface, Page Images is the second key configuration section following Page Settings. While this setting doesn't directly affect the visual presentation of the webpage itself, it plays a crucial role in social sharing and brand recognition.

When users share your website link on platforms like Facebook, X (Twitter), LinkedIn, or others, the system typically fetches the page’s Open Graph Image to display as the visual cover of the link card. By configuring the Page Images section, you can customize this image to ensure your shared content is more visually engaging and aligned with your brand identity.

1 Upload Social Share Image

Framer offers a very straightforward upload process. In the Page Images section, simply click the “Upload” button to select and upload your prepared image file from your local device. Once uploaded, the image will automatically appear in the preview box on the right, allowing you to instantly see how it will be displayed.

2 Size Guidelines and Design Tips

Framer clearly displays the recommended image size above the upload button — 1200 × 630 pixels.

This is the standard dimension for Open Graph images across most major social platforms, ensuring correct display, centered cropping, and minimal distortion or compression on various devices and platforms. You should design your share image according to this size in advance and avoid using images with unbalanced proportions or overly complex content, as they may be scaled or cropped during display.

Tip: Your share image should prominently highlight your brand logo, key page message, or visual theme — let the image speak for itself and quickly capture attention.

3 Page Images Setup Verification

If you’d like to further verify the setup, you can temporarily publish the page and use tools like the Facebook Sharing Debugger or Twitter Card Validator to test how the image is actually fetched and displayed.

With the Page Images section, Framer makes the previously complex Open Graph configuration intuitive and easy to manage. Designing and uploading a high-quality share image not only enhances your brand’s visibility on social media but also boosts click-through rates and builds trust when your links are shared. For any website that values marketing performance, this setting is essential.

Framer Custom Code Settings

In Framer’s Page Settings, Custom Code is the final configuration section—and a powerful interface for advanced functionality and personalized control. With this feature, you can flexibly insert custom code into specific parts of the page structure (such as the <head> or <body> sections), allowing you to add extra styles, scripts, or third-party integrations.

What used to require manual editing by developers has now been transformed into a visual input field in Framer, lowering the technical barrier and giving designers and no-code creators greater flexibility.

1 Custom Code Insertion Location

1). <head> Section

Framer provides a dedicated input field for inserting code into the <head> tag. This type of code is typically used for loading external CSS stylesheets, meta tags (such as verification codes), custom fonts, or third-party tracking scripts like Google Analytics or Meta Pixel.

<!-- Example: Inserting Google Analytics Tracking Code -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

2). <body> Section

The second input field is for injecting content into the <body> tag. This type of code is typically used for JavaScript that requires dynamic rendering or needs to execute after the page loads, such as pop-ups, third-party chat scripts, and interactive component loading.

<!-- Example: Inserting an Online Chat Support System -->
<script src="https://example-chat-widget.com/embed.js"></script>

2 Usage Recommendations and Precautions

When inserting code, please ensure the content is safe and accurate. Avoid pasting scripts from unknown sources to prevent performance issues or security risks on your page.

• All custom code you insert is directly injected into the final generated HTML page, so you don’t need to worry about Framer altering its structure or functionality.

• If the inserted code doesn’t produce the expected result, you can clear the input field at any time and save the page settings—the changes will take effect immediately.

• For code that needs to be applied site-wide (such as global analytics or scripts), it’s recommended to configure it once in the Framer project’s global settings rather than inserting it repeatedly on each page.

Framer Custom Code section provides users with flexible page-level code injection capabilities, allowing designers and developers to implement behavior control, data tracking, and feature enhancements beyond visual design. Although this setting is located at the end of the page settings, it serves as a bridge between no-code creation and professional-level development. It is recommended to use it responsibly with a clear understanding of the code’s purpose and impact.

Conclusion

Through this tutorial, you should now have a comprehensive understanding of the key areas in Framer Page Settings — from basic page information configuration to social share image setup, and finally to advanced custom code injection. Framer intuitive visual approach reshapes the traditional page settings process, not only boosting creation efficiency but also empowering designers with greater control and expressive power.

When building web pages, making good use of these settings helps strengthen brand identity and social sharing impact, while also improving your site’s performance in search engines. If you want to create a Framer website that is both aesthetically pleasing and strategically effective, consider partnering with a professional team.

Feel free to contact Jane Framer Studio and let us help turn your ideas into a high-quality web experience.