I will share my experience in ways to improve SEO and accessibility on websites. Here comes 10 tips to enhance user experience and search engine optimization(SEO) of your website, such as using semantic elements, optimizing metadata, etc. By following these tips, we can achieve digital responsibility and ensure that everyone could fully enjoy the right and freedom to use technology.
Everything is designed. Few things are designed well. — Brian Reed
Semantic Elements
Use tags to enhance the structure of your web pages, replacing the previously used meaningless <div>, so that search engines can more easily understand your site and the purpose of each block.
Metadata
Metadata
Metadata helps search engines to have a better understanding of your website and can help build your brand when someone shares it with others.
Headline <h1> — <h6>
Clear text hierarchy is important for people with dyslexia or who are not good at using technology products. It also allows search engines to understand whether the structure of your article is complete, which can affect its ranking.
Alt text
Alternative text helps people with visual impairments understand images, and provides search engines with clear descriptions of the images.
Image Format
Convert to the lossless image format WebP, maintaining the same image quality while significantly reducing the file size to optimize the effect of LCP.
Largest Contentful Paint (LCP) is an important, user-centric metric for measuring perceived load speed because it marks the point in the page load timeline when the page’s main content has likely loaded — a fast LCP helps reassure the user that the page is useful.
Avoid Using Intrusive Pop-Ups
Large pop-ups can be both sweet and bitter. They can increase user engagement, but they can also annoy users. Google’s policy is to lower search rankings for pop-ups that are not intentionally full or covered.
URL Structure
Although URLs have little impact on SEO, making them descriptive with relevant keywords makes it easier for users to spot them in search results, increasing their likelihood of clicking. Use hyphens “-” to separate words, and avoid underscores, spaces, or other punctuation marks.
Color & Contrast
To keep minimum contrast between text or graphic element and background the Web Content Accessibility Guidelines (WCAG) recommend achieving 3:1 ratio (level AA) for large text + graphic element and more (4.5:1, level AA) for small text.
Z-pattern hierarchy
Use visual hierarchy in HTML from top left (step 1) to top right (step 2), then left bottom (step 3), and finally right bottom (step 4). Not only does it allow those who need it to use the read-aloud screen content without disordering it, but it also makes the code more concise.
<section class="container">
<div class="step-1" />
<div class="step-2" />
<div class="step-3" />
<div class="step-4" />
</section>Rich Content
Many e-commerce pages use a long, large image to describe the product. This layout has a negative impact on page maintenance, speed, and search engine optimization. We can easily solve these issues by separating images and text into web content and using the methods I mentioned (3–5).
A good design should be inclusive and accessible to everyone. I have learned these knowledge from each development project I have worked on in the past 2 years. I believe the practicality and accessibility of websites are more important than aesthetics. As digitalization is increasingly being emphasized and used, digital responsibility should be a goal that people in this industry must work together to achieve, so that everyone can fully enjoy the right and freedom to use technology.
