Improving how your self-hosted Story Map looks on social media
In my last blog post, I demonstrated how to add Google Analytics to your story map so you can better understand the demographics of your audience as well as how many individuals are viewing your story. Another key aspect of publishing your story and growing your viewership is making sure your story has an engaging link when shared on social media sites. This may include setting the title, adding a short description, choosing a supporting photo and more.
All this can be accomplished by using Open Graph meta tags in the main html page of your story. Open Graph tags are a common set of meta tags adopted by most social media sites that allow the author of a web page to tell other sites what content should be displayed when it is shared.
A Quick Example
Below are two example of the exact same story shared as a link here on Medium (Yep, some blog sites also read the Open Graph tags). The first ones show how the page is shared with the default meta tags in the index.html page. The second shows how the app would appear if is shared after we edit the tags for an engaging title, description, and photo.
Default text in the Open Graph tags:
Custom text in the Open Graph tags:
Essentials for Success
- Have access to a web server to host your customized story.
- Create a Story Map using one of Esri’s Story Map apps.
Getting Started
As an example for adding open graph tags, I’ll be using the same story as my last post: The Deepening Refugee Crisis, and continue where I left off. For information about downloading the code and getting it set up on your computer, please refer to my post about Adding Google Analytics to your Story Maps.
Customize the Tags
Make sure you have the version of the app hosted on your own server with the application ID configured. Open the index.html page in your text editor. We’ve already added all the standard tags you need for most social media sites; you will just need the replace the default content with content that fits your story.
All the tags we’ll be editing are at the very top of the index.html page. We need to change in the following meta tags:
- Title tag (line 4)
- Description content attribute(line 20 and line 25)
- Title content attribute (line 24)
- Image content attribute (line 26)
Note: line numbers refer to the screenshots in this example and may be different in the app you are using. Just look for html tags that have the same og:property.
Title tag
Add a title for your story. This tag will be displayed as the title in a Google search. Add the title between the opening and closing title tags as shown below.
<title>Syria: Epicenter of a Deepening Refugee Crisis</title>Description tag
Add a short description for your story. This first description tag (line 20) will be displayed as the description in a Google search. Replace the default text between the quotation of the content attribute.
<meta name="description" content="Thousands of refugees, many of them fleeing the brutal conflict in Syria, are streaming across Europe in search of safety and security.">This second description tag (line 25) will be displayed as the description when shared on social media. Replace the default text between the quotation of the content attribute.
<meta property="og:description" content="Thousands of refugees, many of them fleeing the brutal conflict in Syria, are streaming across Europe in search of safety and security."/>In this case, we have used the same description for both, but you can create two different descriptions.
Title Open Graph tag
Just like the description, we can make a different title for a Google search than what shows up on social media. Replace the default text between the quotation of the content attribute of the title tag (line 24).
<meta property="og:title" content="Syria: Epicenter of a Deepening Refugee Crisis"/>Image tag
Finally, you can specify which photo you want to be displayed when your story is shared on social media. This needs to be the full url to the image and not just a relative url. If you are hosting the image on your server, you can place it in the “resources” folder. Then you would would use the full url to your story “http://storymaps.esri.com/stories/2015/refugee-crisis/” plus the relative path the the image “resources/myImage.jpg”. So the url you would be “http://storymaps.esri.com/stories/2015/refugee-crisis/resources/myImage.jpg.” Alternatively, you can just use an image that is already hosted on the web. In this case I will use one of the photos already in my story that is hosted on Flickr. Replace the default text between the quotation of the content attribute of the image tag (line 26).
<meta name="og:image" content="https://farm6.staticflickr.com/5805/21501430821_a55e9de5e0_c.jpg" />If you know the exact pixel dimensions of your photo, it is also recommended that you add two additional open graph tags to your index.html page to make sure the photo is displayed the first time your story is shared. This can be added just after the og:image tag (line 27).
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />The content attribute should be the height or width in pixels.
That’s it! If you’ve been working off a test server, it’s now time to move your code over to your production server and share your story with the public.
Update Facebook’s Cache
The first time Facebook reads these meta tags (usually the first time your story is shared), Facebook will cache the content to make their services more efficient. If you make changes to these meta tags after their content has been cached, you will continue to see the old title, description, and image. You can explicitly tell Facebook to update their cache by going to their Object Debugger developer tool and following these steps:
- Open https://developers.facebook.com/tools/debug/.
- Enter the URL to your story in the “Input URL” field.
- Click “Fetch new scrape information”
Update Twitter’s cache
Twitter also caches meta tags in the same way as Facebook. To force Twitter to update its cache to use your latest meta tags you can:
- Open: https://cards-dev.twitter.com/validator
- Enter the URL to your story in the Card URL field.
- Click Preview Card or press enter.
It can be several minutes before existing tweets reflect the new tags after using this tool.
More Resources
Here’s a few more resources if you want more information about how open graph sites are used on each social media site:
