Meta Information: An apps view

Unlock the potential of explicit metadata to communicate vital details to external systems. Explore the significance of meta information in improving your website’s performance and user experience.
Tags:

What is meta info?

Meta information is a set of data which is provided to applications consuming a web page. The meta information is not by definition displayed on a web page directly for users to see. It is used by other applications, like the browser bar or Facebook. The information is then displayed on the users device.

What is Open Graph?

It is the information that Facebook, LinkedIn and other social network use when creating a card to display a hyperlink.

While open graph may seem similar to other protocols, that’s because it is, many protocols have attempted to do similar things and have been superseded by other protocols. Open graph now seems to be used only for social cards.

Open graph elements on each page

Title

The title is a crucial aspect of any web page or website. It is the first thing that a user sees when they open the webpage, and it appears on the browser title bar, in search engine listings, and other places. The title should be brief, descriptive, and relevant to the content of the page. Most devices only display titles that are less than 60 characters long.

Root Page Title

The main title is displayed on the index page or site root. It is the title of the website and should be chosen carefully to represent what the website is about. A good page title should be short, memorable, and descriptive.

Each Page Title

Each page on a website can have a unique descriptive title. This helps search engines and users to understand what the page is about. A page title should be relevant to the content on the page and should accurately describe the page’s content.

Description

Each page and the root page can have a unique description. The description is a brief summary of what the page is about and should be between 50-160 characters long. A well-written description can entice users to click on the page and can also improve the page’s search engine ranking.

Social Images

Each page can have associated images that can be displayed in cards with applications like social media and messengers. These images can help users to identify the page when it is shared on social media or messaging apps. Social images should be of high quality and relevant to the content on the page. View the open graph protocol website

Many different platforms use other items but Facebook for example, using open graph a image should be 1200×630 pixels and no more than 8MB.

Other meta data systems

You can find information on the complete mdn standards here and the complete list of defined meta name here.

Format detection

When browsers read the text content of any element within a web page, it can determine any text content with a format that it understands, and then it can be enriched as a hyperlink. Each web page has the ability to declare if any format detection takes place within the window.

The client window parsing the text content remains in control if any format detection takes place. For example, text content within a button may not be altered by format detection, or any other element with right-click-enabled interfaces.

You can find more information here.

Structured Content

Structured content is a vast and evolving topic on its own. It refers to the use of structured data to make information on a website more accessible and organized. Structured data helps search engines and other third-party systems to understand the content on a webpage better. For more information on structured content, refer to the guide on the structured content page.

Favicons

Favicons are small images that are used in the small card form of browsers, like the URL bar. They help users to identify the website and make it easier to recognize when it is bookmarked or added to the home screen of a device. Favicons should be clear, simple, and relevant to the website. Favicons can easily be generated from a single image, this makes adding the multiple sizes for different devices quite simple.

Application Manifest

This definition of data enables devices like Android to support the Progressive web app features. A Progressive Web App (PWA) is a website that can be installed on a device like an application. This includes being able to save a web page as a home screen application. The application manifest includes the icon, name, and description of the PWA.

It requires some specific images to enable features like a splash screen. A splash screen is the screen that appears when the PWA is opened before the content is loaded. View the MDN docs

Color

Many devices and situations require an explicit definition of color to act appropriately. Explicitly defining a color can help ensure that the website looks consistent across different devices and platforms. It can also help users with color blindness to understand the content on the website better.

Automation

Websites require images for every page to be most effective. You might be thinking wait that’s a lot of images. And your right, it is, worse still there’re multiple different companies with different formats to support. Being able to automate this process has never been easier. You can use a combination of AI and generative AI to produce amazing content. However, by adding content only to the center of images and having simple designs you can often produce only a single image.

Many people like myself are not full time graphic designers, and we still want to create graphic design images of the highest quality without paying any money. Many application will limit the ways you can use the application to encourage you to buy the paid package. By using the free service of multiple tools you can create great images with zero cost.

For example, creating logos and featured images (1:1 aspect ratio) with Canva or GIMP, exporting them, and then using it as a as an asset when generating open graph images. A great tool for doing this with zero cost is pika.style.

You can upload the assets yourself or automate with an API, sending snippets to pika.style as the title and except and choosing a random stock image.

You may also either, add branding from a template in an editor like Canva or overlay branding to auto picked images.

Image creation

First create a logo like image, with a 1:1 aspect ratio. The image should be large and over 500px wide. Second, generate your image from using a web app or via a API/data-pipeline.

An image of a logo like asset used in the right of open graph image

An image of a complete open graph image

Results testing

As the meta information of each of your pages are designed to be displayed within a certain third party interfaces, not within the display of your webpages window. It is advisable to test the results. Each platform consuming your pages has their own method, but many also conform to open standards. Its also best to test on the platforms you are targeting as the differences can be subtle.

The following are some online services which display the results of the common standards.

Creating Topical Page content