,

Creating SEO and Socially Optimized No Code Dynamic Pages With Webflow, Wized, Cloudflare and Prerender

Moon Now is a Product Growth and Recruiting Agency that builds your MVP and hires your teams.

Blog
No Coding
Link IconLinkedIn IconX (Formerly Twitter) IconPinterest IconFacebook Icon

Step-by-Step Guide

SEO and socially optimized pages using Webflow, Wized, CloudFlare, and Prerender. These steps will help you ensure your dynamic content is accessible to search engines and social media platforms, ultimately improving your website's visibility and reach. Before we begin, make sure you have the following prerequisites in place:

Prerequisites

  1. Compelling Content: Ensure your content is shareable and provides value to your audience. If people have a reason to share your content, it will be worth optimizing it.
  2. Public Access: Ensure your pages do not require authentication or login to view the content. Bots from search engines and social media platforms need access to crawl and index your pages.
  3. Custom Domain: Purchase and set up a custom domain on Webflow and Wized. This step is essential for the process to work effectively.
  4. Wized Integration: Use Wized to serve content within your Webflow website dynamically. Ensure that your website design in Webflow matches the desired output.

Step 1: Setting up SEO and Social Tags in Webflow

  1. Access Webflow and navigate to the page you want to optimize.
  2. Within the "Head" tag, add the necessary properties for search engines and social media platforms to recognize and display your content. The code to copy and paste is at the end of this article.
  3. Include properties such as canonical URL, language declaration, index instructions, meta tags for description and keywords, author name, and OpenGraph (OG) tags for title, description, and image.
  4. Modify the code to dynamically set the content using the data from Wized. Use the JavaScript console to identify the data values you want to populate dynamically.
  5. Test the implementation by inspecting the page elements and verifying that thamicallye dynamic content is correctly populated.

Step 2: Updating DNS Management with CloudFlare

  1. Set up a CloudFlare account and access the CloudFlare dashboard.
  2. Go to the DNS management section of your domain registrar (e.g., GoDaddy) and update the name servers to point to CloudFlare.
  3. Wait for the DNS changes to propagate, which may take some time.
  4. Once the changes are in effect, update the DNS values within CloudFlare, including the SSL settings.
  5. Ensure the CloudFlare proxy is enabled for your domain.

Step 3: Configuring Prerender with CloudFlare

  1. Access the Prerender dashboard and locate your Prerender token.
  2. In CloudFlare, navigate to the Workers section and create a new worker.
  3. Copy the code provided in the Prerender GitHub repository and paste it into the CloudFlare worker code editor.
  4. Replace the placeholder API key in the code with your Prerender token.
  5. Save and deploy the CloudFlare worker.
  6. Add your custom domain to the CloudFlare worker and configure the routes for pages you want to be prerendered.
  7. Sync the CloudFlare settings with Prerender to establish the connection.
  8. Specify the URL parameters that should be used for caching, such as profile URLs, in the Prerender cache manager.

Copy and Paste this Code into Webflow Head Tag and Update the Variable Placeholders For Your Own Site

<link rel="canonical" href="INSERT YOUR BASE URL HERE">
<html lang="en_us">
<meta name="robots" content="index, follow"/>
<title id="page-title"></title>
<meta name="description" content="INSERT YOUR BASE DESCRIPTION"/>
<meta name="keywords" content="INSERT YOUR COMMA SEPERATED KEYWORDS HERE"/>
<meta name="author" content="INSERT YOUR AUTHOR NAME"/>
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:site" content="INSERT YOUR SITE NAME">
<meta property="twitter:creator" content="INSERT CREATOR NAME">
<meta property="twitter:title" content="INSERT YOUR PAGE TITLE">
<meta property="twitter:description" content="INSERT YOUR PAGE DESCRIPTION">
<meta property="twitter:image" content="INSERT YOUR IMAGE URL FOR THE PAGE">
<meta property='og:title' content="INSERT YOUR TITLE"/>
<meta property='og:image' content="INSERT YOUR IMAGE URL FOR THE PAGE"/>
<meta property="og:description" content="INSERT YOUR DESCRIPTION">
<meta property='og:url' content="INSERT PAGE URL" />
<meta property='og:author' content="INSERT AUTHROR NAME" />
<meta property="og:site_name" content="INSERT SITE NAME"/>

<script>
window.onload = async () => {
   try {
       const response = await Wized.request.execute("INSERT YOUR DATA IN WIZED RESPONSE NAME HERE");
       console.log(response);

// OpenGraph Metadata Assignment
var OGTitle = document.querySelector('meta[property="og:title"]');
OGTitle.setAttribute('content', `${response.data.YOURDATAHERE}'s Shows`);
var OGAuthor=document.querySelector('meta[property="og:author"]');
     OGAuthor.setAttribute('content',response.data.YOURDATAHERE);
var OGDesc = document.querySelector('meta[property="og:description"]');
      OGDesc.setAttribute('content', response.data.YOURDATAHERE);
var OGImg = document.querySelector('meta[property="og:image"]');
      OGImg.setAttribute('content', response.data.YOURDATAHERE);
var OGURL = document.querySelector('meta[property="og:url"]');
      OGURL.setAttribute('content', `https://www.shownlive.tv/my-shows?profile=${response.data.YOURDATAHERE}`);

// Twitter Card Values
var twitterTitle = document.querySelector('meta[property="twitter:title"]');
twitterTitle.setAttribute('content', `${response.data.YOURDATAHERE}'s Shows`);
var twitterCreator =document.querySelector('meta[property="twitter:creator"]');
     twitterCreator.setAttribute('content',`@${response.data.YOURDATAHERE}`);
var twitterDesc = document.querySelector('meta[property="twitter:description"]');
      twitterDesc.setAttribute('content', response.data.YOURDATAHERE);
var twitterImg = document.querySelector('meta[property="twitter:image"]');
      twitterImg.setAttribute('content', response.data.YOURDATAHERE);
     
// General Metadata Assignment
var canURL = document.querySelector('link[rel="canonical"]');
      canURL.setAttribute('content', `https://www.shownlive.tv/my-shows?profile=${response.data.YOURDATAHERE}`);
    var pageTitle = document.getElementById('page-title');
   pageTitle.textContent = ('content', `${response.data.YOURDATAHERE}'s Shows`);
var pageDesc = document.querySelector('meta[name="description"]');
    pageDesc.setAttribute('content', response.data.YOURDATAHERE);
var pageAuthor=document.querySelector('meta[property="author"]');
     pageAuthor.setAttribute('content',response.data.YOURDATAHERE;      
   } catch (error) {
 
       console.error(error);
   }
}
</script>

‍

‍

Related Posts

How to Start a Business

3 Reasons Your Web3 Startup Won't Scale

Having a hard time scaling your Web3 startup? You may be able to accelerate your startup's trajectory by refining these 3 growth strategies.
Scaling a Team

Don't Make These 4 Mistakes When Hiring for Your Business

You need an effective recruitment strategy when hiring top talent. It requires a talent acquisition process in order to hire qualified candidates successfully. As a business owner, it's too expensive to make these 4 expensive mistakes when recruiting. Here are some best practices for successful hiring and employee recruitment of new talent.
Scaling a Team

6 Qualities of Great Web3 Recruiting Partners

Looking for the best Recruitment Agency to hire your Web3 Product and Engineering teams? Find a great recruiter by looking for these six qualities.