Aspects of successful web publication from a technical perspective

In the past, I served as a founding engineer for a product called Publishnow, a comprehensive content publishing platform designed to foster audience growth and engagement. Although the project is no longer active, my involvement allowed me to amass valuable experience in blogging and publication strategies throughout its development. I particularly benefited from the insights of PublishNow CEO, Myk Pono, who sought to address the challenges of building a successful blog publication.

The knowledge I gained from this experience now informs my personal blog, where I share insights about frontend development and maintain my portfolio. This article aims to explore the technical aspects crucial for successful publication and offers guidance on how to attain them. The provided checklist is crafted to be beneficial for both technical and non-technical individuals, enabling them to effectively set technical goals for their development teams.

Aspect 1: Speed

It’s no secret that search engines prioritize fast-loading pages. Although Google introduced Accelerated Mobile Pages (AMP), I chose not to utilize AMP in my current setup. In 2021, Google retired the ranking systems that rendered AMPs somewhat outdated. The primary concept behind AMP was to create simplified webpages, reducing page size and enabling faster loading times. Instead, I opted for Astro to make my publication exceptionally fast and avoid unnecessary resource loading on my pages.

I leverage static rendering, which is Astro’s default setting. This approach generates the entire site’s pages each time changes are made, ensuring that pages remain lightweight and clean. According to Google PageSpeed Insights, the site receives a very good score, assuming there aren’t excessive vendor instrumentations like analytics.

Given that a significant portion of today’s web traffic comes from mobile devices, embedding speed into your page’s DNA is always a wise decision. In my experience, following Google PageSpeed Insights recommendations can help identify and address weaknesses in your publication.

Aspect 2: Semantically correct and clean HTML

Similar to assistive technologies, semantic markup plays a crucial role in aiding search engine crawlers to navigate your page effectively, enhancing their understanding of its structure and content. Employing semantic HTML proves invaluable in guiding search engines on what to index and how to present search results more effectively.

Beyond search engine optimization, semantically correct HTML also contributes to an improved experience for individuals using screen readers.

The use of clean HTML further benefits your page by reducing its size, subsequently enhancing page speed. This optimization not only fosters a more efficient browsing experience but also aligns with best practices for web development.

Aspect 3: Metadata and structured data

This aspect is often invisible to users and primarily caters to search engines and sharing services such as Facebook and Twitter. When sharing a link, these systems rely on meta tags and structured data to generate a short preview of your article.

To enhance the likelihood of securing a higher ranking, it’s essential to include, at the very least, a minimum set of meta tags and structured data that provides detailed descriptions of your content. More information on structured data.

Must-have metatags (my version):

<meta name="description" content='...' />
<meta property="article:published_time" content='...' />
<link rel="canonical" href="..." />
 
<meta property="og:title" content="..." />
<meta property="og:description" content="..." />
<meta property="og:url" content="..." />
<meta property="og:image" content="..." />
<meta property="og:type" content= />
 
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="..." />
<meta property="twitter:description" content="..." />
<meta name="twitter:image" content="..." />

Some examples of structured data that you should consider in your publication:

