Technical SEO Strategies: Duplicate Content, Hreflang, Mobile, AMP, PWA’s, Security, HTTPS And Speed

In the previous article on Technical SEO part 3 we covered how to architect a site at the basic level and Schema, Javascripts and APIs. These techniques impact a site’s organic search results so in this article we will look at how to architect a site at the level of Duplicate Content, Hreflangs, Mobile, AMP, Progressive APIs, security and the speed of a site.

• Step 4 of the Strategy: Build the right Architecture

• Duplicate Content

• Hreflangs

• Mobile

• AMP

• PWAs (Progressive PPAs)

• Step 5 Strategy: Check Your Site's Security

• HTTPS

• HTTP/2 Protocol

• Step 6 Strategy: Check Site Speed

• Gzip

• Images

• Minify

• DOM

• Conclusion

Step 4 Of The Strategy: Build The Right Architecture

Duplicate Content

It is very common to have Duplicate Content on a site and this impacts a lot on optimization and crawling. Duplicate Content can be from external sites or in the internal structure itself: texts, images. For a text and images not to be copied from other sites, it is enough to create original content, but if it is duplicated content internally, we need SEO techniques to solve it, for example, there may be duplicate content when you update a new URL for a certain page and do not delete the old content or when the same page can be accessed through 2 different links: https:// example.com/page/ and https://www.exemplo.com/pagina. When search engines realize that duplicate content exists, they tend to prioritize the ranking of the original content or they may penalize both pages that have the same reading.

To solve this problem we need to identify which pages are having this error, we can use this tool to see the duplicate pages of a site: Siteliner. After you see which pages have this error, you will have to add a “canonical rel” to the desired page. Another solution will be to use 301 redirection on the link from the old page to the new one. This is the way to avoid that pages compete with each other in Google’s ranking and Google penalizes them.

Hreflang

As globalization advances, websites increasingly need multiple languages. This is because people all over the world may have an interest in your products or services, so each language must have its own content. The main care that SEO technicians must take in a multilingual project is the “from – to” relationships, for example, I have a page about “Global SEO PT” and I want that when the user clicks on the English flag, it will forward directly to the page “Global SEO EN”, without the user having to go back to the homepage again, and only then to the page in question. This is made possible by hreflang.

Hreflang is an HTML attribute used to specify the language and geographic targeting of a web page. The hreflang tag tells search engines, such as Google, about these variations. If you are on wordpress you can also use several plugins that do this conversion, the “WPML” plugin is a good solution as it allows you to establish the “from – to” connection, but allows manual editing of the content by the technician/administrator, you can also use plugins like “Hreflang Manager Lite” or “Polylang”. If you want to add the hreflangs manually you need to place them in the header code, in the <head> tags with this structure:

Mobile Optimization

Nowadays it is more common for a user to access websites via cell phone rather than via desktop computer, so Google’s parameterization has changed and prioritized sites that have good mobile navigation. However, websites are still developed first for desktop, and only then for mobile. One way to speed up the work in developing mobile navigation and help Google’s algorithm to automatically recognize the responsiveness of the site’s pages, is to put the “viewport” tag in the header of the site’s HTML code. This tag guides the browser on how it should adjust the dimensions and scale of the page according to the width of the device.

If you consider a WordPress or Wix site, they come already prepared to deliver responsive pages automatically. In the case of wordpress the “Elementor” (type of page creation framework) is the most suitable for creating user-friendly pages. The work of a technical SEO should adjust the HTML, CSS and JavaScript codes of your pages for the mobile parameters to be in the right sizes and understandable.

To find out if your site is mobile-friendly, Google offers a free mobile device compatibility test. Or you can go to the Google Search Console report – “Usability on mobile devices” and check if some pages have some problems. In case there are any problems, Google Search Console will report how to mediate their resolution.

AMP

