If you want to run a successful website, getting a good position at the first few Search Result Pages is crucial. To stand the though competition, it might help to provide structured data markup for rich snippets in Search Engine Results.

To markup content you can either use the linked data format JSON-LD or typical HTML properties.

Structured Data Markup Examples

A website can usually be broken into various same pieces like, article-listings, single-articles, navigation or contact-information elements.

Breadcrumb Navigation

The google developer docs provide a good example of what a breadcrumb navigation should look like, to get picked up correctly by search engines.

Contact Information

Nearly every Website has some kind of contact information most of the time somewhere at the footer area. The following example shows how to markup your contact information. This data will help search engines to show your address and other infos to their users.

<section itemscope itemtype="http://schema.org/Organization">
    <h2 itemprop="name">
        flyweb productions
    </h2>
    <link itemprop="url" href="http://www.your-company-site.com">
    <a itemprop="sameAs" href="http://www.facebook.com/your-company">FB</a>
    <a itemprop="sameAs" href="http://www.twitter.com/brachycera">Twitter</a>
    <p itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
        <span itemprop="streetAddress">Streetname Streetnumber</span>
        <br>
        <span itemprop="postalCode">1190</span>
        <span itemprop="addressLocality addressRegion">Vienna</span>
        <br>
        <span itemprop="addressCountry">Austria</span>
        <br>
        <span itemprop="email">foo@bar.com</span>
        <br>
        <a itemprop="url" href="https://www.flyweb.at">www.flyweb.at</a>
        <br>
        tel: <span itemprop="telephone">+11 2 - 333 44 55</span>
        <br>
        fax: <span itemprop="faxNumber">+11 2 - 333 44 55-1</span>
    </p>
</section>

This results in the following output when you run it with google's structured-data Testing-Tool.

(News)Article Listings

Most websites show some kind of article listings on their main pages, here is an example for a valid single article, semantically marked up and with schema properties.

<article itemscope itemtype="http://schema.org/NewsArticle">

    <figure itemprop="image" itemscope itemtype="http://schema.org/ImageObject">

        <img src="https://link-to-picture.com/article_picture.png" alt="alt-text" width="200" height="100" />

        <figcaption itemprop="description">Lorem ipsum dolor sit amet.</figcaption>

        <meta itemprop="url" content="https://link-to-picture.com/article_picture.png">
        <meta itemprop="height" content="200">
        <meta itemprop="width" content="100">

    </figure>

    <time datetime="2017-04-19T11:58" itemprop="datePublished">19. April 2017</time>

    <header>
        <h1 itemprop="headline">
            <a href="https://link-to-article.com/article-title" itemprop="mainEntityOfPage">
                Lorem ipsum dolor sit amet.
            </a>
        </h1>
    </header>

    <p itemprop="description">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam ea beatae
        repellendus, cum deserunt iure praesentium rerum expedita ex eligendi modi
        natus quaerat, fugiat assumenda minima ad laudantium dolorum libero labore
        ratione, omnis esse, reiciendis laborum voluptates recusandae. Blanditiis
        fugiat perferendis, quam aspernatur quisquam praesentium exercitationem
        delectus temporibus harum pariatur, laboriosam minima sed dolorem. Perferendis
        vero, vitae eum expedita a laborum assumenda est pariatur ab consectetur
        beatae minus explicabo. Quas nemo voluptatum, deleniti corporis similique
        culpa ad, rem a quae qui voluptatem est. Nobis officia laudantium maxime
    </p>

    <meta itemprop="author" content="Superfly">

    <span itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
        <meta itemprop="name" content="flyweb productions">
        <span itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
            <meta itemprop="url" content="https://link-to-logo.com/logo.png">
            <meta itemprop="width" content="750">
            <meta itemprop="height" content="49">
        </span>
    </span>

</article>

The above example will validate as Article and Organization information.

Single (News)Article

This example shows an extended markup for a news-article. For other content types see google docs or "More specific Types" at Schema.org.
If your article contains more then one image, you can keep adding itemprop="image" sections with the given image information.

<article itemscope itemtype="http://schema.org/NewsArticle">

    <figure itemprop="image" itemscope itemtype="http://schema.org/ImageObject">

        <img src="https://link-to-picture.com/article_picture.png" alt="alt-text" width="200" height="100" />

        <figcaption itemprop="description">Lorem ipsum dolor sit amet.</figcaption>

        <meta itemprop="url" content="https://link-to-picture.com/article_picture.png">
        <meta itemprop="height" content="200">
        <meta itemprop="width" content="100">

    </figure>

    <a itemprop="articleSection" href="https://link-to-article/section/">section</a>
    <a itemprop="articleSection" href="https://link-to-article/section/category/">category</a>

    <header itemprop="headline">
        <h1>
            <a href="/link-to-article/article-headline" itemprop="mainEntityOfPage">
                Lorem ipsum dolor sit amet,
                consectetur adipisicing elit.
            </a>
        </h1>
    </header>

    <time datetime="2017-04-19T11:58" itemprop="datePublished"> 19. April 2017, 11:58 — </time>
    <meta itemprop="dateModified" content="2017-04-19T11:58">

    <p itemprop="description">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis
        dignissimos, cum dolor, eum provident cupiditate, debitis quod
        velit fugit commodi alias mollitia a magni deleniti.
    </p>

    <p itemprop="articleBody">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eaque
        reprehenderit sit dolores quos, nemo facere quidem quam accusamus aliquid
        voluptas, rem maiores, consequuntur. Qui, vel tenetur molestiae omnis rerum
        quod corrupti, quis blanditiis tempore eaque eveniet! Eveniet voluptates
        pariatur, libero tenetur reprehenderit quis, atque molestiae adipisci,
        magnam enim esse vero, quisquam veniam voluptas explicabo. Delectus,
        consectetur. Omnis culpa, assumenda mollitia. Molestias repudiandae
        delectus totam qui, facilis quidem quibusdam ipsa eaque modi earum quam.
        Quo eius quod aliquam illum nisi eaque eligendi quibusdam aspernatur
        ex obcaecati, voluptate tenetur porro maiores praesentium doloremque.
        Aliquam sunt illo est dignissimos eaque officiis eos!
    </p>

    <p>
        <a href="https://link-to-article/tag/tag-name/" itemprop="keywords">tag-name</a>,
        <a href="https://link-to-article/tag/tag-name-1/" itemprop="keywords">tag-name-1</a>,
        <a href="https://link-to-article/tag/tag-name-2/" itemprop="keywords">tag-name-2</a>,
    </p>

    <meta itemprop="author" content="Superfly">

    <span itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
        <meta itemprop="name" content="flyweb productions">
        <span itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
            <meta itemprop="url" content="https://link-to-logo.com/logo.png">
            <meta itemprop="width" content="750">
            <meta itemprop="height" content="49">
        </span>
    </span>

</article>

The test result for a single news-article.

Further Links