• This field is for validation purposes and should be left unchanged.

Gecko Designs
523 N Higgins Ave
Missoula, MT 59802

(406) 662-1123

Dreamweaver Tutorial: Add Open Graph META Tags for Social Sharing

Written by Gabriel on March 28, 2013

Learn How to Add Open Graph META Tags to Adobe Dreamweaver Websites

What are Open Graph Tags for?

It’s no secret that Facebook is a major driver of information sharing and website traffic generation. This is a great asset to web developers who’s primary job is to communicate and deliver messages for website owners and businesses. Open Graph Meta Tags have been leveraged, most notably by Facebook, to share website content. The Open Graph protocol permits webmasters to plan how their site content will be displayed when it is shared socially. Marketers know that when you get a small snippet to promote your activities, you must pick every word, image, and link very carefully. Open Graph Meta Tags give you that precise control over your marketing message when it goes viral on Facebook and other content sharing websites like Google.

How do Open Graph Meta Tags work?

When a content sharing website that uses Open Graph Meta Tags displays a link to your webpage, it checks for specific meta tags in the HTML . These specific tags are listed below in detail for your use. These tags tell the sharing website the specific content to display in the link including an image, a few pieces of text, and the appropriate url to link.

Open Graph Tags are not just for Facebook

Open Graph Meta Tags are most useful for social sharing websites where your content can go viral in an afternoon, when a link to your content looks good it attracts more eyes and generates more shares and clicks. This is most used with Facebook because of its popularity, but other social media websites use Open Graph Tags too! Google is likely the second most relevant user of Open Graph Tags.

In this Dreamweaver tutorial, we show you how to easily add OG META tags to your Dreamweaver website.

Have a look at Facebook’s implementation of the Open Graph tags as well as Google +1’s use of the Open Graph protocol to see some examples.

Step 1: Finding the proper place for your META tags

If you get this step wrong, then this is all for naught! So, pay careful attention as you go through this guide.

Once you have you HTML page (.html) or Dreamweaver Template (.dwt) open, select View from the top menu bar (to the right of the File and Edit menu items). Under View you will see an item called Head Content, this item needs a checkmark beside it. If there is no checkmark there, click on Head Content; if the checkmark is already present, you do not need to click on it. Activating the View Head Content option in the main menu will make all the tags in the <head> visible as icons in the Design View.

Now, we will switch from Design View to Slit View. With Split selected, click into the Head Content area just to the right of the little icons. This will place your cursor inside the <head> HTML. Now look to the left of the Design View to see that your cursor has been placed just before the closing </head> tag. This is exactly where we need to add our new META tags for the Open Graph protocol!

Step 2: Insert the proper Open Graph META Tags

Now that we have the cursor in exactly the right spot for these META tags, we will copy the tags below and paste them directly into the HTML code. This must be done carefully and most importantly make sure that each Open Graph META tag is on its own line.

<meta property="og:title" content="The Rock" />
<meta property="og:description" content="Sean Connery found fame and fortune as the suave, sophisticated British agent, James Bond." />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />

In the code above, you will want to replace the bold text within the quotes after content= with your own copy or url depending on which og property it is. Each meta tag has a property=”og:__” that tells you what it does. You can learn more Open Graph META Tags at http://ogp.me/. In this Open Graph tag tutorial for Dreamweaver, we show you the properties for Title, Description, Image, & URL. You can use as many or as few as suit your needs – if you want to start basic, use just a the og:image property so that you will get a nifty image next to the automatically generated text for your social link. Once you have this all set up and live online, it is time to test it out using Facebook’s Open Graph testing tool.

Posted in Adobe Dreamweaver

2 Comments to Dreamweaver Tutorial: Add Open Graph META Tags for Social Sharing

  1. Tim's Gravatar Tim
    December 9, 2015 at 11:10 pm | Permalink

    Thanks for this great tutorial which recently help my new student

  2. August 8, 2016 at 10:12 am | Permalink

    Thanks a lot .. this is very useful for new frontend developer.

Leave a Reply

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Featured Clients

The Collegian

Timerline Truck & Trailer Logo

Take the first step

Questions? Give us a ring, shoot us an email or send a homing pigeon our way. Let’s get the ball rolling! We can’t wait to hear from you!

Gecko Designs, LLC
523 N Higgins Ave
Missoula, MT 59802

(406) 662-1123

523 N Higgins Ave, Missoula
Courtney Firak 2 months ago
Working with the team at Gecko Designs has been fantastic! I worked closely with Ali to create a new meetings website and she was so patient with all the changes to copy and took the time to walk me through the back-end of Word Press. I am confidently making changes on own but know that any request will be done quickly. The team was even very responsive over a weekend to meet a deadline. Highly, highly recommend!
PHC Missoula 3 months ago
Gecko's team does great work. We had a fairly complex request with a variety of stakeholder interests at play. Their team listened carefully and responded thoughtfully to our needs throughout the process! We were very pleased with the process and thrilled with the final product they provided.
Ronald Richker in the last week
The website that was built for us does not work on all browsers. Specifically, the product configurator, the most important part of the website, produces an error on older browsers. Very disappointed and frustrated.
Libby Addington 8 months ago
Gecko brings an immense amount of talent and expertise to any project, adding value and saving us time at every step of the process. We've been blown away by their balance of creative capability (across strategy, ideation, design and execution) with impeccable execution, on time and on budget every time. Can't recommend them highly enough.
Mark Thome 5 months ago
Gecko Designs had us at the lead phrase on their home page: "If you're tired of flakey freelancers and want to work with a team of professional, reliable experts, you've come to the right place!" We were at that point developing our site that we needed to step up to a professional team with a demonstrated portfolio of blue-chip sites, and the expertise to help bring our crazy ideas to fruition. We're looking forward to The Missoula Underground being a vital part of the Northwestern Montana scene, and the first step was picking up the phone and having a conversation with Gabe. Don't hesitate to hire their team, they are ACES at web design and development. Thanks, Gecko!
We’ve been working so hard making our clients look good, we neglected our own brand for quite a few years (25 to be exact...)! New look comin’ at ya Fall 2020! Has it been awhile since you’ve re-branded? We get it! Call us and we can help! (406) 662-1123