AMP stands for “Accelerated Mobile Pages”, it is an open source, component-based HTML5 framework that allows you to create web pages. With AMP you can easily create websites, emails, web stories and ads that prioritize the user. AMP-coded pages appear in search engine searches as a “carousel” of results for mobile devices and feature a lightning bolt icon and the acronym “AMP.” AMP is powered by JavaScript, styling can be customized via CSS3, and pages are cached. Google AMP caching works similarly to a content delivery network (CDN). AMPs are completely separate from a typical mobile site.

The advantages of using an AMP are:

AMP pages can load almost instantly, for the speed of a website this is a must-have asset;
Several platforms support AMP, including Google, Bing and Twitter;
AMP still allows you to use custom CSS, but reduces the complexity of your code somewhat;
AMP components are already built in and easy to use;
AMP is an open source initiative, so it offers a more user-friendly web experience;
In search engine searches the AMP site appears in a carousel, gives a highlight to those who use this type of framework.

On the SEO side, AMP needs optimizations on its pages, just as is done with other types of sites: wordpress, wix, code programming, etc. First you will need to figure out if all AMP is detectable to search engines, for example, for AMP pages, use rel=”amphtml” instead of rel=”canonical” as <link> tags in <head>. Do not add AMP pages to XML Sitemap, Google already automatically knows when it is crawling AMP pages just by placing the rel=”amphtml” canonical tag. You can and should continue to use Alt Text in images, H1, hreflangs and all structured data in AMP, the difference is that AMP returns more advanced features, now you have the opportunity to have host carousels or enhanced search. The speed of AMP is also faster than a standard mobile site.

For those working with wordpress there is the AMP plugin that can help get pages into this structure. To test your AMP you can access these 2 tools: https://search.google.com/test/amp |https://search.google.com/test/rich-results or you can go to Google Search Console and see reports about your AMP.

PWAs (Progressive Apps)

According to Google, progressive apps are progressive web applications that use modern web features to provide an app-like user experience. Since it dispenses with installing an app, it can be accessed through a URL, which will save resources and memory on the device. Changes and updates to a PWA are also easily applied and approved for implementation on the user side. PWAs are designed to be capable, reliable and installable, have the ability to intercept and handle network requests, cache or retrieve resources from cache, and deliver push messages (messages that appear as a popup on devices) as needed. PWAs load quickly, use as little data as possible, and content is separated from navigation.

PWA uses 4 technologies:

Home screen access: direct installation on a website that has already been visited, without the need for an app store;
Offline support: It is a JavaScript file that runs in the background, independent of the browser, and separate from a web page;
Uses TLS (Transport Layer Security): HTTPS security in its settings;
Application shell architecture: PWA loads reliably and instantly on the user’s screen because the application shell uses very little HTML, CSS and JavaScript.

A PWA, can in fact significantly improve your organic search profile, making the user experience better than that of your competition. The biggest advantage of PWAs is their greater speed compared to other mobile platforms and native apps. Google crawls PWA sites the same way it crawls an AJAX or JavaScript site, so technical SEO has to exist on these apps to ensure the pages are indexed correctly, the only difference is that Googlebot will not index URLs with # in them. Many PWAs use the hashtag symbol in their URL structure. The only way around this is to implement a URL structure using traditional SEO rules.

But how to create a PWA? There are some initial requirements for this. First of all it must have an HTTPS connection, be controlled by a WC3 manifest, be responsive in all screen formats, be functional in multiple browsers (Chrome, Internet Explorer, Firefox, Safari, Edge, Opera, etc.,) and indexed with a unique URL for each page. To create your PWA, you must keep the defaults of the manifest.json file at the root of your system, there are already automatic file generators today. Your app must contain images, including the clickable icon present in the interface, and must have an SSL certificate. You will have to install a SW (Service Worker), a script that runs in the background, unrelated to the page. And finally you can inspect your PWA with “Lighthouse” (by running the command line in Chrome DevTools). You can check in more detail, step by step, how to create a PWA here: https://medium.com/tableless/como-criar-seu-primeiro-progressive-web-app-do-zero-a7e6ca5fb21e.

