Vev Essentials

The Vev Essentials are added to your site by default and let you set various metadata and tags for optimal SEO performance.

Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Vev Essentials, Meta tags, Social Media meta tags, and Open Graph meta tags are integrated features that streamline the process of optimizing and customizing your hosted web content, maximizing its reach, and improving user experience across different platforms and search engines when used accordingly.

They are going to be installed by default when creating a new hosting instance.

Vev Essentials

Vev Essentials is the backbone of Vev that adds titles, metadata, and required scripts for Vev content to load.

Note: It is important not to modify or edit this integration to ensure the stability of your published Vev page.

Meta tags

Meta tags are essential elements that are placed within the 'head' element of a webpage. They play a crucial role in specifying various aspects such as the character set, page description, keywords, document author, and viewport settings. Acting as content descriptors, meta tags aid search engines in understanding the content and purpose of the web page.

Requirements

Webpage author: This attribute allows you to specify the name or identity of the person or entity responsible for creating the webpage's content. It is useful for providing attribution and is often used for informational purposes.

Add keywords for SEO: In this field, you can input relevant keywords or key phrases that are associated with the webpage's content. These keywords help search engines understand the content and improve the webpage's search engine optimization (SEO), making it more likely to appear in relevant search results.

Description: The description attribute allows you to provide a concise and informative summary of the webpage's content. This description is often displayed in search engine results and can greatly influence a user's decision to click on the webpage link. It should be engaging and accurately represent the content of the page.

If you have an array of custom Meta tag configurations, and you want to dynamically generate Meta tags for a webpage based on these configurations, then click the “Add item +” button. The generated Meta tags will include the specified "name," "property," and "content" attributes as defined in the Custom Meta tags array.

Open Graph meta tags

Open Graph meta tags are code snippets that govern the appearance of URLs when shared on social media platforms. Including social media metadata on your website is considered a best practice, as it determines how various elements such as the title, URL, image, description, and site name of your webpage should be displayed when shared.

These meta tags are based on Meta’s (Facebook) Open Graph protocol and are utilized by several other social media sites, including LinkedIn and Twitter. You can locate them within the head section of a webpage. Any tags with the prefix 'og:' before a property name signify Open Graph tags

Requirements

To transform your web pages into graph objects and enhance their presentation on various platforms, it is essential to incorporate vital metadata. The following four properties are mandatory for each page:

  • Title (og:title) - This represents the title of your webpage and will be displayed prominently within the graph when shared or referenced. Per default, we use @vev.page.title to reference the title of the page automatically.

  • OG Type (og:type) - Your webpage's OG type, such as "video.movie," allows platforms to categorize and handle the content appropriately. Depending on the specified type, additional properties may also be required to provide more context. The default value here is website.

  • URL (og:url) - Providing the canonical URL of your webpage is crucial as it serves as its permanent identifier within the graph. This ensures that the correct page is associated with the shared content. @vev.url defines the URL of your webpage per default.

  • Image (og:image) - An image URL that effectively represents your webpage within the graph. This visual representation is essential for attracting users' attention and improving engagement when shared on social media or other platforms. @vev.page.cover fetches the image you have defined for your webpage in Project Settings.

In addition to the core settings, you have the flexibility to include additional parameters that further enrich your website’s representation:

  • Description: Provide a concise one to two-sentence description of your website. This brief snippet gives users a glimpse of what your content is about and entices them to explore further. Go to Page Settings and enter your description of your content. With @vev.page.desc per default, it will be retrieved automatically.

  • Locale: Specify the locale for which these tags are marked up using the format language_TERRITORY , e.g. en_US. You can customize it to cater to specific language and regional preferences.

  • Alternate Locales: Consider including an array of other available locales on this page. By doing so, you accommodate users from diverse linguistic backgrounds and create a more inclusive experience.

  • Site Name: If your webpage is part of a larger website or brand, it's valuable to display the site's name. This helps users easily identify the source of the content and fosters brand recognition. The default value @vev.project.title fetches the name of your project automatically.

By adhering to these requirements and including accurate metadata, your web pages will be optimized to appear more appealing and informative in various contexts. This, in turn, can significantly boost the visibility and reach of your content across different platforms.

Social Media meta tags

This Social Media Meta Tags integration empowers you to define a featured image, page title, description, and URL for optimal representation when sharing your site on social media platforms Facebook and Twitter. They rely on these parameters extracted directly from your website. By utilizing this integration, you gain complete control over the content they extract from your post.

Requirements

Facebook-related tags:

To begin, enter your Facebook App ID. If you're unsure how to find it, check out this helpful blog post. Next, you have the option to add your Facebook Admin ID. This blog post will guide you through the process of finding it. Additionally, you can include your Facebook Page ID to connect your web content to your Facebook page. Learn more about this process here.

Twitter Card-related tags:

For Twitter, you can choose from different card types to determine how your content is presented. Options include summary, summary_large_image, app, and player.

Enter your Twitter site, such as "@Whitehouse," and your Twitter username, e.g., "@realDonaldTrump," to effectively associate your content with your Twitter presence.

Did this answer your question?