How to fix wrong SEO and increase your website inflow by 20 times



In order for a website to appear in search results, search engines ask 'what the page is about, updated with the latest information from trusted sources, and has the answer that searchers want.'

Search engine optimization (SEO) is important to make it understandable. In the year since he opened his own website, Maxime Heckel, who increased the number of impressions from about 50 times a day to 1000 times, said in his own experience that 'SEO failure' 'How to fix it' is revealed.

SEO mistakes I've made and how I fixed them --Maxime Heckel's Blog
https://blog.maximeheckel.com/posts/seo-mistakes-i-have-made-and-how-i-fixed-them

Here's what Heckel has done so far to 'fix the wrong SEO':

◆ Unify the chaotic trailing slashes



Heckel writes articles using the static site generator

Gatsby and hosts it on Netlify . Heckel says that if you combine the two carelessly, the tragedy of a slash at the end of the URL will occur.

On Heckel's website, the link to the post is in the form of '/ posts / learning-in-public', but when the reader clicks the link on Netlify, a slash will be automatically added to the end of the URL. thing.

As a result, first, when the article URL is shared on SNS such as Twitter, 'URL with slash' and 'URL without slash' will be mixed. Depending on the web service, you may not be able to get the proper metadata with or without a slash, and you may not see the preview card, just the link.

Heckel also used a Gatsby plugin to automatically generate a sitemap based on a web page and its URL. Since Gatsby set the URL without slashes, the site map also used 'URLs without slashes'. However, since Google's search engine refers to the hosting Netlify's 'URL with auto-added slashes', Google Search Console now warns against URLs without slashes as 'invalid URLs'. It was said.

To solve this problem, either '1: Disable the'Pretty URLs' setting that Netlify automatically optimizes URLs' or '2: Unify URLs to'with slashes' on all blog pages.' The method of 'doing' was considered. In the case of Mr. Heckel, it seems that he took the method of '2' because Google had already referred to the blog post.

◆ Introduction of canonical attribute tags



Even before launching the website himself, Heckel has been publishing articles on

Medium since 2018. Heckel, who launched the blog in 2019, moved the article published on Medium between 2018 and 2019 to the website, but at that time, the content of the article was not modified at all and Medium Did not delete the article. For this reason, Heckel's blog article with the same keyword, the same content, and the same author and Medium's article have become a competitive relationship on Google.

Heckel solved this problem with the canonical attribute tag. Canonical aims to 'normalize URLs' by telling search engines the official URLs. This is done in the following way:

1: Create a canonical attribute tag to be inserted inside the <head> tag of the blog post. The sample is as follows.

<link rel = 'canonical' href = 'https://blog.maximeheckel.com/posts/learning-in-public/'>



2: Access the third-party platform where you posted the content in the past and insert the above tag in the post. Some services explain how to insert tags .

◆ Solving the problem of disappearing meta tags



When building a website with Gatsby, there is a process of 'creating JS files and HTML files for all pages'. At this time, Heckel added the theme setting element 'ThemeProvider' to files such as 'gatsby-ssr' and 'gatsby-browser' so that it would be applied to the entire application.

With this setting, 'bright' and 'dark' themes are inserted throughout the app through the React Provider, allowing the user to switch between themes. The theme is also stored in local storage, so when a user visits the website, the previous theme will be carried over. When the user reloaded the blog, ThemeProvider was supposed to check specific variables in local storage.

However, Heckel made a mistake in this setup process. I used React's 'useEffect' to set the variables, but as a result, only the pages already rendered on the server are displayed with the appropriate theme, and the website defaults when the website is loaded or refreshed. It seems that he was back to the theme. To solve this problem, Heckel said he tweaked the theme to check if it had local storage so that an empty <div> would be loaded while the theme was regained.

Heckel says that this 'loading an empty <div>' mechanism has 'lost' the SEO metadata set on the website. When building static HTML, the theme was not specified, so the tree up to the empty <div> was recognized as static HTML, and all the remaining DOM including SEO components were skipped. It seems to be. Moreover, since the tag appears when the code is displayed with a developer tool etc., it took a considerable amount of time to find the problem.



To avoid the problem of meta tags disappearing again, Heckel created a code snippet to automatically check if all the meta tags set in the SEO component are included in the HTML.

The following is a summary of what Heckel is calling attention to.

-Make consistent slashes at the end of URLs
・ When migrating content from another site, set a regular URL.
・ Do not blindly trust the Gatsby plugin
-Checking the page source may not be sufficient with development tools
· Prevent meta tag rendering from being blocked if it depends on SSR
・ If in doubt, write code for testing

Related Posts:

in Posted by darkhorse_log