Recently, I contributed to Tinode Chat¹, an open-source chat platform, by adding a link preview feature². This post highlights implementation details and lessons learned from collaborating with the Tinode community.

The Purpose of Link Previews

Link previews enhance chat conversations by displaying a summary of the shared link, including the title, description, and an image. Instead of showing a bare URL, users can quickly grasp the content behind the link.

For example, a link to https://yahoo.com can be rendered as:

Example link preview

Implementation Overview

The link preview feature was implemented in Go as Tinode Chat is pure Go backend. Here’s a breakdown of the key components:

1. Fetching URL Content

The first step involves fetching the URL’s content using an HTTP GET request. URL validation is crucial to prevent non-routable IPs, such as private or loopback addresses.

req, err := http.NewRequest(http.MethodGet, u, nil)
resp, err := client.Do(req)

2. Extracting Metadata

Once the content is retrieved, the HTML is parsed to extract metadata using Open Graph (OG) tags, such as:

• og:title
• og:description
• og:image

If OG tags are unavailable, standard meta tags like <meta name="description"> are used as a fallback.

func extractMetadata(body io.Reader) *linkPreview {
    var preview linkPreview
    tokenizer := html.NewTokenizer(body)

    for {
        switch tokenizer.Next() {
        case html.StartTagToken:
            tagName, _ := tokenizer.TagName()
            if tagName == atom.Meta { /* Extract meta tags */ }
            if tagName == atom.Title { inTitleTag = true }
        case html.TextToken:
            if inTitleTag && preview.Title == "" {
                preview.Title = tokenizer.Token().Data
            }
        }
    }
    return &preview
}

3. Sanitizing Data

To ensure a consistent and safe user experience, the extracted metadata is sanitized by limiting the length of the title, description, and image URL.

func sanitizePreview(preview linkPreview) *linkPreview {
    if utf8.RuneCountInString(preview.Title) > 80 {
        preview.Title = string([]rune(preview.Title)[:80])
    }
    return &linkPreview{
        Title:       strings.TrimSpace(preview.Title),
        Description: strings.TrimSpace(preview.Description),
        ImageURL:    strings.TrimSpace(preview.ImageURL),
    }
}

For the complete implementation, check the linkpreview.go³ file.

Conclusion

Feedback from the Tinode community helped refine the implementation and improve code quality. Considering edge cases, ensuring URL validation, and limiting the response body size are necessary for the service that fetches external content.

Contributing the link preview feature to Tinode Chat was a rewarding experience that highlighted the importance of secure coding practices, collaboration, and user-centric design. I look forward to making more contributions to open-source projects in the future.

Thanks for reading!