OpenGraphiq holds information related to meta tag and image generation.

Here you can define how your Social Sharing image will look like, what will be the title in the sharing card and what the description on the card will be.

You can also test the image generation against the desired post to see what the image template looks in practice.

Main template properties are:

• OG Title
• OG Description
• OG Type
• Image template

OG Title

OG Title field holds the pattern for the content of og:title meta tag property (bold text in the example below)

<meta property='og:title' content='Amy Cook Says It's Better To Learn To Code Than Learn English' class='opengraphiq' />

If not defined, it will fall back to the post / page / product title.

Apart from static text, you can use dynamic values as well (please refer to the list of available dynamic values below).

OG Description

OG Description field holds the pattern for the content of og:description meta tag property (bold text in the example below)

<meta property='og:description' content='Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.' class='opengraphiq' />

If not defined, it will fall back to the post excerpt / product short description.

Apart from static text, you can use dynamic values as well (please refer to the list of available dynamic values below).

OG Type

OG Type field holds the content of og:type meta tag property (bold text in the example below)

property='og:type' content='website' class='opengraphiq' />

It defaults to value “website“. We recommend using “article” value for blog posts and “website” for static pages, products and rest of the content.

If the value is set to “article” then author, article:published_time and article:modified_time meta tags will be displayed on the front-end by OpenGraphiq as well. They will be generated on the basis of post / page properties.

Dynamic values

Apart from static text in OG Title and OG Description fields, you can use dynamic values as well.

This is the list of the values available – they will be replaced by respective post / page / product properties on the front end.

• %post_title% – Post Title
• %site_title% – Page Title ( title tag )
• %post_category% – Primary Post Category
• %post_excerpt% – Post Excerpt
• %product_description% – Product Short Description
• %post_author% – Post Author (nice name)
• %post_date% – Post Date in format set on Settings > General
• %meta_fieldname% – Custom / Meta Field with the name “fieldname”. Replace “fieldname” with your custom field name

You will be working with OpenGraphiq image editor every time you create a new or modify existing OpenGraphiq template.

One thing to note is that the dimensions of the OpenGraphiq templates are 1200 x 630 px which is a recommended resolution both for OG and Twitter Card images.

Above the canvas, you can find the buttons which allow you to place the new elements onto the canvas.

On the right side of canvas, there is a Layers box which displays all the existing Layers and their properties.

You can:

1. select the elements on the canvas either by clicking on them or by clicking on its respective layer in the Layers box
2. drag and drop the layers in the Layers box to change their stacking order
3. use cursor arrows in addition to your mouse to finetune the placements of the elements on canvas
4. elements will automatically snap to other elements on the canvas to help you with positioning
5. in addition to using your mouse, you can resize, rotate and position elements by setting respective values in on the Position tab in Layers box

Testing the OpenGraphiq template

Below the canvas, you can define the post id, so you can test the template with the actual post data. 

Once you enter the post id in the field, click test the template to preview the OG image based on the specific post data.

Things that you can define for the Text element are:

Data Tab

1. Caption
2. Font (family, size, line height, weight, transform and style)
3. Decoration (underline and line-through)
4. Alignment (horizontal and vertical)

Design Tab

1. Color, Opacity, Background Color, Background Opacity
2. Border width, style, color and radius
3. Shadow
4. Padding

Position Tab

1. Width and height
2. Position
3. Rotation

It supports the following post properties:

1. Post title
2. Post excerpt
3. Post author display name
4. Post date
5. Custom / Meta field value (once you choose this option additional field will become available where you can define the desired field name / key)
6. Product description
7. Product regular price
8. Product display price (if the product price is reduced – the product is on sale)

Things that you can define for the Dynamic Text element are:

Data Tab

1. Post field (post property you wish to display)
2. Sample text (the text which will be displayed as the placeholder in the OpenGraphiq Template Editor)
3. Font (family, size, line height, weight, transform and style)
4. Decoration (underline and line-through)
5. Alignment (horizontal and vertical)

Design Tab

1. Color, Opacity, Background Color, Background Opacity
2. Border width, style, color and radius
3. Shadow
4. Padding

Position Tab

1. Width and height
2. Position
3. Rotation

It supports the following post taxonomies:

1. Categories
2. Tags
3. Product categories
4. Product tags

Things that you can define for the Taxonomy element are:

Data Tab

1. Taxonomy (post taxonomy you wish to display)
2. Font (family, size, line height, weight, transform and style)
3. Decoration (underline and line-through)
4. Alignment (horizontal and vertical)

Design Tab

1. Color, Opacity, Background Color, Background Opacity
2. Border width, style, color and radius
3. Shadow
4. Padding
5. Single taxonomy item background color, background opacity, padding and background radius

Position Tab

1. Width and height
2. Position
3. Rotation

Things that you can define for the Image element are:

Data Tab

1. Image from the Media Library
2. Border width, style, color and radius

Position Tab

1. Width and height
2. Position
3. Rotation

It supports the following post properties:

1. Featured Image
2. Author Avatar

Things that you can define for the Dynamic Image Element are:

Data Tab

1. Post field (post property you wish to display)
2. Default background image (the image which will be displayed as the placeholder in the OpenGraphiq Template Editor)
3. Border width, style, color and radius

Position Tab

1. Width and height
2. Position
3. Rotation

Things that you can define for the Rectangle element are:

Design Tab

1. Color, Opacity
2. Border width, style, color and radius

Position Tab

1. Width and height
2. Position
3. Rotation

While you are working on the template you can test it against the desired post.

The first step is to define the id of the post you want to use for testing purposes. Enter your post id into the “Enter post id and test the template” field

Once the id is defined, you can always preview your template in action by clicking “Test the template” button. The generated image will reflect the attributes of the provided post applied to the currently opened template.