In this article written by the Mixtazure team you will find suggestions and technical recommendations that can be implemented for a website at the beginning of the journey. Most of the recommendations are related to SEO and web development, their purpose being to help you in the technical optimization process of the website.
1. Install Google Tag Manager (GTM)
Google Tag Manager brings you the following benefits:
- All tracking codes can be set/added via Google Tag Manager (GTM)
- For GTM to work, you only need to add 2 tracking scripts to the source code of your website
- The rest of the tracking codes/tracking pixels (eg: Meta pixel, TikTok pixel, etc.) can be configured directly within the GTM container
- You will be able to configure a CMP (Consent Management Platform) much more easily through GTM, and you will have better control over each consent setting (for each tracking code configured in GTM)
- The management of tracking codes is easier, and you will be able to have a better overview
- Specific conversion elements can be configured through GTM; events can be based on HTML classes, IDs, etc.
- Native integration with other Google tools (for example with GA4)
Useful links with more information about Google Tag Manager:
- https://tagmanager.google.com/ – Google Tag Manager official website
- https://support.google.com/tagmanager/answer/14842164 – tutorial provided by Google for setting up GTM
- https://www.simoahava.com/ – advanced GTM tutorials written by Simo Ahava
2. Install Microsoft Clarity
Microsoft Clarity brings you the following benefits:
- Microsoft Clarity is a heatmapping tool offered for free by Microsoft
- It is very similar to Hotjar in terms of functionality
- It can be installed quickly via GTM
- You will see user recordings that can help you analyze the behavior of users on the website
- There is the AI summary/insights functionality, which will show you key elements of user behavior (based on data from sessions tracked by Microsoft Clarity)
- It helps you a lot if you want to do A/B testing and you don’t know which elements are used by users (or which elements should be changed/improved)
- The data provided by Microsoft Clarity can be used to develop new conversion rate optimization strategies
Useful links with more information about Microsoft Clarity:
- https://clarity.microsoft.com/ – Microsoft Clarity official website
- https://learn.microsoft.com/en-us/clarity/ – tutorials and informative articles on how to use Microsoft Clarity
3. Set up Google Analytics 4 (GA4) and Google Search Console (GSC)
Google Analytics 4 (GA4) and Google Search Console (GSC) bring you the following benefits:
- Through GSC you will be able to track the organic performance of your website within Google Search:
- You will see how many Clicks and Impressions you had over a certain period of time
- You will be able to see the Average Rankings of the keywords for which you were displayed in the SERP (search engine results page)
- You can identify possible technical errors (mainly HTTP response code errors identified by Googlebot)
- Through GA4 you will be able to analyze the traffic on your website:
- You will be able to see how many users have accessed your website over a specific period of time
- You can see from which digital channels you have attracted traffic (for example from Social Media channels, Organic Search, Paid Ads, etc.)
- Both help you measure your performance in the online world, and the data provided will help you adapt (or change) your strategies
Useful links with more information about Google Analytics and Google Search Console:
- https://search.google.com/search-console/about – Google Search Console (GSC) official website
- https://support.google.com/webmasters/answer/9128669 – tutorial for GSC
- https://marketingplatform.google.com/about/analytics/ – official introduction page for Google Analytics (GA4)
- https://support.google.com/analytics/answer/9304153 – configuration tutorial for GA4
- https://developers.google.com/analytics – user tutorials for GA4
4. Image optimization practices
Below is a table that provides a quick summary of image optimization practices. You will find extra details in the continuation of the table.
| Category specific image optimization | Recommendations and suggestions |
|---|---|
| Filename | – Avoid random/generic words or meaningless strings – Use specific filenames, based on the type of product/service – Include organic keywords (no abuse) |
| Filesize | – Filesize as small as possible, under 500KB – Compress images before uploading – Use WebP or AVIF formats |
| Alt Text | – All relevant images require alt text – Describe the main idea simply and clearly – Avoid keyword stuffing – Use keywords relevant to the image |
| Responsiveness | – Use the srcset tag for responsiveness logic – Uses several variants of the image for different devices – Conditions for responsiveness: Viewport Size, Device Pixel ratio, Device width, Zoom level |
| Above-the-Fold images | – No lazy load – Image in HTML code – Synchronous decoding – Fetchpriority=”high” – Possibility of preload |
| Below-the-Fold images | – Lazy loading mandatory – Asynchronous decoding – Fetchpriority=”low” |
For the filename part of the images, we recommend the following:
- Avoid random/generic words or meaningless strings
- Filename should be written as specifically as possible; you can base it on the type of product or service of the page the image is on
- It helps to include organic keywords as long as they are not abused (and helps explain the context of the image)
Pentru partea de filesize ale imaginilor îți recomandăm următoarele:
- Fiecare imagine să aibe un filesize cât mai mic, de evitat mărimi mai mari de 500KB
- Compresează imaginile înainte să le dai upload pe website
- Folosește WebP sau AVIF ca și format de imagine; aceste formate îți permit o compresie mai mare fără a pierde calitatea imaginii
For the file size part of the images, we recommend the following:
- All relevant images in a page’s content need other text
- The main idea of the image should be described as simply and clearly as possible
- To avoid any keyword stuffing, or descriptions that are not related to the image itself
- Organic keywords can be mentioned/used as long as they are directly related to the image itself
For the image responsiveness part, we recommend the following:
- HTML tags such as srcset can be used to define responsiveness logic
- Several variants of an image will be used, each variant having some optimization dimensions for a specific type of device (or for a specific type of size)
- You can track/encode several conditions on the responsiveness logic:
- Viewport Size
- Device Pixel ratio
- Device width
- Zoom level
For images that appear Above-the-Fold on a web page, we recommend the following:
- Do not use the lazy load attribute
- The image must appear in the HTML code of the page (not be referenced by CSS for example)
- The Decoding attribute will be synchronous
- Fetchpriority=”high”, so that they are parsed and rendered as quickly as possible by the browser
- An image preload can be used
For images that appear Below-the-Fold on a web page, we recommend the following:
- To be lazy loaded all the time (they will load only when the user gets to see them in the viewport)
- The Decoding attribute will be asynchronous
- Fetchpriority=”low”
Code example for an Above-the-Fold image:
<img
sizes="
(max-width: 480px) and (-webkit-device-pixel-ratio: 1) 1px,
(min-width: 481px) and (-webkit-device-pixel-ratio: 1) 2px,
(max-width: 480px) and (-webkit-min-device-pixel-ratio: 2) 3px,
(min-width: 481px) and (-webkit-min-device-pixel-ratio: 2) 16px"
srcset="
medium-1x-q75.jpg 1w,
large-1x-q75.jpg 2w,
medium-2x-q35.jpg 15w,
large-2x-q50.jpg 16w"
style="
object-fit: cover;
max-width: 800px;
max-height: 600px;
aspect-ratio: 1.33333 / 1;
width: 100%;"
src="fallback.jpg"
alt="don't forget the alt attribute"
loading="eager"
decoding="sync"
fetchpriority="high"
role="img"
/>Code example for an Below-the-Fold image:
<img
sizes="
(max-width: 480px) and (-webkit-device-pixel-ratio: 1) 1px,
(min-width: 481px) and (-webkit-device-pixel-ratio: 1) 2px,
(max-width: 480px) and (-webkit-min-device-pixel-ratio: 2) 3px,
(min-width: 481px) and (-webkit-min-device-pixel-ratio: 2) 16px"
srcset="
medium-1x-q75.jpg 1w,
large-1x-q75.jpg 2w,
medium-2x-q35.jpg 15w,
large-2x-q50.jpg 16w"
style="
object-fit: cover;
max-width: 800px;
max-height: 600px;
aspect-ratio: 1.33333 / 1;
width: 100%;"
src="fallback.jpg"
alt="don't forget the alt attribute"
loading="lazy"
decoding="async"
fetchpriority="low"
role="img"
/>5. Basic HTML Elements for SEO
Below we present you a list of HTML elements that are necessary for effective SEO:
- Title Tag element: always appear in the HTML that Googlebot sees for a web page; not to be entered dynamically via JavaScript (DOM manipulation)
- Meta Description element: always appear in the HTML that Googlebot sees for a web page; not to be entered dynamically via JavaScript (DOM manipulation)
- Canonical element: always appear in the HTML that Googlebot sees for a web page; not to be entered dynamically through JavaScript (DOM manipulation). Each web page should have a canonical self-referencing configured.
- Internal links using the a href=”” element: always appear in the HTML that Googlebot sees for a web page; not to be entered dynamically via JavaScript (DOM manipulation)
- Headings elements: always appear in the HTML that Googlebot sees for a web page; not to be entered dynamically via JavaScript (DOM manipulation)
As a golden rule, to ensure that Googlebot and other crawlers see all your content correctly, it is important to use as many HTML elements as possible, and avoid JS and dynamic content manipulations (which are usually via JS and DOM manipulation).
If your website uses JS frameworks such as Next.js, Gatsby, etc, make sure your pages/content are server-side rendered or server-side generated. Do not rely on client side rendering, as in many cases Googlebot will not render all of your content. Even though their rendering system is advanced, I encountered many situations where Googlebot was not seeing sections of content at all on web pages where client side rendering was used.
Informative articles that go into more detail about rendering and JS:
- https://vercel.com/blog/how-google-handles-javascript-throughout-the-indexing-process#moving-forward-with-new-information – informative table with rendering types (CSR, SSR, SSG, ISR) and how they influence Googlebot behavior
- https://ziptie.dev/blog/how-to-check-if-google-properly-renders-your-javascript-content/ – article on how you can check rendering from Googlebot’s perspective
6. Robots.txt and blocking rules
In the case of the robots.txt file, we recommend the following:
- Access to resources such as CSS and JS should not be blocked; if they are blocked then Googlebot and other search engine crawlers will not be able to render the content correctly
- Access to images must not be blocked
- Certain parameters can be blocked such as:
- Parameters used for filters, as in most cases these filters will not create new content/content with “value” (more just adapt/change the content of an existing page)
- The parameters used for the search pages, because in most cases these pages will not provide “value” for the algorithm, and you would gain more if you created new pages with a specific template that also includes what appears on those internal search pages
7. On-Page SEO Elements and Content
Even if it is not something very technical, we can still mention some practices that are related to content and On-Page SEO and are indirectly related to the technical part of a website.
See the practice summary table and then read on for extra details.
| Element | Good practices | Motivation/Impact |
|---|---|---|
| H1 | Only one H1 element per page | Avoid conflicting signals to Googlebot |
| Headings hierarchy | Hierarchical use: H1 → H2 → H3 → H4 → H5 → H6 | Clear structure for crawlers and users |
| Headings priority | Focus on H1, H2 and H3 | H4, H5, H6 are often ignored by Googlebot |
| Headings placement | Do not use Headings in Header and Footer | These are site-wide areas and considered boilerplate content |
| Headings utilization | Don’t use Headings just for design/formatting | Headings should mark specific areas of content |
| Breadcrumbs | Recommended for use on any page | Help with navigation and internal linking for Googlebot |
| Semantic HTML elements | Use <section>, <figure>, etc. | Avoid <div> provides context to crawlers |
| HTML tables | Use when the context allows | Appreciated by Googlebot as a signal for content quality |
| HTML lists | Use ordered lists and bullet points | They facilitate skim-reading and are appreciated by Googlebot |
- To use only one H1 element on a web page; multiple H1 elements send conflicting signals to Googlebot (aka make it harder to interpret your content)
- The rest of the Headings (H2, H3) should be used hierarchically within a web page (H1 → H2 → H3 → H4 → H5)
- You can mainly use H1 + H2 + H3; the rest of the Headings type elements are often ignored by Googlebot
- Headings elements should not be used in Header and Footer, as these areas are site-wide and are considered boilerplate content
- Headings elements should not be used for design/formatting; they must denote specific content areas
- Breadcrumbs can be used on any page to help the crawler and users (mostly help Googlebot see the internal linking part better)
- Semantic HTML elements, such as <section> or <figure>, should be used as much as possible; to avoid the classic <div> soup which does nothing to help crawlers when it comes to the context/importance of a content section
- HTML tables can be used when the context of the page/content allows, because this type of formatting is appreciated by Googlebot (and can see it as an extra signal for content quality)
- Ordered lists and bullet points lists can be used when there is an enumeration or when there are specific steps to follow; these formats help on the skim-reading side and are appreciated by Googlebot