Step 5 Strategy: Check Your Site's Security

HTTPS

HTTPS stands for “hypertext transfer protocol secure” and is the encrypted version of HTTP. HTTPS protects the communication between your browser and the server from being intercepted and tampered with by attackers. HTTPS uses a secure certificate from a third-party vendor to secure a connection and verify that the site is legitimate. This secure certificate is known as an SSL Certificate. Any website that shows a padlock icon in the address bar uses HTTPS. The TLS “transport layer security” helps to encrypt HTTPS when using email protection and other protocols. With HTTPS, credit card data, passwords, private user data and personal data are encrypted with a strong layer of security.

When switching from HTTP to HTTPS you have to inform Google about this transition, starting by setting up Google Search Console, Google Analytics, update internal links and update all relative URLs. First you have to open a new HTTPS configuration in Google Search Console, but do not delete the previous one yet, until you are sure that everything has been migrated properly. At this point you have two possibilities, change the URL’s manually by implementing 301 redirection of those URL’s or change the URL’s by the server, or use some plugin that will update the URL’s instantly, but it is advised to check if this transition was done well. Basically there are many ways to do this redirect, each SEO has to define what is the best condition for his situation.

Finally, Google Analytics must give the ok of how the new domain is and is secure, to receive the correct data from the new URL’s. Make sure you choose the best SSL certificate, implement it and the process is done.https://analytics.google.com/analytics/web/#/report-home/a246530124w354343735p284945340

HTTP/2 Protocol

HTTP is a protocol originally developed for distributing hypertext content – that is, texts with hyperlinks that can lead to other texts with hyperlinks. The first version of HTTP we know of is HTTP/0.9, which served only to transfer text from a server to the computer. Until a few years ago the protocol that most websites used was HTTP/1.1, but the problem with this protocol is that the browser opens a connection, requests a file from the website server, receives the file, and only then requests another file. To minimize this loss of time, browsers usually open multiple connections per server, meaning that your browser can end up opening dozens of connections just to load a page.

Today the protocol has changed for the better, HTTP/2, is a binary protocol, made to be understood by machines, not people. So it is more efficient and brings some benefits that fix the current problems of the web. It uses multiplexing, the browser opens a single connection to download multiple files. HTTP/2 is done through server push, because there is a series of calls to external elements, such as CSS and JS files, this way, as soon as your browser requests index.html, the server can respond with index.html, style.css, tb.css, jquery.js and favicon.png instantaneously, they are already rendered automatically. In addition to improving the user experience, HTTP/2 will also bring benefits to businesses.

For SEO to know which protocol is used on a site, you can access the Google extension “http Indicator” which provides the information by the color of the protocol. If you are not yet using the http/2 protocol on your site, you can do it through “CloudFlare”, for that you have to create a free account, insert your site/domain, select the free plan and confirm, you will have to copy the CloudFlare DNS and replace it on the current server where your site is hosted. You can check this process step by step at: https://blog.escolaninjawp.br/http2-guide-complete/.

Step 6 Strategy: Check Site Speed

Web Vitals (Page Speed)

Web Vitals (Core Web Vitals) are the speed metrics, used to measure the user experience on site pages. The metrics measure loading with:

– Largest Contentful Paint (LCP): this should occur within 2.5 seconds after the page starts loading;

– Visual stability with Cumulative Layout Shift (CLS): pages should maintain a CLS of 0.1. or less;

– Interactivity with First Input Delay (FID): pages should have a FID of 100 milliseconds or less.

Think With Google found that a load of up to 5 seconds increases the likelihood of the user dropping out of the site visit by 90%. Core Web Vitals can be viewed in real time, monitored and resolved through “PageSpeed Insights” or “Gtmetrix”.

To improve the speed of a page there are some techniques to be performed, namely compressing the files sent by the server (Gzip), reducing the size of images on the page, eliminating superfluous characters from HTML, CSS, Javascript codes, creating AMPs and leveraging the browser cache.

