Photo by Thomas Leth-Olsen

Dynamic WebDev sites take a lot of the tediousness out of Web development, but depending on the type of site and your needs, they may not be very search engine friendly. In this article I will show the approach I am using for a site I am currently developing,  by mixing Dynamic AWP and Dynamic Webdev into one project, to achieve both SEO results and a user friendly interface.

A few definitions

• Dynamic WebDev
  • This is the “standard” method of creating a Web application with WebDev. The site basically runs like an application, the server manages the context of the connection as the user moves from page to page, and you are able to development in a similar fashion to the way you developed windows applications. Along with that very good upside, there of course is a downside. Since the server manages context for each connection, there are more memory and resources used for each connection to the site. And unlike a normal web page, a page of your dynamic site can not be bookmarked and returned to, a new session always starts at the first page of the Dynamic Site. There are ways to reference a particular page with some coding and I will be using that ability for this article.
• Dynamic AWP
  • This is similar to ASP or Cold Fusion pages, the developer has to handle the context from page to page. A request is made to the server, the page is rendered and sent back to the browser, and then server forgets the connection ever existed, so any persistent data (“context”) from page to page has to be managed by the developer. Since the connection is terminated with each page this approach is far more resource friendly, but does add the extra work of managing context to the developer job. From the browse side, pages appear to be normal web pages, they can be book marked, called up again, etc.
• SEO
  • Search Engine Optimization, if you haven’t heard the term, then you probably shouldn’t be developing websites, unless they are for internal use only. There are literally thousands of websites and books devoted t the topic. Search engines are how the majority of websites get their visitors. There is a lot of myth and legend floating around the internet on how search engines work, and this trick or that to get to the top of page one. If you have a Web designer or SEO consultant tell you that he knows exactly how they work and can guarantee you the top of page one, than his name better start with Larry and end with Page, otherwise I advise to run, not walk the other way!

So why is SEO important?

Hold on to your hats! It may not be. It really all depends on your site and what your goals are. Unfortunately there are far to many SEO consults offering one size fits all solutions and advice, and just like clothes, it might fit all, but it sure looks ugly on most! Websites fall into a few distinct categories, each with its own SEO requirements. There are fringe cases, and hybrid examples but for me, most sites fall into one of these categories:

• Brochure Site
  • Generally a static site, providing information about a company, cause, etc. The purpose of the site is to provide information and the call to action is general some form of a contact us. SEO is important to these sites as the more people find them the better, but fortunately the content of the site, provides natural SEO, with some intelligent adjustments to the copy to make it SEO friendly these sites are usually easy to optimize.
• Blog Site
  • Generally uses some type of a CMS (Content Management System) to serve information. Can be a sub site of one of the other site forms. Most CMS systems have SEO features built into them, so again as long as attention is given to using SEO friendly copy, these sites perform well in the search engines. Search engines love new and relevant information, so having a related blog connected to a site is a good way to post search engine traffic to a site. I see no reason to reinvent the wheel in WebDev when there are many great CMS systems available. If you do decide to create your own with WebDev you should give serious consideration to SEO.
• eCommerce Site
  • Online catalogs, from specialized candle shops that only sell black candles, to behemoths like Amazon. With a site like this, you want each and every single item to be indexed and optimized for the search engines. If you are building a site similar to this you should consider using dynamic AWP. You will have to do a little more work in the programming but each page will be able to be indexed by the search engines.
• SaaS Site
  • Software as a Service. This is the type of site this article is based on, I am currently building theTaxCure.com and will be using it for examples. This requires a hybrid SEO approach. General the service itself require a log in to use and naturally those pages would not be indexed or accessible by the search engines. However you probably would new business, which means you do what the search engines to find and recommend your site. This is accomplish by what are referred to as “Landing Pages”. This are static or dynamic AWP pages that can be indexed by the search engines that funnel visitors to the point of signing up for your service. The remainder of this article will be examining an approach to SEO for this type of site.
