Get “Facebook Image URL” from YoastSEO Field, Show as Featured Image

Interactive journalism (writers) is mostly targeted by WordPress theme and plugin designers. In some cases, news website like mine needed photographic attached at the top of my news articles however sometimes I just write a news story without a photo. (Anyway, photographs mostly provided by friends and reliable sources for dateliners.net).

Okay, we’re going to discuss about a “thumbnail” that came from a post page with Yoast SEO Facebook image field. I’m getting nervous if I wouldn’t provide complete information here but what I mean is a “Temporary Feature Image” which should appear on Facebook and homepage but not on the single post page.

Again, all my tutorials here are for wide usage. I used the code in awareness of Search Engine Optimization. Dateliners.net site has 100% SEO performance and had at least 0.82 page loads but has a low accessibility (this is my problem).

I indicated a screenshot of PHP code below since this free WordPress subdomain feels not comfortable to encode php and javascript code. Look at first the code below:

Variable

$post_id – It takes the options from page_for_post which was designated by Yoast SEO different from the native WordPress “post_page” or post id “get_the_ID()”.

$omging – It takes the image URL value from Yoast SEO (field under Social tab > Facebook Image) from each post ID. Picture follows;

Frontend

You maybe use other tricks regarding the frontend, but I preferred to inline my CSS for the frontend since Google PageSpeed OKs inline CSS. You maybe not needed to include the attribute “data-background”, however check the underlined “style” attribute with a value “print_r($omging)”.

When you done 3 steps above, then it all done and you just hacked Yoast SEO. You can use this trick when your theme has the same design. You can check how we’ve done this on the photos attached below.