This week we are covering e-commerce and search engine optimization (SEO). In my freelancing business I specialize in e-commerce websites and do a bit SEO work for clients. At the end of this module is a section on how to make money making websites.

E-Commerce

E-commerce is broadly defined as the buying and selling of goods and services over the Internet. Here are some acronyms that you could hear in the business world and how they apply to e-commerce:

• Business to Business (B2B). An example in health care of B2B is the electronic (EDI) transactions among clinics, hospital, pharmacies and health plans. These transactions are not directly related to selling, but to financing and patient care.
• Business to Consumer (B2C). For example, Amazon sells products directly to customers via e-commerce. Many smaller businesses also sell directly to customers via e-commerce websites.
• Consumer to Consumer (C2C). A good example of this is the Ebay platform, which provides a way for customers to sell to other customers. Other examples could be the Facebook Marketplace and Craig’s List.

E-Commerce Challenges

E-commerce websites require client-side (like we are learning in this course) and server-side programming. E-commerce websites need to be programmed to: 

1. Retain orders in a database
2. Store payment and customer information with strong security 
3. Calculate and collect sales taxes based on location of purchaser, as well as produce quarterly reports for paying the sales taxes to the government
4. Send a series of automated letters to keep purchaser appraised of order status
5. Track inventory for some e-commerce websites.
6. Calculate shipping costs by zip code and item purchased
7. Convert currencies if selling in more than one country

As you can see from this list, e-commerce is rather challenging to set up if you wanted to build an e-commerce website from scratch. However, even with these challenges, you have the skills to make an e-commerce website today! Here is a list of the simplest to most challenging ways to make an e-commerce website:

1. PayPal buttons: PayPal provides the code for a “Buy Now” Button. The reason why it is so easy is because the actual transaction is done on the PayPal website. You rely on PayPal for security and record keeping. I used PayPal buttons for the first few e-commerce websites I made. (You can do it with what you already know from taking this class.)
2. Shopping Services. Starting at around $29 a month, a store owner can sign up for a shopping service, like Shopify or BigCommerce. I have extensive experience on the Shopify platform. You can add your own HTML, CSS and JavaScript to customize the e-commerce website functionality with Shopify. While Shopify has its own programming language called “Liquid”, you can intermingle HTML, CSS, and JavaScript into their code.
3. WordPress with WooCommerce Plugin: My preferred way to make e-commerce websites is with WordPress with the WooCommerce Plugin. It’s free and open source. The store may still have costs for website hosting, but generally the cost is much less than $29 a month for a Shopping Platform.
4. Create from scratch: Last but not least, the largest e-commerce sellers build websites from scratch with teams of programmers. For example, Amazon.com and Ebay.com have programming teams that make their e-commerce websites.

I have a blog post that covers the pros and cons of Shopify vs. Woocommerce, the two platforms I have used extensively.

So you want to make an e-commerce website….

When I have a new customer that wants to make an e-commerce website, this is a short list of decisions that need to be made and information required to build the website:

1. What are the products? For each product, I need the product name, photos, descriptions, and prices.

2. How will you charge for shipping? 

• I encourage clients to build the price of shipping into their prices to keep the shipping simple.
• Clients can also choose flat rate shipping, or they can even enter all of the product weights and shipping dimensions to use UPS or USPS shipping. 

3. How will you accept credit card payments?

• Stripe, Squareup and PayPal are free options. The client needs to create an account and link their current banking to it.
• We need to connect the client credit card company to the e-commerce website so the payments are automatically made to their account. 

Because you are my student, I am happy to assist you in setting up an e-commerce website. You will need to purchase a domain for around $16 per year. This e-commerce website was made by a CSCI1450 student:

If you sign up for the Web Design course in the Spring Semester at Saint Paul College, one of the websites we make in class is an e-commerce website with WordPress and WooCommerce.

Website Security

Secure Socket Layer (SSL)

SSL encrypts data sent between a web browser and a web server.  SSL is installed on the website hosting. With most website hosts, you need to take the step of turning on SSL and redirecting the HTTP links to the HTTPS links for the website. 

Most website hosts provide SSL for free.

When SSL is correctly installed, the url in the browser bar will show HTTPS instead of HTTP. The browsers also display a little lock icon.

SSL requires a Digital Certificate. The certificate contains information about the certificate, the holder of the certificate, and the issuer of the certificate. A large website may purchase a higher quality SSL digital certicate than what is available for free from the website hosts.

You can find website certificates in the Chrome Developer Tools (Inspect) under Security.

Electronic Data Interface (EDI): Healthcare Example

In healthcare, EDI is used to send information between clinics, pharmacies, hospitals, payers, and government. There are specified formats for sharing data that are required by law. There is a lot of complexity in the standards, and there are “medical coders” who look at medical records and “code” all of the transactions. For example, there are codes for each type of service provided (CPT codes) and each diagnosis (ICD codes). As a side note, Saint Paul College has courses that teach this type of coding:

As programmers, our work isn’t determining what the procedure and diagnostic codes are. Instead we work on passing this data through the health care systems.

United Health Group is a large employer in the Twin Cities. They have documentation of all the EDI standards on their website: UnitedHealthCare

The Twin Cities has a great job market for IT professionals in health care, in part because United Health Group is a large employer in the Twin Cities. Moreover, there are several national Pharmacy Benefit Managers based in the Twin Cities. What that means is that it may be a good idea to choose a career working in health care in the Twin Cities job market.

Careers at UnitedHealthGroup

Other large healthcare companies to work on the East side of town are HealthPartners (near the Mall of America), Blue Cross Blue Shield in Eagan, and UCare on the border between Minneapolis and St Paul. 