Gzip

Gzip is a website file compression format. In other words, it reduces the size of files sent by your server and the transfer time, with compression rates of up to 90% on the largest files. This is one of the most efficient measures to reduce page load times. All current browsers are compatible with this format and process the compression automatically when the user accesses a site. Some servers do this automatically, but if not, there are several caching plugins for WordPress that enable Gzip compression. One of them is “WP Fastest Cache”, which shows a simple checkbox with everything you can configure, including Gzip compression.

Images

There is SEO work behind every image as they can be heavy and make the site slow, web images carry information that will be provided to Google. The file size of an image is crucial to the ranking of the page and the image itself, it must be light. For this you can use some compression tools such as “Optimus”, “Tinypng” or Photoshop. The most advanced image formats that maintain quality are JPEG 2000, JPEG XR and WebP, you can use the plugin “WebP Express” or “Optimole” to optimize your images for the desired format in a simpler way.

The SEO should also take care to place images already at the right size on the site so that the site does not have to do redirections. There are also images that are below the fold of the page (do not appear to the user) that can have their loading delayed, in these cases you should use the lazy load feature, through the Lazy Load plugin for WordPress. This way, the images are only loaded when the user reaches them.

Minify HTML, CSS, Javascript

Minifying HTML, CSS and Javascript code is removing the code that does not matter, i.e. eliminating line breaks, whitespace and comments. There are free applications for this in wordpress: “W3 Total Cache” and “Autoptimize”. If you work with a site made only in programming you will have to check the pages manually. You will also have to eliminate resources that hinder the rendering of the site, CSS and Javascript slow down the HTML to deliver interactive pages to the user. To solve this you can determine that Javascript and CSS resources load asynchronously, this can be done using the plugins: “Async Javascript” and “Speed Booster Pack”.

DOM

Dom stands for Document Object Model and is the structure of the objects that the browser generates every time it loads a page. It is a hierarchical structure in which there are different objects that depend on each other, there is the main object that will then branch off to other more secondary ones, like a flowchart.

DOM represents the HTML structure of the page composed of a series of tags. The DOM affects the performance of a page if it is excessive, because it includes HTML elements that are not visible the first time the user loads the page, which increases the consumption of data and the loading slows down, if it is excessive the performance of execution also decreases, as the users and scripts interact with a page, the browser continuously recalculates the position and style of the html tags, and it may need more memory to process the pages.

In order for the DOM not to negatively affect the pages of the site, you should remove all unnecessary HTML elements from the site:

Google recommends that when developing a site, pages should contain less than 1,500 DOM nodes, designs should not be too complex.
To reduce DOM in wordpress have to segment large pages into multiple pages, try not to have too much scroll per page, and if you have a lot of different content like forms, posts, products, etc, it is better to sort all these elements into different pages and link them through the navigation menu. You can and should enable the slow loading plugin, for example: “WP-Rocket” or “Lazy Load”.
It is also essential to limit the number of posts or products per page, 10 is reasonable.
Remove unnecessary items included in the default wordpress theme, such as the “add to cart” button, “publish date”, “author information”, etc.
Use well-coded page themes like “Astra” or “GeneratePress”, here pay attention to div tags so that they are not too many, you can use solutions like “Oxygen Builders”.
Use tools like “HotJAr” that allows you to see what users are using and what is not working on your site for them.

Conclusion

Technical SEO is extremely important for a website, because without it the search engines will not crawl, index and improve the performance of the website. In this Technical SEO part 4 article we have seen how to build the correct architecture of a website, its security and speed. In the next article we cover the topic of Local SEO or Google My Business.

Many companies today need immediate results, but the truth is they can’t afford to implement SEO internally while leveraging with the priority of their business focus. If you still can’t handle these steps or don’t have the time to put them in place, Bringlink SEO ensures you get the brand visibility and growth you deserve.

Talk to us, send email to bringlinkseo@gmail.com.