• Internal Site
  • This is a site only used by employees/clients of your company. No one comes to the site randomly. This can either be hosted on the internet or on your intranet (not exposed to the public at all). You could not care less about SEO for this type of site, so I am wondering why if this is the type of site your developing, you listened to me dribble on for the last thousand words!

Using the Static Home Page generated by WebDev

You may have noticed that if you use the RAD to generate a Dynamic WebDev site or if you look at some of the examples there is a “Home” and a “1st Page of Dynamic Site” page defined. Here’s a screen shot from the After Sales Service example that ships with WebDev.

There are several advantages to this. First the static page is used as the “Landing Page” and what you will focus on for SEO. A second benefit is how quick your “Home” page is displayed to a visitor. A recent study by akamai, showed that 75% of visitors will not wait more than 4 seconds for your home page to be displayed. That was 4 seconds!!! No matter how fast your server is a dynamic site is always going to have a slight lag as it initialized the session etc. versus a static page. So that is another good reason to use a static “Home” page.

Open up the After Sales Service example and we can take a look at what would be done for SEO for this site. If you run the site you will see you will see Page_Home loads for 5 seconds and then the Dyanmic site is launched via Page_ListBug.

These type of Home pages were very popular when Flash websites were the “in” thing, but have fallen out of favor recently. Later will will take a look at a completely different approach to the Home page, but for now we will go ahead and maximize this page and site for SEO.

First the setup. Page_Home is defined as a static page.

Since this is also marked as the Home page, WebDev will generate several copies of this page in the root document directory. The copies will be named index.htm, index.html, default.htm, etc., this way no matter how the webserver is configured this page will launch as the home page of the site. And the “Enter” link is set to Display the 1st dynamic project page, which will launch the Page_ListBug.

And if you look at the code for this page, it has a timer that after 5 seconds executes the “Enter” Link.

So now its just a matter of making the SEO changes. As I discussed earlier there is a lot of myth and legend when it comes to SEO. And the search engines are constantly changing the rules to stay a step ahead of the scammers. Back in the day, achieving SEO just meant adding a few meta entries to your HTML source. Well the search engines have gotten much smarter since then, and now weight the content based on its relevance to the main topic of the site, how often a word is repeated etc. The actual text content of your site is now more important than the meta tags. Infact, it is rumored that Meta tags are completely ignored by some search engines when it comes to ranking these days. However those meta tags also control how the entry looks in the search results, so it is sill important. Here are the basic rules of thumb that I currently use for SEO configuration of a site:

1. Determine your keywords for each page, not a generic list for the entire site.
2. Use 10 -15 keywords on a page.
3. Do not repeat any words in your keyword list.
4. Create a description for the page approximately 150-160 characters.
5. Create a 64 character tittle for the page.
6. Use keyword heavy text for the content of your site, the description and the tittle.
7. Do not go overboard with keyword repeating, if the search engine sees to high of a percentage of the content is the same word repeated it will ignore the word completely. What percentage only Larry Page and a few others know!
8. Take these rules with a grain of salt and do your own research, especially if this article or more than 30 minutes old, because they have probably changed the rules by now!

That is ten keywords, a little lite but again this is just an example. In the real world you would want to create a couple of paragraphs of good marketing copy here that used the keywords two or three times each. So to put the keywords in the meta tag for the page go to the details tab of the description for the page, and click on Edit the expressions and keywords.

And on the next page add your keywords. There are a few tips on the page that are good advance, such as using different forms of the words.

If you use the Project->Other Actions->Regenerate the HTML pages, and then look at the default.htm file that was generated in the AFTER_SALES_SERVICE_WEB directory you will see the keyword line that was generated

<meta name="keywords" lang="en" content="After,Sales,Service,Sale,Managing,problems,users,Viewing,author,manager,user,authors,managers">

Note: Running the site in test mode, does will not show the keyword meta tags they are only generated in the files that will be used for deployment.

On the same screen, the description tag will allow you to setup the Description meta tag.

<meta name="Description" lang="en" content="This simplified site is used to manage an After Sales Service to manage the problems encountered by the users and view the problems by author or manager.">