Search Engine Optimization (SEO)

SEO is optimizing a website so that it appears in the top of search results. When your potential website visitors are looking for some information or a service on the World Wide Web, they will probably go to one of the major search engines, like Google or Bing. The goal of SEO work is to be in the search results, and, of course, as high as possible in the search results.

SEO success is primarily about website content. Google and the other search engines are quite savvy in recognizing SEO tricks and constantly work to improve their search engines. At the same time, there are other technical aspects can help SEO, for example:

• Page Speed
• Meta Titles and Descriptions
• Quality Coding, eg. semantic elements and alt text in images

The best approach to SEO is to carefully research and choose keywords, and write your copy to those keywords. 

If you enjoy writing, you could be an SEO Copywriter. An SEO Copywriter writes website content to make it more likely to appear higher in website search results. 

Web Page Title and Description for SEO

The web page title and description are placed into the website <head> and do not appear in the web page, with the notable exception that the title can appear in the browser bar. Even though they don’t appear in the web page, they are still extremely important because they appear in the Search Results. When your potential website visitors scan through the results, you want them to choose YOUR website from the results with an clear and accurate title and description.

Description Meta Tag

The description tag looks like the code below. It takes two attributes: name and content. This is the meta description for Google Play Services:

<meta name="description" content="Enjoy millions of the latest Android apps, games, music, movies, TV, books, magazines & more. Anytime, anywhere, across your devices.">

As you can see, it is an accurate but also catchy description of what you can find on Google Play Services.

Place the meta description tag inside of the website <head>.

Note: You probably added the description tag to your template on the Template Lab. This week for the lab you will rewrite all of the meta descriptions to explain the pages. If you don’t know what to write, look at the meta tags in the Sharp Toes website. You can see the meta tags in the Chrome Inspector.

In the example below, you can see how the meta description for the home page of Saint Paul College is used in the search results. First, a screenshot of the description:

And the description is used in the search results. Note that the description is the same.

When writing description tags the language should be compelling and information, but not click-bait. If Google doesn’t like what you wrote for the meta description, it could choose something else from the page.

The <title> Tag

We have been including the <title> tags in our websites since Module 2. However, the title is not only the website title, but the title for the page. Make a unique title for each page. For example, for the resume.html page:

<title>Susan Metoxen's Portfolio :: Resume </title>

The textbook uses two colons (::) between website title and the page title. I generally use an emdash (a long dash) on my websites between the website title and the page title. What you use to separate the website title and the page title doesn’t matter as much as having both the website title and page title included in the <title> tags.

Search Engine Optimization  Games (SEO)

If you purchase a domain name without privacy, dozens of SEO Experts will contact you to offer their SEO Services. Most of these are scams. Since the solution to better SEO is mostly good content, the website owner needs to understand and manage their own SEO or hire SEO copywriters to assist them. The most important factor for SEO is quality content.

If SEO is a topic of interest to you, there are developers who specialize in SEO. They call themselves, “SEOs”.

What really works for SEO?

Great Content: The most important key to SEO is great content, updated frequently, and optimized for keywords.

Back links to your website: A backlink is when someone else links to your website. Search engines look at the number and quality of backlinks to decide what appears highest in the search. Low quality and fake backlinks do not help SEO. In fact, low-quality backlinks could be considered bad behavior by the search engines and could lead to a penalty.

Great meta description: Because the meta description displays in search results a well-written description can encourage more clicks.

Heading Tags: Well-written and organized <h1> and <h2> tags that reflect the content of the page. Assuming you have an image for the logo, the <h1> tags should be the title of the page. If you have text in the header instead of a logo, use <h1> for the title text, and <h2> for the title of the page.

File and folder names: File and folder names should always be lowercase, with a dash between words.

Alt text: The search engines read the alt text in images. For example: <img alt=”Google Reads This”>. Use a description of the image for the alt text. Do not stuff keywords into the alt text.

Website speed: The website images should be cropped, resized, and optimized. We will cover this in Module 12

Semantic Elements: Use at a minimum the header, nav, main, and footer semantic elements. Google uses the semantic elements to understand the page. 

Website Tracking: Google Analytics

Almost all websites use Google Analytics to tracks how many visitors come to your website and how they use your website. From the Google Analytics you can find out:

• Characteristics about who visited
• What pages they visited and for how long

Google Analytics is the standard for tracking and most websites use it. 

Sign up at analytics.google.com 

How to Make Money Making Websites

Now that you have the skills to make websites, how can you use those skills to make money? I have a longer blog post on this topic: How to Make Money Making Websites. Here is a short list for your consideration.

1. Make an eCommerce website and sell a service or product. 
2. Sell websites to customers 
3. Place ads on your website 
4. Place affiliate links on your website 

Advertisements

The easiest way to do this is to sign up for Google Adsense. You can then put Google ads on your website in order to earn ad revenue. Google places ads that are of interest to your website visitor. 

Affiliate Links

Another way to make money on websites is to recommend products. “Influencers” make their living by testing and recommending products. You can do this by signing up to be an Amazon affiliate. As an Amazon affiliate you earn 4-7% of the sale for products you recommend. If someone clicks on your link to Amazon.com and purchases a different product, you receive credit for that as well.

Many website hosts give affiliate fees for referring new customers. 

• Hostgator
• Siteground
• Flywheel

I am set up as an affiliate for Siteground and Flywheel, the to website hosting companies I use for business websites.

Lab Assignment

For the lab assignment this week we will write new titles and descriptions for the Portfolio website. In addition, we will create the home page and resume pages of the website.