Google’s Search Advocate John Mueller says hreflang implementation doesn’t have to be as complicated as people think.
Hreflang is one of the more confusing aspects of technical SEO and among the most important for international businesses and publishers.
In reply to a thread on Reddit, Mueller outlines a simplified approach for publishers to follow.
Hreflang: The Problem
Hreflang is a link attribute that informs Google of the language used on a page. With that information, Google can show the page version corresponding to the language a person is searching in.
Without the hreflang attribute, Google may serve pages in a language the searcher doesn’t speak or pages specific to a country the searcher doesn’t reside.
In the r/TechSEO forum on Reddit, a user is seeking advice regarding the use of hreflang for websites in multiple countries.
They ask if they can get by with a partial implementation of hreflang. For example, they are setting up hreflang for versions of the website in the same language, such as Germany and Switzerland.
The alternative is linking all versions of all pages with hreflang, which is a considerable amount of work.
Mueller says that’s the best solution, but not exactly practical:
“In an idea [sic] world, you’d link all versions of all pages with hreflang. It would be the clean approach, however, sometimes it’s just a ton of work, and maintaining it if the sites are run individually is … good luck with that.”
Although linking every page with hreflang is the ideal solution, Mueller says it doesn’t have to be so complicated.
Hreflang: The Solution
First, Mueller suggests figuring out what needs fixing.
Identify whether a problem exists with searchers landing on the wrong site version.
If that isn’t happening, you may not need to implement hreflang.
“In practice, you can simplify the problem. Where do you actually see issues with regards to people coming to the wrong country / language site? That’s where you should minimally implement hreflang (and, of course, a JS country/language recognizer / popupper to catch any direct visits). Probably a lot of that will be limited to same-language / different-country situations, so Switzerland / Germany in German may be the right place to start. Nothing breaks if you set up hreflang for 2 versions and have 4 unrelated versions.
If you already have these sites running, I’d check your analytics setup for traffic from Search, and compare the country where they come from vs the country that they end up on (pick one country, filter for the traffic from search, and compare the domains they end up on). If you don’t find a big mismatch there, most likely you don’t need to do a lot (or anything) for hreflang. There is no bonus for hreflang, it’s only about showing the most-fitting page in search for users in a specific country / language.”
Next, look at which pages searchers are landing on. One of the most likely mistakes Google can make is serving the wrong version of a website’s homepage.
Since brand names aren’t localized, Google doesn’t always know which version of a homepage to serve if that’s all a user types into the search box.
If you find searchers are landing on the wrong homepage, but there are no issues with other pages, you can get by with a partial implementation of hreflang.
“When checking, focus on the most likely mistakes first: same-language / different-country sites is one, but there’s also homepage traffic. Often times a brand name is not localized, so when people search for it, it’s unclear to search engines what the expectation is. If you find a lot of mismatches on the homepage but not elsewhere in the site, you can also just do hreflang across the homepages (that’s often easier than all pages in a site). Or you could do a combination, of course, all homepages + all German-language pages. Hreflang is on a per-page basis, so the beauty (and curse) is that you can pick & choose.”
Lastly, Mueller reiterates that it’s possible to save a lot of time with hreflang by checking to see if there’s a genuine problem.
Google may serve the correct versions of pages all on its own, in which case you don’t gain anything by adding hreflang.
“In any case, before you rush off and work on this for a year, double-check that it’s an actual problem first, and if so, check where the problem is. Maybe there are super-simple solutions (maybe you just need a country/language popup and don’t even need the rest?), and you can spend your time more wisely elsewhere.”
Think of hreflang as a tool to utilize when needed. You can prioritize other tasks if there’s no need for it.
Featured Image: patpitchaya/Shutterstock
How To Optimize The Largest Contentful Paint & Rank Higher
How To Measure The Largest Contentful Paint Of Your Website
Run a free website speed test to find out. Your LCP speed will be displayed immediately.
The results of your speed test will tell you if:
- The LCP threshold is met.
- You need to optimize any other Core Web Vital.
How Is The Largest Contentful Paint Calculated?
Google looks at the 75th percentile of experiences – that means 25% of real website visitors experience LCP load times of 3.09 seconds or higher, while for 75% of users the LCP is below 3.09 seconds.
In this example, the real-user LCP is shown as 3.09 seconds.
What Are The Lab Test Results On My Core Web Vitals Data?
With this specific web speed test, you’ll also see lab metrics that were collected in a controlled test environment. While these metrics don’t directly impact Google rankings, there are two advantages of this data:
- The metrics update as soon as you improve your website, while Google’s real-time data will take 28 days to fully update.
- You get detailed reports in addition to the metrics, which can help you optimize your website.
Additionally, PageSpeed Insights also provides lab data, but keep in mind that the data it reports can sometimes be misleading due to the simulated throttling it uses to emulate a slower network connection.
How Do You Find Your Largest Contentful Paint Element?
When you run a page speed test with DebugBear, the LCP element is highlighted in the test result.
Sometimes, the LCP element may be a large image, and other times, it could be a large portion of text.
Regardless of whether your LCP element is an image or a piece of text, the LCP content won’t appear until your page starts rendering.
For example, on the page below, a background image is responsible for the largest paint.
In contrast, this page’s LCP is a paragraph of text.
To improve the Largest Contentful Paint (LCP) of your website you need to ensure that the HTML element responsible for the LCP appears quickly.
How To Improve The Largest Contentful Paint
To improve the LCP you need to:
- Find out what resources are necessary to make the LCP element appear.
- See how you can load those resources faster (or not at all).
For example, if the LCP element is a photo, you could reduce the file size of the image.
After running a DebugBear speed test, you can click on each performance metric to view more information on how it could be optimized.
Common resources that affect the LCP are:
- Render-blocking resources.
- Images that are not optimized.
- Outdated image formats.
- Fonts that are not optimized.
How To Reduce Render-Blocking Resources
Render-blocking resources are files that need to be downloaded before the browser can start drawing page content on the screen. CSS stylesheets are typically render-blocking, as are many script tags.
To reduce the performance impact of render-blocking resources you can:
- Identify what resources are render-blocking.
- Review if the resource is necessary.
- Review if the resource needs to block rendering.
- See if the resource can be loaded more quickly up, for example using compression.
The Easy Way: In the DebugBear request waterfall, requests for render-blocking resources are marked with a “Blocking” tag.
How To Prioritize & Speed Up LCP Image Requests
For this section, we’re going to leverage the new “fetchpriority” attribute on images to help your visitor’s browsers quickly identify what image should load first.
Use this attribute on your LCP element.
When just looking at the HTML, browsers often can’t immediately tell what images are important. One image might end up being a large background image, while another one might be a small part of the website footer.
Accordingly, all images are initially considered low priority, until the page has been rendered and the browser knows where the image appears.
However, that can mean that the browser only starts downloading the LCP image fairly late.
The new Priority Hints web standard allows website owners to provide more information to help browsers prioritize images and other resources.
In the example below, we can see that the browser spends a lot of time waiting, as indicated by the gray bar.
We would choose this LCP image to add the “fetchpriority” attribute to.
How To Add The “FetchPriority” Attribute To Images
Simply adding the fetchpriority=”high” attribute to an HTML img tag will the browser will prioritize downloading that image as quickly as possible.
<img src="https://www.searchenginejournal.com/optimize-largest-contentful-paint-debugbear-spcs/471883/photo.jpg" fetchpriority="high" />
How To Use Modern Image Formats & Size Images Appropriately
High-resolution images can often have a large file size, which means they take a long time to download.
In the speed test result below you can see that by looking at the dark blue shaded areas. Each line indicates a chunk of the image arriving in the browser.
There are two approaches to reducing image sizes:
- Ensure the image resolution is as low as possible. Consider serving images at different resolutions depending on the size of the user’s device.
- Use a modern image format like WebP, which can store images of the same quality at a lower file size.
How To Optimize Font Loading Times
If the LCP element is an HTML heading or paragraph, then it’s important to load the font for this chunk of text quickly.
One way to achieve this would be to use preload tags that can tell the browser to load the fonts early.
The font-display: swap CSS rule can also ensure sped-up rendering, as the browser will immediately render the text with a default font before switching to the web font later on.
Monitor Your Website To Keep The LCP Fast
Continuously monitoring your website not only lets you verify that your LCP optimizations are working, but also makes sure you get alerted if your LCP gets worse.
DebugBear can monitor the Core Web Vitals and other site speed metrics over time. In addition to running in-depth lab-based tests, the product also keeps track of the real-user metrics from Google.
Try DebugBear with a free 14-day trial.
How To Optimize The Largest Contentful Paint & Rank Higher
New Report Finds that 62% of Facebook Users Encounter Scams in the App Every Week [Infographic]
MarTech’s email marketing experts to follow
Does ‘goblin mode’ sum up 2022 for you?
Daily Search Forum Recap: December 5, 2022
Google’s Desktop Search Results Are Now Endlessly Scrollable
Dynatrace extends Grail to power business analytics
The German Empire Marches to Italy in a Free Expansion Today
Instagram’s Testing New DM Labels to Help Manage Customer Interactions in the App
B2C marketing: A guide for marketers
This Week’s Deals with Gold and Spotlight Sale, Plus Xbox Black Friday Sale
Vampire Survivors Available Today with Xbox Game Pass for Xbox Series X|S and Xbox One
Xbox Shares Community Safety Approach in Transparency Report
Identifying an Effective B2B Target Market for Ads
Helping Affiliates Create Satisfactory Long-Form Content
The Pros and Cons of Your Brand Using Affiliate Links
Twitter’s demise would cost marketers an important, useful channel
8 eCommerce Marketing Strategies for 2022 and Beyond
How Metaverse is Reshaping the Tourism Industry
SEARCHENGINES6 days ago
Google Says Links Have A Lot Less Significant Impact For Ranking Today
TECHNOLOGY7 days ago
On automation and machine learning as the future of security
EMAIL MARKETING7 days ago
The Ultimate Guide for Ecommerce Email Marketing Strategy
PPC7 days ago
10 Ways Machine Learning Can Transform Your Business