Remember the description tag is also used to create the entry in many search engines so want the text to be keyword heavy but also be good marketing copy that will encourage someone to click through to the site. Its always a balancing act. Here is the description meta tag from my website:

<META NAME="Description" CONTENT="Technology and Business Consulting: Providing Project Management, Custom Application Development and Design for the Web, Windows, and SQL Database Software.">

And here is what the entry looks like in Google. See the connection? Notice how it chops off, that is what the 150-160 word limit is all about.

And finally create the title for your page, this is used to display in the title bar of the browser. It also is the first line of the entry in the search engines. The actual domain name and title are still believed to be the heaviest weighted items when determining search rank to craft your title accordingly. Once crafted the Title is filled in on the General tab of the Page.

Notice how the text was tweak slightly to fit in the 65 character limit. The title no longer shows in the title bar of most browsers  since they have gone to a tabbed interface much less is shown, but again it is very important for SEO and the first line of the search engine entry. And that is all there is to setting up SEO for a static page acting as the home page and entry page into your dynamic WebDev site.

Creating you own Static Home Page

As I mentioned, the “Enter Here”, auto-redirect type of page has fallen out of favor recently. In fact there is some argument as to whether your site is penalized for auto-redirects now, again lots of myth and legend to sort through. A common approach today is to use “Landing Pages”. These are static pages that lead into your site, however they do not have auto redirects, and they are marketing/SEO heavy pages. In fact many site have several “Landing Pages” tuned for different key words. This is the approach we are going to be using. The steps and configuration are the same as they were above, the only differences are: You remove the code that automatically executes the link, you make the design look like a traditional home page, with some type of call to action. Here is the home page for theTaxCure.com when it was a static home page.

Notice the keyword heavy copy. All of the learn more links link to other static pages, those static pages are tuned for slightly different keywords. The description and keyword meta tags are configured for this page the same as they were above. The “Get Started” button is the button that is set to display the first page of the dynamic site.

WebDev automatically adds the static pages of the project to a file called SiteMap.xml. This file is used by search engines like Google to index your site. This is useful if you have multiple “Landing Pages” that are not linked from your home page. Search engines start at your home page and follow the links from there, so if you have a landing page that isn’t accessible from those links it would never get index. The SiteMap.xml file solves this problem, because the search engines will index all of the pages referenced in the SiteMap.xml file.

Calling a secondary page in your Dynamic WebDev Site

This approach is great from an SEO standpoint. It also works well for new visitors, as you funnel them through the information pages until they click on a get started link and are taken to the first page of your dynamic site, which in this scenario would have to be a “Create an Account” page.

But that is not very friendly for your returning visitors. You could (and should) have a “Already have account?” link on the “Create an Account” page but that would still require a second click before they get to a sign on screen. Remember the 4 second rule, guess what web users hate clicks just as much! You could have the first page of you site be a sign in page with a “Don’t have an Account?” link. But all that does is trade one issue for another. That would be friendly for your existing visitors but extra work for new visitors and the last thing you want to do is create any extra barriers for the sign up process.

The answer is to have more than one page of your dynamic site able to be called directly. And with a little work that is possible. For a enable a page to be called directly it must have the “Allow the Access by DynamicSiteDisplay()” check box, on the Advanced Tab of the page description, turned on.

Although the online help discusses using this with DynamicSiteDisplay(), naturally that command is not available to you from a static html page. Fortunately this also exposes the page via a special URL variable of Dynamic WebDev sites. By passing the _WW1stPAGE_ url variable with the name of the page you want to launch, and using the standard WebDev Project URL shortcut, you are able to call a particular page of the Dynamic WebDev Site. Remember, the Allow Access by DynamicSiteDisplay setting must be turned on for the page as well. For instance to call the “Create an Account” page of theTaxCure.com, the link would be:

http://thetaxcure.com/theTaxCure?_WW1STPAGE_=PAGE_CreateAccount