{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@context": "https://schema.org",
      "@type": "Article",
      "headline": "Assigning custom components to HTML elements in Astro collections - Image with figcaption example",
      "url": "https://www.kozhuhds.com/blog/assigning-custom-components-to-html-elements-in-astro-collections-image-with-figcaption-example/",
      "image": {
        "@type": "ImageObject",
        "url": "https://www.kozhuhds.com/_astro/astro-figcaption.8b8169ce.png/"
      },
      "description": "Astro collections allow you to keep your content type-safe and provide a built-in mechanism to render your MDX files. Let's consider an example of how to extend the default components mapping for an img tag with a figcaption.",
      "datePublished": "Wed Nov 29 2023 00:00:00 GMT+0000 (Coordinated Universal Time)",
      "publisher": {
        "@type": "Person",
        "name": "Dzmitry Kozhukh",
        "url": "https://www.kozhuhds.com",
        "image": "https://www.kozhuhds.com/_astro/kd.e207a8f4.png"
      },
      "author": {
        "@type": "Person",
        "name": "Dzmitry Kozhukh",
        "url": "https://www.kozhuhds.com",
        "image": "https://www.kozhuhds.com/_astro/kd.e207a8f4.png"
      }
    },
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": 1,
          "name": "Blog",
          "item": "https://www.kozhuhds.com/blog/"
        },
        {
          "@type": "ListItem",
          "position": 2,
          "name": "Assigning custom components to HTML elements in Astro collections - Image with figcaption example",
          "item": "https://www.kozhuhds.com/blog/assigning-custom-components-to-html-elements-in-astro-collections-image-with-figcaption-example/"
        }
      ]
    },
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      "url": "https://www.kozhuhds.com/blog/",
      "name": "Dzmitry Kozhukh blog",
      "description": "Frontend insights",
      "inLanguage": "en_US"
    }
  ]
}

Aspect 4: Design and Typography

The visual appeal of a design not only attracts users and builds trust but also serves practical goals. Properly placed elements and well-defined colors, especially considering color contrast, should be your top priority when crafting the design for your blog publication.

I’ve dedicated a separate article to the topic of dark mode, exploring its significance: Dark Mode: The Must-Have Feature for Publication Websites.

Typography and sizing are crucial aspects that significantly impact the reading experience and reader engagement. In my publication, I leverage Tailwind as a design system. Additionally, they offer a Typography Plugin that streamlines the application of entire typography styles with a single CSS class.

Key considerations for typography styles include:

1. Line spacing: Ensure the text is not too tight, as this can make it difficult to read.
2. Content section width: Keep the text content width moderate (around 700px-800px in my opinion) to prevent readers from losing their place when transitioning to the next line.
3. Text sizing for different screens: Pay attention to text sizing, especially on smaller or larger screens.
4. Text contrast: Ensure that text has sufficient contrast for readability; Google PageSpeed will issue a warning if this becomes an issue.

Taking these elements into account contributes to an optimized and reader-friendly design for your blog publication.

Aspect 5: Article publication elements

An article is comprised of carefully defined elements, each reflected in corresponding HTML elements. My must-have list includes:

1. Article Cover: The main image representing the article.
2. Article Headline.
3. Article Date: Essential information for readers, offering insights into when the content was created or updated.
4. Article Excerpt: A brief description providing an overview of the article content.
5. Table of Contents: Ideally positioned alongside the content for easy navigation.
6. Byline: The author(s) of the article.
7. What to Read Next: Suggestions for related content, guiding users to further reading.
8. Sharing Buttons.
9. Clickable Tags: Facilitating quick navigation to articles with similar topics.
10. Time to Read.

Aspect 6: Google Search Console

After launching your publication, it’s crucial to add your site to Google Search Console. This step allows you to identify and address any page issues that may impede crawling, monitor page insights, and manage sitemaps.

Google Search Console is a valuable tool for ensuring that your content is searchable and possesses proper metadata and structured data. It’s essential to remain patient if your site experiences low traffic initially, as Google requires time to discover and index your content.

Aspect 7: Sitemap

A sitemap is a file where you provide information about the pages, videos, and other files on your site, and the relationships between them. Search engines like Google read this file to crawl your site more efficiently.

Aspect 8: Additional pages

Tag pages are lists of posts associated with a specific tag. An author page becomes valuable in publications with multiple authors, featuring a photo, name, short bio, and a list of the author’s posts.

Aspect 9: Good content

Of course, the quality of content is one of the most crucial aspects. Crafting unique and high-quality content allows it to rank at the top, even when disregarding some of the recommendations mentioned earlier. However, when choosing between pages with similar content, search engines will prioritize the more high-quality and faster-loading page in any case.