Before launching the official website, you need to see this checklist for website launch in detail to make sure nothing is missing.
Usually, after weeks and months of effort, you finally have a website designed. You want to publish your website right away. But Makemoneytactic advises you not to rush.
Sit back and review the checklist for website launch with the following 4 sections.
- Design Check
- Functional testing
- Check the contents
- Check website SEO standards (Technical)
To be sure, the website is completely ready to welcome the first guests.
1- Checklist for Website Launch: Check the website design
Errors in the design process are easily overlooked or too small to detect. That’s why Venus created the website design checklist below that will help you go back and check for any design flaws.
To get started, be sure to check out the following:
1.1. Visual design elements
1.1.1. Element spacing
Is spacing consistent and safe across the entire site?
That is, within the same block, are the elements evenly spaced (or 10px apart, 12px apart, close together)?
1.1.2. Website colors
Is the color scheme of the website in harmony? Is there a part of the color that is in sharp contrast?
Are the colors correctly coded from the brand color set or just an approximation?
And whether the CTAs (Call-to-Action) are used in prominent colors, easily recognizable, and harmony with the overall.
Is it easy for users to tell which links are clickable and which are plain text?
1.1.3. Shadows
If your website uses shading, is the light source consistent for all elements (or is the shadow on the left, the shade on the right)?
Do you use the same values in the shader?
1.1.4. Font
Are the website fonts reasonable and consistent? Are the fonts used on the website fighting each other?
Is your header size uniform from site to site? Did you use proper italics and bold?
Is all the link text unusual?
Is all text easy to read and comfortable for long reads?
1.1.5. Picture
Do any of the images look blurry or jagged or have overly vibrant colors that don’t look right on digital devices?
Are any of the images damaged or too large?
Do all images (except decorative ones) have Alt tags?
Make sure that you create high-quality images using Canva.
✅See also: How to Create Images for Website in 30 Seconds with Canva?
1.1.6. Brand logo
The logo is the first image that catches the user’s eye when visiting a website.
Is it the latest version of your company’s Logo?
Is the logo sharp enough?
Did the favicon display well?
After doing the visual design elements test, you’ll need to look across popular browsers.
1.2. Test rendering on popular browsers
Different browsers like Chrome, Safari, and Firefox may display your website differently, so you have to test your website in different browsers.
Of course, currently, Chrome and Safari use the highest percentage. You just need to check carefully in these two browsers to feel secure.
During this process (tested on multiple devices), you must ensure that your layout, typography, menus, and other design elements are displaying properly.
When it displays well on Chrome, it will display well on other browsers.
But some factors tend to change in other browsers, so you need to double-check:
- Font
- Colors / gradients
- Picture
- Logo
1.3. Test on multiple devices
Although the dev and tester team worked together to check everything in developing the website, it is safer to recheck the round yourself as a part of our checklist for website launch.
The development of current technology is very fast. There have never been as many devices capable of surfing the web as now. This entails a range of different screen sizes.
And since your customers can come from anywhere, using any device, you must ensure your website looks good on all popular screens and devices.
Most display errors appear in mobile devices (where display space is limited).
If the website is designed properly, your website should work well on any screen size, but be sure to double-check.
Being careful is never too much.
In addition to visibility, mobile navigation is essential.
Make sure to test that the website’s navigation on a touchscreen is good, even when switching from one device to another.
Especially the operating system conversion (Android to iOS)
Note: In website design, in addition to emulating devices to test the website, Venus often uses real devices (although this is quite expensive but highly effective).
1.4. Optimize images
Images and graphic elements are very important in a website, so our checklist for website launch focuses on ensuring they display correctly, especially on all ultra-high resolution devices.
The best solution is to upload your image twice the size it will display on your site.
Compress images before uploading and use the Lazy loading techniques that Google recommends.
Note: Lazy loading is not applied to large images on the first screen (usually slides, banners) to ensure LCP < 2.5s
You can upload two images:
- The actual-sized image for low-resolution devices
- Another image is twice the size of high-resolution devices.
Why? Because:
- The image size causes low page speed and a bad user experience. In turn, a slow page load reduces SEO effectiveness.
2- Checklist for Website Launch: Check website functionality
Functional design and programming go hand in hand, but Venus wants to keep them separate to ensure you can test each part, leaving nothing out.
And check both of these parts to ensure the website is designed as it should be and works as intended.
2.1. Check for integration
This is extremely important and can be a quick test or a lot of technical time, depending on how much built-in functionality you have requested.
Normally, Venus will create a list of integrations when starting a website design contract so that before handing it over, it will conduct the acceptance and inspection process.
Some common built-in functions to test might be:
- Information collection forms (check if the form is working and the information has been sent to the right place)
- If I choose to integrate Marketing Automation, will it work smoothly?
- RSS feeds feature
- Shopping cart, payment (if any)
- Login and registration feature (if any)
- Is there a CRM integration? If yes, is it working?
- Website management system (posting, information configuration, etc.)
All features must be tested by simulating the real behavior of customers and administrators.
2.2. Check out the links
Your site has hundreds of links; usually, before a thorough check, there are always one or two broken links.
It’s a fact. As a step of checklist for website launch you must find and fix them before users get there.
The important links which you want to check out are:
- Navigation links on Main Menu
- Link at the bottom of the page
- Social Networking (Facebook, Twitter, etc.)
- Logo (usually a link to the homepage)
- …
Instead of manually checking each link, Venus recommends trying W3C’s Link Checker or Screaming Frog (the latter is more feature-packed)
3- Checklist for Website Launch: Check website content
Content is the most important thing, so you must have a serious content vetting process.
That is also why Venus separates this part right after the technical factors.
Typically, content audits to ensure that all content is fully updated and approved.
If you follow the right design process, you’ve probably designed with real content (possibly final), so now consider checking for spelling and grammar errors.
Or start replacing all the content with the final content the user will read.
The main goal is to ensure that the website’s content does not contain booking words or meanings that are not meant to be.
✅See also: How to Write a Blog Post that Ranks in Google
✅See also: How to Structure a Blog Post in 12 Steps?
Checklist for Website Launch: Check standard SEO website (Technical)
Checking to see if a website is SEO-friendly includes many factors:
- Basic SEO Elements
- Check Keyword Research
- Check On-Page SEO
- SEO Check (Technically)
- Check the contents
- Check out link building
However, before launching the website, you have not done SEO work, so you can only check a part of the On-Page SEO and SEO standards (technically) of the website.
First, you need the following:
4.1. Check tracking code
In order for your website to work and carry out effective marketing, you need to attach a lot of tracking codes to your website.
These codes are provided by 3rd parties such as Google and Facebook to track behavior and collect customer data to assist you in analyzing the website’s effectiveness.
Note: Many tracking codes attached to the website are also part of the reason for slow-loading pages. However, if you don’t attach it, it won’t work.
You will need a website with boxes for you to attach your tracking codes, and it should work fine:
- Enclose code in <head></head> tag (usually to enclose important code)
- Paste the code right after the opening <body>. tag
- Place the code just before the closing </body> tag (usually to enclose unimportant code that can be loaded later)
These features must be designed so that website administrators can install them themselves (no programmer required).
Then you need to install the tracking codes of:
- Google Tag Manager
- Google Search Console
- Google Analytics
- Facebook Pixel
- …
All Google codes can be attached through Google Tag Manager. I encourage you to install Search Console and Analytics through it to speed up page loading.
Additionally, there may be other types of code that you need to attach to support Marketing:
- Crazyegg/ Hotjar: Track customer behavior by a heatmap, video
- Codes related to CRM, Automation MKT
Then you must ensure these codes are loaded when the web page loads.
The simple way you do the test is as follows:
- Step #1: Open the website
- Step #2: Press F12
- Step #3: In the Elements tab, locate the <head> tag, right after the opening <body> tag and just before the closing </body> tag to see if your codes have loaded.
- Step #4: Check with other pages, categories, articles, etc.
- Step #5: Check with the tools’ admin page if the data has been collected.
Video tutorial to check website tracking code (manually)
Install Extension Tag Assistant Legacy (by Google) on your browser to recognize Google’s tracking codes.
Note: Some tracking codes need to go to the admin page to see if the actual data is being recorded.
4.2. Check the ability to collect information
If the website has Crawl Errors, it means that Google has a problem when trying to crawl your website and articles.
And if Google can’t see your page, your page won’t rank on SERP (search results page)
To test your crawl ability, you need to open Google Search Console:
- Step #1: Open Google Search Console
- Step #2: In the Index tab -> Pages, see if any pages report an error or warning.
If Google has crawling issues, you should check your robots.txt file to see if it’s blocking crawling.
Usually, websites that are in development will be blocked from indexing.
And new websites may also not have data because Google has not yet crawled, even though you have created the correct robots.txt file.
If you haven’t seen anything yet, it could be the case. You just need to confirm with the technical staff (if careful).
But if you see red error messages everywhere, you need to notify the technical staff to check again.
Or, if you are technically savvy, you can completely do it yourself.
For example, the robots.txt file is blocking all data from being collected:
And here is the robots.txt file that collects all the data:
However, we usually will not collect the data on the webmaster page. So, for websites built on WordPress, we have a robots.txt file like this:
In which Sitemap: https://makemoneytactic.com.vn/sitemap_index.xml is the line that informs Googlebot that the sitemap of the website is located here.
The sitemap is a path, a map that helps Google quickly crawl your website more easily.
Refer:
- How to create a standard Google robots.txt file
- And also, instructions for completing and submitting a standard Sitemap for the website
4.3. Learn how Google views websites
As noted above, even though you installed it correctly, your site is up and running. But maybe Google hasn’t collected any data yet.
User-visible does not mean Google has crawled and ranked.
Therefore you need to check this issue.
You can do the following:
- Step #1: Go to Google Search Console
- Step #2: Go to Inspect tab
- Step #3: Paste the website link (or article link you want to check) and press Enter
- Step #4: If the link has not been crawled, you need to click Request Indexing.
This also promotes better keyword SEO, ensuring any content you publish is quickly crawled and recognized by Google.
4.4. Check for mobile-friendliness.
As mentioned above, you must test your website to be cross-device responsive (mobile-friendly).
Because Google has said that they prefer to use the mobile version for indexing ( Mobile First-index )
You can check each page on the Google Search console like this:
Or paste your website link into Google’s Mobile-Friendly Test and run the test:
You will receive a clear message immediately.
Of course, to ” Standard to each pixel, “you must do it using different methods on many different tools and browsers.
4.5. Check HTTPS
Google has announced that HTTPS is a ranking signal on Google Search Blogs (official).
Therefore, your website should install and redirect to HTTPS, for example:
- From http://www.saokim.com.vn
- Redirect to https://www.saokim.com.vn
To do this, you need to buy an SSL security certificate, or you can use a free security certificate.
Google expert John Mueller has confirmed that free certificates like Let’s Encrypt work just as well.
Also, you need to make sure that you only allow Google to index a single page, for example, versions:
- http://saokim.com.vn
- http://www.saokim.com.vn
- https://saokim.com.vn
- https://www.saokim.com.vn
Need to be 301 redirected to a single main URL (one of the two versions below).
- https://saokim.com.vn
- or https://www.saokim.com.vn
Note: Whether or not www is up to you does not affect SEO.
4.6. Check the page loading speed
Is your website loading speed fast?
If not, don’t think about getting good rankings.
That’s why you should go to PageSpeed Insights to check it out right away.
This is a tool purchased by Google from Lighthouse and provided free for us to test page loading speed.
Here you need to check the Core Web Vitals indicators, which are signals about the on-page experience.
These indicators include 3 main indicators:
- LCP: Maximum content display time. Try to limit LCP to < 2.5 seconds (or < 4 seconds if you’re willing to load important images)
- FID: First interaction response time. Try to limit the FID to < 100milliseconds.
- CLS: Composite score of a layout change. This metric measures the stability of the image. Try to limit CSL < 0.1
The metric you need to pay attention to is the LCP, so try to optimize the site for the best score.
Note: Try to reduce the image size and the loading of 3rd party tracking codes to make the website load faster.
> Maybe you didn’t know: Besides speed, good user flow design is an effective way to increase user experience.
4.7. Friendly URL structure
SEO-friendly URL structure makes it easy for search engines to crawl your pages and understand their content.
Your page URL should be simple and descriptive.
Here are some SEO-friendly URL examples:
Content Optimization Tips for Every Business
Website structure that supports good SEO should not be more than 2 levels. For example, this URL is good:
https://makemoneytactic.com/category/seo/
This URL is not good:
https://makemoneytactic.com/category/seo/best-online-course-for-seo/
And URLs should not contain parameters, for example:
https://www.domain.com/category.php?id=2
Use dashes to separate. Never use underscores like this:
https://www.domain.com/services_for_sme
Also, the shorter the URLs are, the higher the ranking is.
4.8. Structured data
As the world’s data grows more and more, billions of bytes are published on the internet every year. Google data must use data typing models to evaluate faster and understand quickly.
At this point, structured data becomes valuable.
Structured data makes your search engine results more prominent, takes up more space, and attracts more users.
If you’re not already using structured data, you need to.
You can handle this part later, but before launching the website, you should also check the ability to integrate and support the configuration of these data structures.
On Schema.org, they provide a variety of formats to structure data about FAQs, people, places, organizations, local businesses, reviews, etc.
You can install the Schema App Structured Data Plugin if your website uses the WordPress platform.
Then, when writing any article, this plugin will have an option box below the post for you to add data for data structure types.
Or you can use Google’s helper Structured Data Markup Helper to create data structures.
The steps to use this helper are quite simple:
- Step #1: Select the type of page and paste the link of the page you want to mark the types of data structures
- Step #2: Use the mouse to select (scan) the elements and tag them accordingly
- Step #3: Click Create HTML > Choose JSON-LD
- Step #4: Copy the code then paste it inside the <head></head> . tag
That’s it.
However, for those of you who are not technically savvy, Venus recommends that you immediately contact your web design unit for assistance.
Because, just missing a character, the code will also be wrong and lead to other worse errors.
So, be careful when configuring data structure types yourself.
4.9. Check the semantic structure
Web crawlers (like Google Bots) read through your site to understand your content.
And it reads the rendered source code, not read it like a human.
Before the HTML5 version came out, web pages used <div> , <span> , <p> … tags to separate the sections of the page, containing the content.
Since the <div> tag can also contain text, the <p> tag can also include text. Similarly, there are many other HTML tags as well.
And different programmers can use different HTML tags to produce the same result.
Therefore, Google (search engines) is forced to use more resources to conduct internal content analysis to understand it.
But when the HTML5 standard was born and applied worldwide, both semantic tags like:
- <main>: Contains the main, important content of the page
- <header> : Contains header content (Usually includes Logo, navigation menu)
- <footer> : Contains footer content
- <nav> : Contains navigation menus (usually the top menu)
- <article> : Describes this as an article
- …
Helped highlight the meaning of different types of content, assisting Google to spend fewer resources to analyze data and quickly understand what the content is trying to describe.
From there, the site is indexed faster and more oriented, leading to a better ranking.
In addition, remember to use heading tags to divide important titles and arguments in order from H1-H6.
<p> tag to contain paragraphs of text.
ul, ol tags to contain unordered/ordered list types.
And there are many other semantic HTML tags you can learn on W3School.
✅See also: On-page SEO Techniques: How to Increase Website Traffic?
Frequently asked questions about Checklist for Website Launch
⏩ What is SEO standard website design?
Is the design of a website that supports good SEO (search engine optimization), including structure, loading speed, support for test codes, … as recommended by Google, and more than 200+ Checklist On-page SEO
⏩ Is the slow-loading page ok?
In fact, many websites load slowly (not too slowly) that still rank well because the content inside is high value. Therefore, the balance between optimizing speed and providing value.
⏩ What is the difference between Web Testing and Web Testing?
In essence, the work is the same. However, website testing checks whether the website after programming is the same as the finalized design, the features in the description have worked properly, and the code has been optimized. These jobs are more about technical assurance.
Web testing is a general and targeted job for general purposes, marketing rather than technical issues.
⏩ What is the difference between web design and web programming?
In real terms, web design is creating a website’s design (usually in the form of illustrations). Web programming is about writing code to make a website really work.
However, “Design” in Vietnamese has a more general meaning, so calling this process “Website Design” is not wrong. Everyone understands that.
⏩ Checklist to check the up coming website is different from SEO Checklist?
Website checklists include the majority of SEO checklists (not all). They are checklists that check for problems that can be set up first (not checklists checked during later development of the website).
✅See also: The Best SEO Ranking Tool: 52 Tools for SEO Analysis