The online help does warn of security issues with calling a page directly. It really depends on the type of page you are exposing, I never expose a page that assumes that a user is already logged in as that would obviously create a security hole. The help mentions using a numeric page identifier and passing that into the primary page of the site and using it to transfer to other pages of the dynamic site, and that would work as well, but would unnecessarily complicate things as you expand this technique through the rest of this article.

So using this technique you could have the “Sign In” page be the 1st Dynamic Page of the site, and also have a “Create an Account” page that is also able to be called directly.  At this point, you could add a “Log in” button to the Home page, that calls the 1st dynamic page of the site (the “Sign In” page), and have the “Get Started Now” buttons use the link above that will launch the “Create an Account” page.

Using Dynamic AWP for the best of both worlds

Now it is user friendly for new visitors, who would see a “Create an Account” page when they click on “Get Started”. It is little better for returning visitors, they would click on the “Log in” button, and be presented with a “Log in” screen, where they could enter their information and log in. But you can still do better.

What many sites do these days is include a small log in form in the title of the page. Paypal.com is a nice example of this. You could create the form via pure HTML and even get fancy with some CSS and JavaScript to replicate the behavior you see on the PayPal site, but there is a reason you use WebDev as your web development tool! So its time to change the page from a static page to a dynamic page. You will want this page to be able to be indexed by the search engines and called directly without incurring the extra overhead of create a session, so you need to change the type of page to a dynamic AWP page without context.

With that done, you now have the ability to use most of the power of the Wx language and features. To create the email address entry field, create a edit control and set its input mask to email address. However don’t enter a caption.

Now switch to the Note tab, and enter the caption in the Information text (help) area. This is what displays “Email Address” in light gray in the box when it is empty. Unfortunately some web designers have taken this technique to far and use it for all forms, which leads to user confusion. But on a short log in form with only two fields, not including labels keeps the design clean, and shouldn’t cause to much confusion.

You create the password entry field in the same way except set it as a password field

If you were to test this page you would find that there is a slight bug in WebDev implementation of the Help feature. It is masking the help text on password fields as well, so your help text is displayed as ***. Not very helpful! I have submitted this to pcSoft and they agree that is not the desired behavior and have submitted it as a request to programming. In the meantime I set the field as a standard text field and created my own code to mask it as you type. You may notice the effect as you type, you will see the letter for a split second before it is replaced with an *. This is similar to how password entry is done on many touch devices, so it might be considered a “feature”. That code is outside the scope of this article, I will do a future article covering the code, but in the meantime if you would like the code just let me know.

Instead of the “Log In” button being set to start the first page of the dynamic site, you are going to place some code in the click process, so clear that Action setting on the general tab.

And the code for the click browser process is:

ParameterString is string = NoSpace(EDT_Email) + TAB + Password
ParameterString = "P1=" + AJAXExecute(EncryptLoginForUrl,ParameterString)

// Is this is the development machine then use DynamicSiteDisplay 
// otherwise use the short URL to launch the dynamic site
IF Upper(WebAddress[[1 TO 16]]) = "HTTP://LOCALHOST" THEN
   WebAddress = "http://localhost"
ELSE 
   WebAddress = WebAddress[[1 TO Position(WebAddress,".com")+3]]
END
FileDisplay(WebAddress + "/theTaxCure?_WW1STPAGE_=PAGE_LogIn&" + ParameterString)

The first statement creates a string combining the Email Address and the Password, using a TAB as the separator. You could pass both fields as separate parameters, but by combining them into one parameter and encrypting the string, it will be that much harder for a hacker to exploit the page.

The second statement adds “P1=” to the front of the string. URL parameters are passes as http://www.domain.com?Parameter1Name=Parameter1Value&Paramerter2Name=Parameter2Value. So this parameter’s name will be P1, no since give a hacker any hint as to what the parameter is for. The second half of the statement is calling a global server procedure in AJAX mode. AJAX mode lets you call server code from browser code and get the result back without doing a page refresh. The reason you are using it here is because some of the WX language functions in the EncryptLoginForUrl procedure are not allowed in browser code. I will show you the coded for the procedure shortly, but first lets look at the rest of the code behind the button.

