Download the PHP package lukaswhite/meta-tags without Composer

Meta Tags

This library helps you manage meta tags (including Open Graph) for your website or web application.

Chances are, many of your meta tags are generated programmatically, for example from a database. Most notably the page title, but perhaps also the description and keywords.

Perhaps you make these available as data to your views, then build the tags there. What this library does is allow you to build them inside of your application (in a controller, for example), then output them in your views really easily.

So, instead of something like this (I'm using Blade syntax here):

This library allows you to do this:

In fact, if you're using UTF-8 then it's the default anyway, so that ->charSet( ) call is redundant.

Then in your view:

If you're using Laravel, you could do something like this:

In the example above, we've registered the MetaTags class as singleton with the service container. More on that later.

So what are the benefits?

• A maximum of one variable to pass to your views
• No hand-coding the tags themselves
• No confusion as to when to use name vs property attributes
• It makes it harder to forget things like setting the character set
• Set the title and description, and the corresponding Open Graph meta tags are set for you
• It (hopefully!) helps as a reminder for important, but often overlooked things like canonicalization
• It exposes some of the lesser-known meta tags, like the one aimed directly at Googlebots
• It keeps your layouts nice and tidy

Installation

First Steps

Create an instance as follows:

I'd recommend creating it as a singleton, then popping it in a service container or similar.

For example, if you're using Laravel:

Then, whenever you want to set your meta tags, for example in a controller, then you can get the instance like this:

Standard Metadata

Setting the Title

By default, this will add the following:

You'll notice that it's added an Open Graph tag with the title by default; if you don't want that behavior:

The result:

Setting the Description

By default, this will add the following:

You'll notice that it's added an Open Graph tag with the description by default; if you don't want that behavior:

The result:

Setting the Keywords

The result:

Setting the URL

Set the url like this:

This will output the following:

Setting the Character Set

The library will automatically add the character set to the meta tags, defaulting to UTF-8. So this is added automatically:

To set the character set to something different:

The result:

Should, for any reason, you not wish this to be added then you can simply set it to null:

Canonical URLs

To set the canonical link meta tag:

This results in the following:

Pagination

If you're rendering a page that lists something and it uses pagination, then it can be helpful to add links to the next and / or previous pages as links. That's to say, a link tag with rel=prev or rel=next.

Suppose we're currently on page four:

You can also set the first and last pages:

Feeds

RSS

If you have an RSS feed associated with a website or category, it's a good idea to create a link to it.

Without a title:

Or with:

Atom

If you have an Atom feed associated with a website or category, it's a good idea to create a link to it.

Without a title:

Or with:

Robots

By default robots will index and follow; if you want to tell them not to do one or both you can use one of the following methods:

Googlebot

There are a couple of additional requests you can make from the Googlebot, in addition to the noindex or nofollow clauses.

To prevent a text snippet or video preview from being shown in the search results:

To prevent Google from showing the Cached link for a page:

To specify that you do not want your page to appear as the referring page for an image that appears in Google search results:

Apologies for the ridiculously long method name, better suggestions welcome!

To request that Google stop crawling a page after a specified date:

Performance-related Meta Tags

There are a number of meta tags that are performance-related; specifically things like pre-fetching and pre-rendering.

Pre-fetching

You can add a link to the meta tags to tell the browser to pre-fetch a resource:

You can also add a hint as to the type of resource:

Preloading

You can add a link to the meta tags to tell the browser to preload a resource:

You can also add a hint as to the type of resource:

DNS Pre-fetching

DNS pre-fetching is the process of initiating the dns resolution of each domain where we have hosted resources, before the browser makes a request for them, with the goal to save the DNS resolution time when the resource is requested. (source)

To do so:

Pre-renderng

To ask the browser to pre-render content:

http-equiv Meta Tags

There's a catgeory of meta tags that look like this:

They're essentially the HTML equivalent of HTTP headers.

To add one:

To tell browsers that you don't want a page to be cached, you can either set the relevant tags manually, or you can do this:

As per the advice on this page, since not all all client browsers and caching devices (e.g. proxy servers) are known to successfully implement all no-caching options, this method includes multiple no-caching options; specfically it adds the following meta tags:

Custom Meta Tags

Custom meta tags can be useful for injecting data into a page that you can later access via JavaScript. Laravel does this for CSRF tokens, for example, or you may wish to use this approach for injecting an application ID or public key.

Here are some examples:

Note that last one; Laravel outputs the CSRF meta tag like this:

Whereas the Google Maps example above will use the more common property attribute, i.e.:

Open Graph Tags

The library makes adding Open Graph meta tags easy.

Enabling or Disabling

Open Graph tags are enabled by default; that includes some which get added automatically. If you wish to disable this:

Basic Tags

There are some basic — and very important — Open Graph tags that have "standard" equivalents. Notably the title, description and URL. These get automatically added as Open Graph tags in addition to "standard" tags when you specify them with the corresponding methods.

In other words, if you do this:

You'll get the following:

Defining the Type

By default the required og:type meta tag is added, which by default is a website. I.e.:

You can override this with the type( ) method, for example:

You can also use one of the provided constants:

You can also set any attributes at the same time, for example:

Passing an array of attributes in this way isn't the preferred way to do this; we'll look at other ways later.

Or, call one of the following methods:

Setting the Locale

To set the locale, for example for localization with Facebook:

Setting the URL

To set the Open Graph URL — in other words, og:url — simply do this:

Other Open Graph Tags

You can set any Open Graph tag using the openGraph( ) method:

Should you be setting an Open Graph tag that can appear multiple times, pass true as the third argument. This essentially allows you to "overwrite" Open Graph tags; which might useful if, for example, you need to override information somewhere in your application.

Images

Images are important for social networks, for example when your site is shared via Facebook, or used as the basis of a Twitter Card (more on those later).

To add an image:

If you'd rather use your own image class, simply implement the Image contract included in this package.

It's named addImage( ) rather than, say, setImage( ) because the Open Graph protocol allows you to add multiple images.

Videos

To add a video:

If you'd rather use your own image class, simply implement the Video contract included in this package.

It's named addVideo( ) rather than, say, setVideo( ) because the Open Graph protocol allows you to add multiple videos.

Audio

To add audio:

If you'd rather use your own image class, simply implement the Video contract included in this package.

Profiles

If a web page represents a user profile, for example in a social network, then you can do this:

If you'd rather use your own profile class, simply implement the Profile contract included in this package.

Books

If a web page represents a book:

If you'd rather use your own book class, simply implement the Book contract included in this package.

Note that since a book may have multiple authors, this is also permitted:

Contact Data

You can add contact data such as an address, e-mail address or telephone number to the Open Graph meta tags; this might be appropriate for a business listing site, for example.

Here's one way to do it:

This will add the following meta tags:

Alternatively, you can use your own class by implementing the ContactData interface:

Finally, there are also individual methods:

Geographical Information

In addition to address information via contact data, Open Graph also allows you to specify the specific geographical location a page represents by setting the latitude and longitude, and optionally the altitude.

The result:

Rather than pass an instance of the provided Geopoint class, you can instead pass any class that implements the interface with the same name. Essentially this entails providing getLatitude( ), getLatitude( ) and getAltitude( ) methods.

Business Opening Hours

To specify a business' opening hours:

Facebook

Facebook has a few Open Graph tags that are specific to the social network.

The App ID

To set the app ID of the site's app:

The Profile IDs

To set the Facebook profile ID; that's to say, the Facebook ID of a user that can be followed:

Admins

To set the admins:

Pages

To set one or more Facebook Page IDs that are associated with a URL in order to enable link editing and instant article publishing:

Twitter Cards

For Twitter cards, the Open Graph tags will generally suffice (previously Twitter used proprietary tags such as twitter:title, but these are now largely redundant), although you'll also want to call this:

This will add the following:

For a different type, just pass it as an argument:

You can also set the site and / or creator:

The metadata — for example, the name and description — along with any media such as images will be fetched from the Open Graph tags.

You can, however, override these; if for any reason you want different metadata for Twitter:

This will set twitter:title and twitter:description metatags respectively.

Here's a complete example:

Examples (Laravel-flavored)

These simplified examples use Laravel, but you can use this library using any framework - or indeed without a framework at all.

Registering as a Singleton

One approach you could take if you're using Laravel is to register the meta tags as a singleton; that way you can also start setting your meta tags during the bootstrap phase:

You can of course use a similar approach without Laravel, though the syntax will obviously be different.

Then, whenever you want to set your meta tags, for example in a controller, then you can get the instance like this:

Because it's a singleton, you can build your meta tags from multiple parts of your application.

A Content Management System

This is a really basic example; it's pulling a page from the database, and setting the page title and page description from that.

A Restaurant Listing Site

In this example, the controller is pulling a restaurant record from the database in order to display it. It's using the meta tags library to match the title and description to the restaurant.

In addition, it's setting the Open Graph tags for the address of the restaurant, as well as pointing it to the geographical location.

Alternatively, if the Restaurant class implements the ContactData and Geopoint interfaces, you can simplify the code above significantly:

A Social Network

This example demonstrates a simple example whereby this particular controller display's a user's profile on a social network, setting the appropriate Open Graph tags.

Outputting the Tags

To render the tags, just call the render( ) method, for example:

Or using Blade:

The class also implements the __toString( ) method, so you can even print it right out. It simply calls the render( ) method.

Customizing the Output

By default, the meta tag output includes newlines. You can turn this off using the verbose( ) method.

If you want even more control over the resulting string, you can set the tag prefix and tag suffix. For example, perhaps you want pretty-printed HTML:

The result will be along these lines:

Should you want even more control over the output, or want to make any modifications, then you can call the build( ) method, which will return an array of HtmlElement instances. The documentation for that is here.

Geo Tags

You can also add geotags:

The result:

Adding Additional Meta Tags

It's worth pointing out that you don't necessarily need to add all of your meta tags to your site using this library; indeed arguably there are some that you shouldn't.

Take this example:

The meta tag and link tag are really theme-specific, so it might make things clearer if you add them to your layout in this way.

That's not to say you can't do it programmatically: