I have a problem here where Google shows the contents of my <nav> in my category SERPs, and because my nav is made up of inline elements the result gets really messy:
example.com - My page title
www.example.com/url/to/page - Translate this page
LoremIpsumDolorSitAmetConsecteturAdipiscingElitSedDoEiusmod...
So instead, how do I get Google to show my main section instead? Is it as simple as wrapping my content in <main>?
Most sites I've seen don't have their navs showing in their SERPs anyway:
https://google.com/search?q=site:stackoverflow.com
My markup is basically this:
<html>
<head>...</head>
<body>
<!-- jQuery Mobile `page`: https://api.jquerymobile.com/page/ -->
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">
<div class="top">
<nav>
<a>Lorem</a>
<a>Ipsum</a>
<a>Dolor</a>
<a>Sit</a>
<a>Amet</a>
</nav>
</div>
<div class="main">
<div class="articles_wrapper">
<div class="article" itemscope itemtype="http://schema.org/ScholarlyArticle">
<h1 itemprop="name">Main content goes here</h1>
<p itemprop="description">...</p>
</div>
<div class="article" itemscope itemtype="http://schema.org/ScholarlyArticle">
<h1 itemprop="name">...</h1>
<p itemprop="description">...</p>
</div>
<div class="article" itemscope itemtype="http://schema.org/ScholarlyArticle">
<h1 itemprop="name">...</h1>
<p itemprop="description">...</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>