The IF statement is testing the current address of the web page being displayed, so that it can properly format the URL you want to execute. IF the page starts with “HTTP://LocalHost” then you know the site is running on a local machine, instead of over the internet. The code does the following.

1. Strips the web address down to just the “http://domainname.com” portion of the address or uses the Local Host address for testing.
2. Concatenates that domain name with the WebDev Project Shortcut URL name , the _WW1STPAGE_ variable set to the log in page, and the parameter string created by the server function.
3. Uses FileDisplay to cause the browser to display the URL concatenated.

PROCEDURE EncryptLoginForUrl(InString)

   RESULT URLEncode(Crypt(InString,"*SaltPhrase*"))

You were probably expecting a little more code weren’t you? This function takes the string passed in and encrypts it using the password provided. It then URLEncode the resulting string. Web browsers can not handle extended characters in the web address, URL encoding replaces special characters with encoding that the browser can decipher. For instance %20 replaces spaces.

Now entering an email address and password and press the “Log in” button will redirect the browser to an address similar to this:

http://thetaxcure.com/theTaxCure?_WW1STPAGE_=PAGE_LogIn&P1=EiAldZFOnr87meEXSvqi7r%2BR6pcUde9q

Nice and secure, you are exposing the users email address or password, and a hacker is going to have a heck of a time figuring out what P1 is or how they can exploit it.

The Log In Page

Now that you have the Home page calling the “Log In” page. Its time to create the “Log in” Page. The log in page will perform a couple of functions, and will unencrypt the log in information and validate it against the database. If the log in is successful then the “Welcome” page of the site will be displayed and the “Log in” page is never seen. However, if the log in fails, the page will give the visitor an opportunity to try again, a link to the “Forgot your password?” function, and a “Don’t have an Account, yet?” option in case a visitor gets to the page by mistake. Here’s the current version of the “Log in” page for theTaxCure.com.

Remember this page is part of the Dynamic WebDev site, so needs to be set correctly on the General tab of the page.

When initializing the page, the parameters passed from the Home page has to be unencrypted and the information validated.

The first line Unencrypts the parameter into a string and since the two fields are delimited with a Tab, ExtractString can be used to separate them back into individual fields. Placing them in the screens edit fields avoids creating extra variables and will have the values populated if the log in fails and the page is displayed. The final line is calling a local procedure to validate the log in. It is in a local procedure because it will also be used behind the “Log in” button if the log in fails the first time. Here is the code of the CheckLogin() procedure.

PROCEDURE CheckLogin()

HReadSeekFirst(Member,EmailAddress,EDT_Email,hLockNo)
IF HFound(Member) = True AND Uncrypt(Member.Password,"*SaltPhrase*") = EDT_Password THEN  
   Glo.MemberID = Member.MemberID  
   PageDisplay(PAGE_Welcome)
ELSE
   STC_LoginNotFound..Visible = True
END

The Member table is check for a record that matches the email address, and if one is found the password is also checked. The password is encrypted before it is stored in the database, so it has to be unencrypted to before comparing it. You do encrypt your members passwords in the database right? If the information is validated, then a global variable is set with the MemberID for later use, and the “Welcome Back” page is displayed. The user never sees the “Log in” page. However if the validation fails, then the red “Sorry” message is unhidden and the “Log in” page is displayed.

This provides the user with another opportunity to attempt to log in. The code behind the “Log in” button, is simply another call to the CheckLogin() procedure, which is why you placed that code in a procedure.

This creates a loop that keeps telling the user the log in failed, until that do something different. My partners and I are debating the friendliest way to handle the user that fails multiple times,  instead of letting them keep trying and getting frustrated or worst a hacker pounding away at the site.

And there you have it. A dynamic WebDev site, using some dynamic AWP pages for maximize the SEO potential of the site, while still providing both new and returning visitors with a friendly interface.

• WEBDEV