Understanding SEO and Head Metadata

Every campaign and site built within MediaKoi requires specific "Head" information. This metadata ensures that when your content is shared or indexed by search engines, it looks professional and functions correctly across all platforms.

Metadata Fields

The following fields are entered within the system and dynamically injected into the <head>  section of your page:

  • Page Title: The clickable headline that appears in search engine results and at the top of browser tabs. This is the single most important on-page SEO element.
  • Meta Description: A brief summary (approx. 155 characters) that describes the page’s content. It appears below the Page Title in search results.
  • URL: This is the "master" address of your page. It tells search engines like Google which URL is the primary version to index, preventing duplicate content issues if your site is accessible via multiple links.
  • Share Image (OG Image): The visual "hook" for social media. When a link is shared on Facebook, LinkedIn, or Slack, this image is pulled to create the preview card.
  • Favicon: The small "ID badge" for browser tabs. It helps users identify your site visually when they have multiple tabs open and appears next to your URL in Google search results.
  • Apple Touch Icon: A high-resolution version of your logo used specifically when a user saves your site to their iPhone or iPad home screen.

In addition to the above fields, we are utilizing additional information available in the system as well.

  • Title: This is the Name of your Campaign, and serves as the anchor for the page. This is the most critical piece of data, ensuring it occupies the "pole position" in search results and social previews.
  • Company: This is Name of your company in the MediaKoi system, and acts as the "source of truth." It is appended to metadata to provide context, signaling to both users and crawlers that this specific movie page is an official asset of your company.

How the Information is Used

Search Engine Optimization (SEO)

The  URL and Favicon are primarily used by search engine crawlers. By providing an absolute path for the URL, you ensure that search equity is concentrated on a single page. The Favicon increases your click-through rate (CTR) by making your search listing appear more authoritative.

Social & Search Snippets

The system merges this information into the Open Graph and Meta data:

  • Search Snippets: The system pairs the (movie's) Title with the Meta Description to create a compelling search result. This creates a professional "snippet" that clearly identifies the project and the company behind it.
  • Social Attribution: When a link is shared, the system ensures the Company Name is tied to the asset. This provides immediate brand recognition, ensuring that even if a user doesn't click, they have seen your company associated with that specific film title.

Social Sharing & Open Graph

The Share Image uses the Open Graph (OG) protocol. Platforms like X (Twitter) and Facebook can display this image in a user’s feed.

Mobile Home Screens

The Apple Touch Icon is used by iOS Safari. Unlike a standard favicon, this image must be a solid, opaque square (usually 180x180px). When provided, Apple devices will automatically mask the corners to create the "app-like" icon on the user's home screen.

Best Practices

  • Image Dimensions:
    • Share Image: Aim for 1200 x 630 pixels.
    • Apple Touch Icon: Aim for 180 x 180 pixels.
      • Transparency: Do not use transparent backgrounds for the Apple Touch Icon, as iOS will default the transparency to black.