HTML has always been the skeleton of the web: fundamental to its function, usually hidden, missing in certain areas, and important not to break. This HTML and SEO guide is written focused semantic SEO and the technical alignment between HTML and content. Structured Data has been a hot topic issue in SEO this year (as it is many years), and while schema is a major element of structured data, proper HTML formatting is as well.basic HTML guide here .)
The Philosophy of HTML and Friendly Browsers Something that separates HTML from other languages is how forgiving it is. (We can have a fun argument aboutwhether or not HTML is just a markup language, or a declarative programming language . For shorthand and simplicity we’ll go to “language” and you can argue with me on Twitter ) For example, It doesn’t necessarily throw errors if you forget to close markup—it will just assume you want to keep that markup open until the end of the page, where it will helpfully close the element for you.John Hogg’s view-rendered-source comparing tool. ) The view-source shows what the developer wrote, and the inspector shows what the browser interprets out of that, rendering thrown into the mix.Page Source Inspector View The actual page
The and Semantic HTML The
is where aligning your HTML and your content becomes extremely important.
Semantic elements in the body are a companion to the visual layout of the page. With HTML5, developers will be able to use semantic elements like
and to describe more about the content and how it fits onto the page. There are roughly100 semantic elements available , and all of them help sculpt machine understanding of content.s rather than a thousand tags.
另一个例子的语义的重要性HTML– links. Previous Google stated that it does not, cannot, and will not follow or look at links that exist outside proper link attributes. A proper link attribute involves an opening a tag and a href attribute. There’s a reason
link statements make SEOs shudder in fear. Here Martin Splitt shares a bit more broadly what types of link implementations you shouldn’t use:
H/T to Martin Splitt Links are how the internet is structured; a link is a connection from one Web resource to another. It’s important to use proper link tags when
you’re working with HTML ; a link is made up of two anchors (
tags) and a direction. The link starts at the source and points to a destination.“ Gary Illyes said during a bay area search meetup; “I would stay away from
links. Not because we can’t understand them, but because it will take us longer to understand them. Whatever requires rendering takes time. ” This is a lot less, how shall we say, stringent than previous statements, and I’d consider it a pretty significant shift.video John Mueller put out about tags and how to handle them for SEO and Accessibility. The part that made my eyes bulge slightly was this specific slide:see them, instead of how they’re written—if someone has a title with tags that is different from something that might be a styled as a title (say, using CSS), so it’d be important for Google to see that discrepancy and read the more accurate version of the page.However .HTML can be described as kind of a quantum layout language —You can write HTML as an input but you cannot, necessarily, be sure out what the output is. Users are everywhere, using all sorts of devices and aspect ratios and color-changing extensions and screen readers and more. You can control what you write, but not how your users will see the results.The List and Table Advantage Tables and lists are easy ways for Google and other robots to digest information. Be aware, though; machines are looking for expected behaviors—unexpected behaviors can easily trip them up.Google SERP listing for “bob animal crossing”
tag, and then , or table row, tags, defining each row; a table header is defined with a tag. Each cell is defined by the , or table data, tag.part of a table-row (“tr”) element, and also is as a cell labeled “td” or “table data.” So the snippet interprets Gender as Personality, and Male as Lazy. Google would probably better understand this table if the top row was marked with “th” or “table heading.”decide whether a table is a data table or a layout tablezebra-striping (going back and forth between colors by row) seems to let the browser see a table is to do with data instead of layout. This is important for a few reasons- one is accessibility (screen readers and devices interact withlayout tables and data tables differently ). But it may also affect SEO—Januka Harshan on twitter noted that their competitors seemed to be picked up more often partially because those competitors used alternating colors. So, there’s a fun test for someone to try out., ordered list. Google Featured Snippets tend to show up in four formats; paragraphs, lists, tables, and videos. Lists can be both a great way to convey information rapidly, but also often get cut off by the featured snippet, which can cause more click throughs.Google likes lists for items , steps of processes, tasks, etc.our Featured Snippet study backs this up; for some queries, Google prefers bulleted lists. In aggregate, we see tags as the main source of Featured Snippets, but for some spaces the winner is
tags.
What’s up with Divs: When all you have is a framework, everything starts to look like a
attribute. A
attribute is an empty element; it doesn’t have any semantic meaning. This means you can wrap other elements with
s without necessarily affecting anything. You can assign styles to
s, populate them using JavaScript, and all sorts of other flexible meanings.
An evolution over the last few years has been the divergence between accessibility/SEO practitioners and web developers. As developers have worked with more JavaScript frameworks, like React, Angular, and Vue, they’ve found that
elements are an easy way to insert JavaScript into a page. On the other hand, because
elements are empty and mean nothing (a horrible insult for a person but a neutral description of a
), accessibility experts and SEOs have shied away from
’s. Some even go to the extreme of advocating for 0
elements on any page of a website.
那么谁是正确的呢?< div >元素literall吗y the worst thing to come into web development or are they flexible, easy, and good? The truth is the answer is both—when abused they can be terrible, but used correctly they can be really useful. Divs are a neutral element—and because they are neutral,
elements can be used all over a page to provide styling, inject JavaScript content (using, for example, d3.js) and giving developers a way to group elements of the page for the purposes of styling. These elements can be used to sculpt a page without forcing screen readers to note every element on that page.
Debugging HTML: Debugging HTML can be as simple as looking at the page and checking if the appearance matches with your expectations. Comparing the source and the inspector and running yourHTML through a HTML validator are other ways you can see if there’s anything wrong with what you’ve developed. Another recommendation I would make for HTML is to actually use a screen reader on your site—you can try JAWS or ZoomText for Windows, or if you’re on a Mac navigate to the Accessibility settings to enable VoiceOver. You can also try and navigate your site using only the keyboard. This can show you the shape of how your HTML affects your content, and since many people are only experiencing your site those ways it’s important to include them in your design.
Talking to the Robots: New Google Developments HTML is an ever-evolving thing; recently, Google introduced new HTML attributes to help give Googlebot more information about your content. These are almost entirely specific to Search Engine Bots.On September 10th , Google posted about new link elements that could be used to describe nofollow links. A lot of webmasters were wondering how those kinds of attributes might affect their content, and why they should change from nofollow links to include new kinds of attributes like “ugc” or “sponsored.” I think this has some similar benefits to other semantic HTML elements—to semantically describe the links is to give Google more context, which can’t be a bad thing.Google has also introduced more options for snippets, using the robots meta tags (in the head) and a new HTML attribute (data-nosnippet) in the body. This allows webmasters control over what search engines index and display in search results.
HTML Ch-ch-changes HTML is constantly changing, with new attributes being explored by developers, discussed by the World Wide Web Consortium, and implemented in browsers. Attributes like Native Lazy Loading make difficult web development tasks easier, as well as providing performance and SEO value. Keeping up to date in the HTML space and learning more about HTML also help improve accessibility.Google has said their goal is to make the web a better place for everyone , no matter what their connectivity, device,accessibility concerns , or love of JavaScript frameworks—the baseline of this is semantic HTML.
