5. Technical Aspect and Filters

SECTION 01What OpenGraphiq does?

OpenGraphiq automatically generates social share images and meta tags for your WordPress content

OpenGraphiq generates all Social Network related meta tags on your static pages and post pages based on defined templates.

This enables you to fully control the appearance of your site content on social networks when shared by you or users / visitors of your site.

Tags generated by OpenGraphiq are:

  • og:url (based on url of the content)
  • og:locale (based on locale used by WordPress for the specific content)
  • og:site_name (based on the Site Title set in WP Settings > General)
  • og:title (based on the OG Title property of the used template. By default this is post / page title)
  • og:description (based on the OG Description property of the used template. By default this is post excerpt / product short description)
  • og:type (based on the OG Type property of the used template. By default this is website. If it is set to article, author, article:published_time and article:modified_time meta tags will be added as well. They will be generated on the basis of post / page properties)
  • fb:app (based on the Facebook App ID setting on OpenGraphiq Settings Panel)
  • og:image (based on generated image)
  • og:image:type (always image/jpeg)
  • og:image:height and og:image:width (630 and 1200 respectively, based on generated image dimensions)
  • twitter:image (based on generated image)
  • twitter:card (always summary_large_image)
  • twitter:site (based on the Twitter username setting on OpenGraphiq Settings Panel)

For additional details related to og and twitter related tags and their meaning, please refer to the Facebook and Twitter documentation:

SECTION 02Compatibility with other SEO plugins

What happens if you use other SEO plugins?

OpenGraphiq can work in parallel with other SEO plugins such as:

  • YOAST SEO
  • All in One SEO
  • SEOPress

What you need to know though is that if you have both OpenGraphiq and your SEO Plugin Social sharing functionality active, they will both generate the same meta tags in your content’s markup.

This is a bad practice as duplicated meta tags compete with each other and the end results will be hard to control – it will be on specific Social Network to decide which ones it will take into account (usually the ones which appear first in the HTML source code, but this is not guaranteed).

In this case, we strongly advise that you switch off your SEO plugin’s Social sharing functionality. They all should have this option and you should consult your SEO plugin documentation on how to do so.

YOAST SEO Social Share deactivation

For Open Graph meta data, open Social menu and navigate to Facebook tab. Set option “Add Open Graph meta data” to be disabled and Save Settings.

https://documentation.bold-themes.com/opengraphiq/wp-content/uploads/sites/76/2022/12/YoastFacebook.png

For Twitter Cards meta data, open Social menu and navigate to Twitter tab, set “Add Twitter Card meta data” to disabled and Save Settings

https://documentation.bold-themes.com/opengraphiq/wp-content/uploads/sites/76/2022/12/yoasttwitter.png

All In One SEO Social Share deactivation

For Open Graph meta data, open Social Networks panel and navigate to Facebook tab. Set option “Enable Open Graph Markup” to be disabled and Save Settings.

https://documentation.bold-themes.com/opengraphiq/wp-content/uploads/sites/76/2022/12/AIOfacebook.jpg

For Twitter Cards meta data, open Social Networks panel and navigate to Twitter tab, set “Enable Twitter Card” to disabled and Save Settings

https://documentation.bold-themes.com/opengraphiq/wp-content/uploads/sites/76/2022/12/AIOTwitter.jpg

SEOPress Social Share deactivation

For Open Graph meta data, open Social Networks panel and navigate to Facebook (Open Graph) tab. Set option “Enable OG data” to be disabled and Save Settings.

https://documentation.bold-themes.com/opengraphiq/wp-content/uploads/sites/76/2022/12/SEOPressFacebook.jpg

For Twitter Cards meta data, open Social Networks panel and navigate to Twitter (Twitter card) tab, set “Enable Twitter card” to disabled and Save Settings

https://documentation.bold-themes.com/opengraphiq/wp-content/uploads/sites/76/2022/12/SEOPressTwitter.jpg

SECTION 03Available filters

OpenGraphiq filters allow you to customize the default plugin behaviour

Although OpenGraphiq by default offers a wide range of options, we understand that we can not predict all use cases needed for your specific content.

That is why we have added a number of filters to allow you to additionally control the OpenGraphiq generated output.

OpenGraphiq offers the following filters:

  • opengraphiq_template – filters the template associated with the post / page / product
  • opengraphiq_markup – filters the entire OpenGraphiq HTML markup
  • opengraphiq_title – filters the og:title meta tag’s content
  • opengraphiq_description – filters the og:description meta tag’s content
  • opengraphiq_image_title – filters the Dynamic Text > Post title content on the generated image
  • opengraphiq_image_excerpt – filters the Dynamic Text > Post excerpt content on the generated image
  • opengraphiq_image_date – filters the Dynamic Text > Post date content on the generated image
  • opengraphiq_image_author – filters the Dynamic Text > Post author content on the generated image
  • opengraphiq_image_meta – filters the Dynamic Text > Meta / Custom field content on the generated image
  • opengraphiq_image_price – filters the Dynamic Text > Regular price content on the generated image
  • opengraphiq_image_displayprice – filters the Dynamic Text > Display price content on the generated image
  • opengraphiq_post_image_filename – filters the file names for post og image files

Code Examples:

opengraphiq_template – change the template of all posts / products to Stylish (which has post id, for example: 2107):

function template_override( $template ) {
$new_template[2107] = "Stylish";
return $new_template;
}

add_filter( 'opengraphiq_template', 'template_override', 10, 1 );

opengraphiq_image_meta – if meta field name is my_field, add additional content to its value on generated image in dynamic text field:

function meta_override( $content, $meta_name ) {
if ( $meta_name == 'my_field') {
return $content . ' additional content';
}
return $content;
}

add_filter( 'opengraphiq_image_meta', 'meta_override', 10, 2 );

opengraphiq_post_image_filename – by default, og image filenames are generated using post id – for example post with the id 3421 will have og image file named 3421.jpg

This filter enables you to modify the default naming scheme. For example in order to add a random ten character suffix to the post id, each time an image is generated, you can use the following:

function og_filename_alter($filename){
    $bytes = bin2hex(random_bytes(5));
    return ($filename . $bytes);
}

add_filter( ‘opengraphiq_post_image_filename’, ‘og_filename_alter’, 10, 1 );

all other filters – add additonal string to the value generated by OpenGraphiq:

function additonal_content( $content ) {
return $content . ' mystring';
}

add_filter( 'opengraphiq_title', 'additonal_content', 10, 1 );
add_filter( 'opengraphiq_description', 'additonal_content', 10, 1 );
add_filter( 'opengraphiq_image_title', 'additonal_content', 10, 1 );
add_filter( 'opengraphiq_image_excerpt', 'additonal_content', 10, 1 );
add_filter( 'opengraphiq_image_date', 'additonal_content', 10, 1 );
add_filter( 'opengraphiq_image_author', 'additonal_content', 10, 1 );
add_filter( 'opengraphiq_image_meta', 'additonal_content', 10, 1 );
add_filter( 'opengraphiq_image_price', 'additonal_content', 10, 1 );
add_filter( 'opengraphiq_image_displayprice', 'additonal_content', 10, 1 );