Software, your way.
burger menu icon
WillMaster

WillMasterBlog > Tips and Tricks

FREE! Coding tips, tricks, and treasures.

Possibilities weekly ezine

Get the weekly email website developers read:

 

Your email address

name@example.com
YES! Send Possibilities every week!

Special Header Tags to Inform Facebook's Spiders

Facebook and Twitter, and perhaps other social media sites, developed special header tags they look for when a web page URL is published. The header tags are in the head area of a web page. They tell the social media site's spider what image and text to use when the link is published.

Here, I will talk about some of Facebook's special header tags, called Open Graph tags.

Facebook's spider can be told what title to use for the URL, what description to use and, if an image is available, what image to use. Without the special header tags, the spider looks around and tries to find appropriate information to publish with the link.

The Facebook developer's page talks about other header tags that can be used, but we'll talk only about three of them. The property attributes of the special header tags begin with og: and continue with names that identify what type of information the tag contains. The three names applicable to this write-up are og:image, og:title, and og:description.

The information the tag provides is in the content attribute.

Here is an example of each of the three:

<meta property="og:image" content="https://example.com/article-image.jpg">
<meta property="og:title" content="Reasons for Using a Header Tag Like This">
<meta property="og:description" content="How much do the special header tags help?">

To implement this, update the value of the content attributes as appropriate. Put the tags into the head area of the web page they apply to. It is okay to omit a tag if you don't have information for it.

Most of the willmaster.com web pages contain the special title and description tags for Facebook. There generally is no image for an article, so Facebook has to get along without one.

(This content first appeared in Possibilities newsletter.)

Will Bontrager

Was this blog post helpful to you?
(anonymous form)

Support This Website

Some of our support is from people like you who see the value of all that's offered for FREE at this website.

"Yes, let me contribute."

Amount (USD):

Tap to Choose
Contribution
Method


All information in WillMaster Blog articles is presented AS-IS.

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.

Recent Articles in the Library

Form Debugging Assistant

Form Debugging Assistant is a handy tool. If you keep the JavaScript in a file on your server, it can be pulled into a web page whenever you need to debug a form.

Make Smaller Copy of Image

The MakeSmallerCopyOfImage function can be placed into your PHP scripts. It is designed to make a copy of an image and reduce its size.

Tap to Select

Making it easy for your site visitors to select content they probably will want to copy is a gesture of friendliness.

CSV to HTML Table

Create an HTML table from a CSV file.

Image Transparency

An image can be given a degree of transparency with the CSS opacity property.

Finding Div's Top-Left Corner Position

The coordinates of any type of HTML element can be determined.

Silent Notes

Once implemented, this system is a nice logger when occurrences of extra-important events on a web page need to be counted.

How Can We Help You? balloons
How Can We Help You?
bullet Custom Programming
bullet Ready-Made Software
bullet Technical Support
bullet Possibilities Newsletter
bullet Website "How-To" Info
bullet Useful Information List

© 1998-2001 William and Mari Bontrager
© 2001-2011 Bontrager Connection, LLC
© 2011-2025 Will Bontrager Software LLC