As a front-end web developer, it’s important to take into consideration the website’s SEO. There are many mistakes that can be made at this stage which will decrease your search engine ranking, and you may never know they even happened!
Dear readers, I'm Jack Pham. In this article, we find out the most common SEO-related mistakes which front-end web developers often make and how we can avoid them.
1. Missing meta tags
One of the most common SEO-related mistakes that front-end web developers make is forgetting to include important meta tags in their code. Meta tags are snippets of code that provide information about a page to search engines and other web crawlers. They help search engines understand what a page is about, and can also be used to control how a page appears in search results.
Beside some very basic meta tags such as <title></title>, <meta name="description"/>, <meta name="keywords"/> (depreciated), there are other important meta tags that you must take into your consideration:
<meta charset="utf-8"/>
This meta tag specifies the charset should be encoded to display your text on your page.
<meta property="og:image" content="..."/>
This meta tag specify the image that will appear when you use the page url to share on social networks
<meta property="og:title" content="...." />
This meta tag specify the title that will appear when you use the page url to share on social networks
<meta property="og:description" content="..." />
This meta tag specify the description that will appear when you use the page url to share on social networks
<meta name="viewport" content="width=device-width, initial-scale=1">
This meta tag specifies the scale of your page when it is displayed on a certain device.
Forgetting to include these important meta tags can severely hurt your website's SEO. Make sure to double-check your code before you publish it to make sure all of your meta tags are in place.
2. Inappropriate heading tags
One of the most common SEO-related mistakes which front-end web developers make is using appropriate heading tags. Heading tags are used to indicate the hierarchy of information on a page, with <h1></h1> being the most important and <h6></h6> being the least important. However, many developers often use heading tags incorrectly, either using too many <h1></h1> tags or not using enough <h6></h6> tags. This can result in a page being penalized by search engines or simply not being as easily accessible to users.
To be good for SEOs, the number of heading tags in each page should be:
- Only one <h1></h1> tag: The <h1></h1> should be placed above other heading tags.
- Only one <h2></h2> tag: The <h2></h2> should be placed below <h1></h1> tag and above other heading tags.
- For <h3></h3>, <h4></h4>, <h5></h5> tags, you can use as many as you want.
However, please remember that using too many heading tags can make a page look cluttered and difficult to read, while not using enough heading tags can make it difficult for users to find the information they are looking for. If there are too many of them, you can consider using <div></div> or <p></p> instead of heading tags to lower the number.
3. Missing HTML attributes
When it comes to coding, attributes are part of an HTML element. However, when it comes to SEO, there are some important attributes that you should not miss. Some of the most important HTML attributes which should be included in every piece of code. These help search engines understand what your website is about, and also give users an overview of what they can expect to find on your site. forgetting to add these tags can result in poor search engine rankings and decreased traffic. Below are some examples:
alt in <img /> tag
Because search engines cannot read your image content, then alt attribute will tell them what your image is about.
title in <a></a> tag
Links are very important for SEO. The title attribute in <a></a> tag will tell search engine crawlers more about the destination page.
role in <a></a> tag
Some <a></a> tags that coders use do not link anywhere. Instead, they play a role as buttons. In this case, you should put the role="button" attribute into your <a></a> to prevent crawler from following these tags.
4. Responsive issue: content is wider than the screen
One of the most common responsive design issues is when content is wider than the screen. This can happen when images or other elements are not sized correctly, or when there is too much text, or there are some oversize images on a page.
If content is wider than the screen, it can be difficult for users to read and navigate. They may have to scroll horizontally to see all of the content, which can be frustrating. Additionally, search engines may not be able to index all of the content on the page if it is too wide.
5. Heavy unused CSS & JS
When it comes to CSS and JS, more is not always better. In fact, code bloat can be a major problem when it comes to website performance. If you have unused CSS or JS on your website, it's important to remove it. Not only will this help improve your website's speed, but it will also reduce your page size, which can help improve your SEO.
When it comes to improving the SEO of a website, front-end web developers often overlook the importance of optimizing CSS and JavaScript files. These files can often be quite large and contain a lot of unused code, which can significantly slow down a website.
As you can see, more CSS & JS is not always better. To optimize CSS and JavaScript files, it is important to first identify which parts of the code are actually used by the website. Once you have identified the unused code, you can either remove it or minify it to reduce the file size. Not only will this help improve your website's speed, but it will also reduce your page size, which can help improve your SEO.
In addition to reducing file size, another way to improve the SEO of a website is to make sure that CSS and JavaScript files are loaded asynchronously. This means that they should not block the loading of other important resources such as HTML and images.
6. Unminified CSS & JS
The article explains some of the most common SEO mistakes that front-end web developers make. One of these is not minifying their CSS and JS files.
When CSS and JS files are minified, they are compressed so that they take up less space and load faster. This is important for two reasons: first, it improves the user experience by reducing page load times; and second, it can help improve your search engine rankings because Google takes page speed into account when ranking websites.
There are many tools to minify your CSS and JS files. Some are online tools such as Grunt or Gulp. Some are plugins of code editors (VS Code, Sublime Text, Atom...) that you can install and use without a fee.
7. Unoptimized image size
One of the most common SEO-related mistakes which front-end web developers make is failing to optimize their images for the web. When images are not properly optimized, they can slow down your website's load time, which can hurt your search engine rankings.
There are a few things you can do to optimize your images for the web:
1. Resize your images to the correct dimensions before uploading them to your website. There is no need to upload an image that is 3000px by 3000px if you only need it to be 300px by 300px.
2. Compress your images before uploading them. If you use Photoshop to export your images, you can use the function 'Export for web' to compress it properly. In addition, there are many free online tools which can help you compress your images without losing quality, such as TinyPNG.
3. Use the correct file format for your images. JPEGs are best for photos, while PNGs are better for graphics and logos with transparent backgrounds.
8. Unoptimized image file name
One of the most common SEO mistakes that front-end web developers make is forgetting to optimize their image file names. For an optimized image file name, there should be only lowercase characters without spacing, special characters... When you save an image, be sure to use a keyword-rich filename that accurately describes the image. For example, if you have an image of a green apple, don't save it as 'Green Apple 14.jpg'. Instead, try something like 'green-apple.jpg' or 'fresh-green-apple.jpg'. This will help your images show up in search results when people are searching for those keywords.
9. Too many fonts
One of the most common mistakes that front-end web developers make is using too many fonts. This can have a negative impact on SEO as it can make your website appear cluttered and unprofessional. Stick to using a maximum of three fonts, and make sure that they are all easy to read.
If you're using too many fonts on your website, it can make your pages look cluttered and can be difficult for visitors to read. Stick to a maximum of two fonts on your website, and use them sparingly. If you must use more than two fonts, make sure they are similar in style so that they don't clash.
10. Not using proper canonical tags
Canonical tags tell search engines which version of a webpage is the original, and which ones are duplicates. This is important because search engines will often penalize websites for having duplicate content.
For example, the pagination function divides a single page with a full list of articles into many pages with part of the list. Those pages may have the same title and description. Therefore, if a <link rel="canonical" href="..."/> is not inserted to those pages, search engines will consider those pages as duplicated ones.
Front-end web developers often make the mistake of not using canonical tags, or using the wrong ones. This can lead to serious problems for a website's SEO.
Conclusion
There are a lot of SEO-related mistakes which front-end web developers often make. However, by being aware of these mistakes and taking steps to avoid them, you can improve your website's SEO significantly. I hope that this article has helped you learn about some of the most common front-end developer SEO mistakes so that you can avoid them in the future. Thanks for reading!
