Fonts and SEO: how to use bold and italics properly
This is a rather old and probably outdated topic, although it cyclically comes back in social discourse and actually even in the conversions we have with our users. Is there a difference in using strong and bold HTML tags in a text? What about between italic and emphasized? And how much does the use of these font signals affect SEO? So here are a few pointers that we hope will clarify the question and reassure SEO copywriters and publishers, starting with a general consideration: typography management should not be done only with the aesthetic effect in mind, because font choice, the use of bold and italics, or increasing font size are crucial tools for improving the usefulness and readability of the content we offer to our readers.
Font emphasis tags, the myth of SEO effects and the real impact
When it comes to SEO, we often fall into the myth that every small element of a web page can be a ranking factor for Google. However, it is important to distinguish between what actually affects ranking and what actually improves the user experience – an absolutely central and non-negligible element, but one that does not imply a direct connection to improving organic visibility.
Starting from the basics: Google, with its complex and ever-evolving artificial intelligence, aims to provide users with the most relevant and quality results, and so even intuitively one can understand that marking a word or phrase with italic or bold tags certainly cannot decisively influence the algorithms.
So, let’s clear the air right away: it has never been denied that there may be a bland value for SEO in the use of strong and emphasized tags, but what matters to us is that there is certainly value in terms of usability and readability for people, who at a glance can identify the parts of text that have been decided to be emphasized.
Bold, italics but not only: the evolution of HTML tags in the semantic web
This last statement ties in with the history of these HTML tags, which have evolved over time to accompany the transition from a simple markup language to one that seeks to understand and categorize content in a more meaningful way, as per the characteristics of the so-called Semantic Web.
From the earliest steps of HTML code, there were a number of tags that allowed text to look different in browser rendering: <b> was the bold tag, <i> the italic tag, and <u> the underline tag. In all three cases, these were notes of graphical value only, which added no special information about the highlighted words for crawlers. In other words, these tags were purely presentational: they instructed the browser to display the text in a certain way, but provided no additional context or meaning. At a time when the Web was primarily a collection of static documents, this simplicity was sufficient.
With the introduction of HTML 2.0 through HTML 5.0 there was a significant change with the addition of the <strong> and <em> tags, which are designed to add a level of semantic meaning to text, not just to change its appearance. We are indeed in the semantic web, and the ultimate deprecation of the old tags has been not just formal, but substantive: the new indications have greater expressive capacity and communicate a very specific meaning that can be interpreted by search engine crawlers.
The semantic web is an extension of the current web, in which information is given in a way that is understandable not only to humans but also to machines. In this context, the importance of semantic tags such as <strong> and <em> has grown, as they allow search engines and other tools to better analyze the context and meaning of content. Other presentational tags such as <font> and <center> have also been deprecated in favor of CSS (Cascading Style Sheets), which separates design from content structure, allowing for greater flexibility and accessibility. In addition, HTML5 introduced new semantic elements such as <article>, <section>, <nav>, and <header>, which help define the structure and layout of content in a more meaningful way.
What are the html tags related to typography
Web typography is like the tone of voice in a conversation: it can influence not only how words are perceived, but also how they are understood.
As mentioned, back in the early days of HTML there was the possibility of using tags to “modify” the visual presentation of onpage text; classic presentational tags were commonly used to change the appearance of text, and the main ones include:
- <b> makes text bold. Specifically, the <b> tag is short for bold and indicates a stylistic and graphic difference of one or more words from the rest of the text, but without attributing specific importance signals of these parts.
- <i> renders text in italics. Specifically, the <i> tag is short for italic (which means cursive, as a tribute to the Venetian typographer Aldo Manuzio and the style of writing that resembles calligraphy) and represents a portion of text in which something is expressed (a tone or mood, for example) that differs from the remaining content, without adding other meanings or elements of importance.
- <u> emphasizes text. Specifically, the<u> tag is short for underline and is used to emphasize portions of text and distinguish them from neighboring text.
- <font> defines the font, size and color of the text.
- <center> centers the text on the page.
- <strike>or <s> shows the text with a line through it (strikethrough).
- <big> increases the size of the text.
- <small> reduces the size of the text.
Subsequent revisions and various updates implemented in HTML with the goal of improving the semantics and structure of Web documents then led to the creation of these new semantic markup, “new” tags or methods that provide richer context for search engine crawlers and improve accessibility because these markups have greater expressive capacity and communicate a very specific meaning that can be interpreted by search engine crawlers:
- <strong> indicates that the text is of particular importance, with a strong emphasis. It is displayed in bold by browsers.
- <em> shows emphasis (from the initials of “emphasis” in English) that could influence how the text is interpreted. It is displayed in italics by browsers.
- CSS (Cascading Style Sheets): In place of the <font>and <center> tags, CSS is used to define styles such as font type, size, color, alignment and other aspects of design. This allows for greater separation between content and presentation.
- <mark> is used to highlight parts of text.
- <del> indicates text that has been deleted from a document. It replaces <strike>or <s> to provide a semantic context of deleted text.
- <ins> indicates text that has been inserted into a document.
- <small> continues to be used, but with semantic context to indicate text of lesser importance.
- <sub>and <sup> for formatting superscript or subscript text, useful for chemical, mathematical formulations or references.
The use of these tags goes beyond simple visual presentation: they are an integral part of the semantic structure of a web page and, as such, can help improve the accessibility and understanding of content by users and search engines, which continue to refine their algorithms to better understand the context and relevance of content. As such, they can feebly promote proper indexing and, potentially, better ranking in search results. It follows that developers and content creators are encouraged to use these tags, not least to contribute to a more organized and understandable Web, where meaning is as important as presentation.
What bold with strong means
Labeling one or more terms with the strong tag means giving a net relevance to this text: it serves to thematize the page, it can also be used within headings, and it could also help to give importance to the keywords we are targeting with SEO strategy. It is no longer just a visual highlight, but a signal that search engines are also sensitive to, and they interpret that text as semantically important.
What italics with em means
Similar is the meaning of the new <em> tag, which is used to emphasize (as on the other hand the name of the tag itself says, emphasis) a text or phrase that has different intonations from the others. Again, there is now added semantic emphasis recognized by crawlers, which in turn can then assign different weight to the portion of text thus characterized.
The use of strong and em tags for SEO
The decision to deprecate the old <b> and <i> in favor of the semantic tags <strong> and <em> gives us some food for thought: first, it serves to give a clearer separation between content and graphics, freeing the tags from defining the appearance of text and leaving them with a more useful task, that of signaling information.
Thus, by using bold or italicized portions we provide not only a reading cue to users (focus your attention on this word or expression), but we also send a message to browsers, text-reading tools, and crawlers about the relevance those different portions have.
Going back to the initial reasoning, changing tags and favoring semantic ones is a remarkable operation that only makes full sense if we also frame it in a perspective of (albeit minimal) SEO variation: this is why we can say that putting keywords in bold (obviously strong) can have some positive effect for the ranking of the keywords we are working on, although obviously there is no actual feedback that can confirm the intuition.
When the crawler analyzes a page it immediately searches for the most relevant information, and so the use of emphasis tags might be one way to provide such hints. In addition, well-formatted text also has value for the reader, who is made easier to search for information, and we have said many times how writing online from an SEO perspective is also and above all writing for people and not just for robots.
How to use emphasis tags in text
Ultimately, here are some practical tips for managing the emphasis tags in the text when writing: first, for bold we should use the <strong> tag and avoid the <b> tag (which is now deprecated); similarly, for italics we will use the <em> tag instead of <i>.
Migliora i tuoi testi
These labels allow you to highlight longer keywords or queues to strike more of a chord with users, give indication to crawlers and search engines, and possibly gain a slight ranking advantage.
Obviously, one should not overdo it: highlighting long sentences or many words in bold makes the text confusing and offers no added value, just as inserting italics on entire periods does little good.
Common sense remains the compass that must guide our work: text must be optimized for easy reading and comprehension, because this means focusing on quality and producing content that users and search engines like.
Google’s position on italics and bold in content
In short, using italics and bold in a piece of content does not directly affect a page’s ranking. However, what is clear is that Google values well-structured and easily navigable content, and this is where the importance of these typographic tools comes in.
In fact, as John Mueller reminds us, in its operations to try to figure out what the content of a web page is about, Google “looks at different things, such as the titles of a page,” but it also analyzes what “is actually bolded or emphasized within the text of the page,” because theoretically, the parts so labeled have to some extent some extra value, in the sense that it is a clear indication of what the author thinks are the most relevant passages for the topic being discussed.
This value, however, is relative only to the content of the page itself, and going to extremes we can say that using boldface for some important points in a paragraph can help SEO, that is, it supports Google to better understand that paragraph or that page. But we should not go overboard in interpretations of this concept, because it is again Mueller who makes it clear that “a few snippets of bold text in an article can send stronger signals to Google, but bolding all the text on a page would not add any value,” precisely because the emphasis effect of these tags would be lost.
